WebdriverJS設置視口大小

Question

我想推出一些分辨率的視口大小Chrome瀏覽器，例如800×600，我試着下面的代碼

var width = 800; 
var height = 600; 
driver.manage().window().setSize(width, height); 

上面的代碼只是調整窗口爲800x600，當我在開發者控制檯運行window.screen.width它總是返回1440

我甚至試圖添加鉻選項與選項--window-size=x,y

var o = new chrome.Options(); 
o.addArguments("--window-size=640,480"); 

driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).setChromeOptions(o).build(); 

上面的代碼仍然執行相同的操作，只是調整窗口大小。

有人請告訴我任何chrome命令行選項來設置默認視口，就像我們在Chrome開發者控制檯中做的那樣（如下圖所示），或者請告訴任何選項直接在selenium webdriverJS中執行。

Answer 1

問題
看來你真的要影響什麼window.screen.width和window.screen.height回報。這通常是不可能的，只是在Chrome中使用device mode（和toolbar）時，這些值會發生變化。所以，讓我們觸發這些，對吧？

// open inspector and responsive design mode 
driver.actions() 
    .keyDown(Key.CONTROL) 
    .keyDown(Key.SHIFT) 
    .sendKeys('im') 
    .keyUp(Key.SHIFT) 
    .keyUp(Key.CONTROL) 
    .perform(); 

不幸的是，這won't work in Chrome。引用該答案：

Chrome驅動程序使用Chrome遠程調試協議與瀏覽器通信。這與開發人員控制檯也使用的協議相同。不幸的是，Chrome的設計使得一次只能使用協議連接一個客戶端，因此這意味着開發人員工具或驅動程序，但不能同時使用。       — JimEvans

無賴。但是，看起來這可以用於工作using Firefox。不幸的是，目前看來使用Selenium + geckodriver執行動作是currently not possible。使用JavaScript也無法打開此模式。然而，我們可以將密鑰發送給一個元素。

溶液
我下面的作品。

var webdriver = require('selenium-webdriver'), 
    firefox = require('selenium-webdriver/firefox'), 
    By = webdriver.By, 
    Key = webdriver.Key, 
    driver = null; 

// construct driver 
var profile = new firefox.Profile(), 
    devicePreset = [{ 
     width: 640, 
     height: 480, 
     key: '640x480', 
     name: 'Mobile Device' 
    }]; 
profile.setPreference('devtools.responsiveUI.presets', 
         JSON.stringify(devicePreset)); 
var opts = new firefox.Options(); 
opts.setProfile(profile); 
var builder = new webdriver.Builder().forBrowser('firefox'); 
builder.setFirefoxOptions(opts); 
driver = builder.build(); 

driver.get('http://www.google.com'); 

// open responsive design mode 
driver.findElement(By.css('input[name="q"]')) 
    .sendKeys(Key.chord(Key.CONTROL, Key.SHIFT, 'm')); 

driver.get('https://www.iplocation.net/find-ip-address'); 

請注意，我爲Firefox設置了一個首選項，指明在響應設計模式下使用的大小。您可以將其更改爲您喜歡的任何屏幕大小。

Answer 2

您所提供的代碼工作完全正常。

但是，您正在檢查screen的分辨率，而不是window的大小！這是window.screen.width和window.screen.height所指的內容。要檢索窗口的大小，請使用window.innerWidth（和innerHeight）。以下對我有用。

var webdriver = require('selenium-webdriver'), 
    driver = null; 

function logWindowSize() { 
    driver.executeScript(function() { 
     return [window.innerWidth, window.innerHeight]; 
    }).then(console.log); 
} 

// construct driver 
driver = new webdriver.Builder() 
    .withCapabilities(webdriver.Capabilities.chrome()) 
    .build(); 
driver.get('http://www.google.com'); 

// resize window 
logWindowSize(); 
driver.manage().window().setSize(640, 480); 
logWindowSize(); 
driver.quit(); 

這將記錄下我的控制檯。

[ 945, 1018 ] 
[ 640, 375 ] 

請注意，窗口的高度與設置的不同。這是因爲標籤欄和導航欄的高度。您可以通過首先將其設置爲任意值來設置內部窗口大小，檢查差異，然後將其設置爲您想要的值並加上差異。像這樣。

var webdriver = require('selenium-webdriver'), 
    driver = null, 
    sizeWidth = 640, 
    sizeHeight = 480; 

// construct driver 
driver = new webdriver.Builder() 
    .withCapabilities(webdriver.Capabilities.chrome()) 
    .build(); 
driver.get('http://www.google.com'); 

// resize window 
driver.manage().window().setSize(sizeWidth, sizeHeight); 
driver.executeScript(function() { 
    return [window.innerWidth, window.innerHeight]; 
}).then(function(actualSize) { 
    driver.manage().window().setSize(
     2 * sizeWidth - actualSize[0], 
     2 * sizeHeight - actualSize[1] 
    ); 
    // the following will log the sizes we want 
    driver.executeScript(function() { 
     return [window.innerWidth, window.innerHeight]; 
    }).then(console.log); 
}); 
driver.quit();