量角器测试的动态浏览器分辨率答案

【问题标题】：Dynamic browser resolution for Protractor testing量角器测试的动态浏览器分辨率
【发布时间】：2019-03-27 15:32:07
【问题描述】：

我的问题涉及涉及响应式网络应用的端到端测试场景。我已经为页面编写了测试场景，以根据屏幕分辨率使用不同的测试用例进行测试。我正在使用数组变量来存储链接到同一元素的不同选择器，例如：

  it('should display the log in page', function () {
    gVar.signInButton = element(by.css(gVar.signInButtonSelector[gVar.SelectedMode]));
    gVar.signInButton.click().then(function(){
      expect(element(by.css(gVar.titleLoginPageSelector[gVar.SelectedMode])).getText()).toEqual(gVar.titleLoginPage[i]);
    });

这里我试图选择登录页面标题来测试它。根据分辨率不同，只有选择器不同，我将它们存储在数组中...

在我的 conf.js 中，我有一个参数变量，我在命令行中使用它来设置我想要使用的配置：

    exports.config = {
    //...

      params:{
            resolutionConfig:'default'
            },  

    //...
    }

运行命令可以去：

protractor conf.js --params.resolutionConfig=Classic 或

protractor conf.js --params.resolutionConfig=Mobile 或

protractor conf.js --params.resolutionConfig=Tablet ...

（然后我有一个匹配表来把这个参数和上面的整数值关联起来：gVar.SelectedMode）

我现在想做的是为我的浏览器设置不同的分辨率值，为我正在测试的每个 resolutionConfig 参数值设置一个不同的值。到目前为止，我知道如何使用硬编码值设置该分辨率：

    exports.config = {
    //...

    capabilities: {
        browserName: 'chrome',
        chromeOptions: {
            args: ['--window-size=100,100'] // THIS!
        }

    //...
    }

我听说过运行并行测试的“多能力”，但这并不是我想要的……是否可以将分辨率参数设置为变量并为其添加逻辑？比如：

    if(resolutionConfig) is "mobile" then: ['--window-size=xx,xx']; 
    if(resolutionConfig) is "tablet" then: ['--window-size=yy,yy'];

【问题讨论】：

标签： testing configuration protractor

【解决方案1】：

要回答您最初的问题，您可以使用browser.driver.manage().window().setSize() 手动设置所需浏览器的分辨率。

我不确定您提到的数组中到底有什么，但我可能会以与您不同的方式解决您的问题：

设置参数：

params: {
    resolutionConfig: 'default', //could be default, mobile or tablet
    default: { //set whatever res you need
        resWidth: 1700,
        resHeight: 1500,
        titleLocator: '//div[@title="defaultTitle]"'
    },
    mobile: {
        resWidth: 800,
        resHeight: 1000,
        titleLocator: '//div[@title="mobileTitle]"'
    },
    tablet: {
        resWidth: 1200,
        resHeight: 1200,
        titleLocator: '//div[@title="tabletTitle]"'
    }
},
onPrepare: {
   //See below for explanation
  let requiredHeight = browser.params[browser.params.resolutionConfig].resHeight;
  let requiredWidth = browser.params[browser.params.resolutionConfig].resWidth;
  browser.driver.manage().window().setSize(requiredHeight, requiredWidth)
}

你可以按照你想要的方式启动量角器

protractor conf.js --params.resolutionConfig=Classic
protractor conf.js --params.resolutionConfig=Mobile
protractor conf.js --params.resolutionConfig=Tablet

您可以定位动态标题元素，例如

element(by.xpath(browser.params[browser.params.resolutionConfig].titleLocator))
//which is equivalent to 
element(by.xpath(browser.params['default'].titleLocator))
//and as we declared above
browser.params['default'].titleLocator = "//div[@title="defaultTitle]"
//so therefore we are actually doing
element(by.xpath("//div[@title="defaultTitle]"))

【讨论】：