WebdriverJS 设置视口大小

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。不幸的是，目前执行操作似乎是currently not possible 使用 Selenium + geckodriver。也无法使用 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 设置了一个首选项，指示在响应式设计模式中使用的大小。您可以将其更改为您喜欢的任何屏幕尺寸。