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

您提供的代碼運行正常。

但是，您正在檢查屏幕的分辨率，而不是窗口的大小！ 這是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中使用設備模式 （和工具欄 ）時這些值會更改。 那么，讓我們觸發這些吧？

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

不幸的是，這不適用於Chrome瀏覽器 。 引用該答案：

Chrome驅動程序使用Chrome遠程調試協議與瀏覽器進行通信。 開發者控制台也使用相同的協議。 不幸的是，Chrome的設計使得一次只能使用該協議連接一個客戶端，這意味着開發人員工具或驅動程序必須同時連接。 — 吉姆·埃文斯（JimEvans）

笨蛋 看起來可以使用Firefox進行此操作。 不幸的是，目前似乎無法使用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設置了首選項，該首選項指示了在響應式設計模式下使用的大小。 您可以將其更改為您喜歡的任何屏幕尺寸。