Question

我想推出具有某种分辨率视口大小的Chrome浏览器，例如800x600，我试过以下代码

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

上面的代码只是将窗口大小调整为800x600，当我在开发者控制台中运行window.screen.width时，它总是返回1440

我甚至尝试使用--window-size=x,y选项

添加chrome选项

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

您提供的代码工作正常。

但是，您正在检查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();

Answer 2

问题
您似乎真的想影响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设置了一个首选项，指示在响应式设计模式中使用的大小。您可以将其更改为您喜欢的任何屏幕尺寸。

WebdriverJS设置视口大小

2 个答案: