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();