WebdriverJS设置视口大小 [英] WebdriverJS Set viewport Size

问题描述

我想启动具有某些分辨率的视口大小的chrome浏览器，例如800x600，我尝试了以下代码

I want to launch chrome browser with viewport size of some resolution , for example 800x600 , I tried following code

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

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

Above code just resizing window to 800x600 , when I run window.screen.width in developer console it always return 1440

我什至尝试使用--window-size=x,y选项添加chrome选项

I even tried to add chrome option with --window-size=x,y option

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

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

上面的代码仍然执行相同的操作，只是调整窗口的大小.

Above code still do the same ,just resizing the window.

有些人请告诉我任何chrome命令行选项，以设置默认视口，就像我们在chrome开发人员控制台中所做的一样(如下所示)，或者请告诉任何选项直接在selenium webdriverJS中进行.

Some one please tell me any chrome command line option to set default viewport like we do in chrome developer console (as shown below) , or please tell any option to do directly in selenium webdriverJS.

推荐答案

问题
看来您真的想影响window.screen.width和window.screen.height的返回值.这通常是不可能的，除了使用 device模式(以及工具栏)在Chrome中.那么，让我们触发这些吧?

The problem
It seems that you really want to influence what window.screen.width and window.screen.height return. This is normally not possible, except that these values change when using the device mode (and toolbar) in Chrome. So, let's trigger those, right?

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

不幸的是，此 无法在Chrome中运行 .引用该答案:

Unfortunately, this won't work in Chrome. To quote that answer:

Chrome驱动程序使用Chrome远程调试协议与浏览器进行通信.开发者控制台也使用相同的协议.不幸的是，Chrome的设计使得一次只能使用该协议连接一个客户端，这意味着开发人员工具或驱动程序必须同时连接.   — JimEvans

笨蛋.但是，看起来可以使用Firefox在上正常工作.不幸的是，似乎无法在Selenium + geckodriver上执行操作当前不可能片刻.也无法使用JavaScript打开此模式.但是，我们可以将键发送到元素.

Bummer. It looks like this can be made to work using Firefox, however. Unfortunately, it seems that performing actions is currently not possible using Selenium + geckodriver, at the moment. It is also not possible to open this mode using JavaScript. We can however send keys to an element.

解决方案
以下对我有用.

A solution
The following works for me.

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设置了首选项，该首选项指示了在响应式设计模式下使用的大小.您可以将其更改为您喜欢的任何屏幕尺寸.

Note that I set a preference for Firefox that indicates the size to use in the responsive design mode. You can change this to whatever screen size you prefer.

这篇关于WebdriverJS设置视口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！