testing - Protractor 测试的动态浏览器分辨率

Question

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

  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'];

Answer 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

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]"))