javascript - 多个浏览器和页面对象模式

Question

我们正在使用 页面对象模式 来组织我们内部的 AngularJS 应用程序测试。

这是我们拥有的示例页面对象:

var LoginPage = function () {
    this.username = element(by.id("username"));
    this.password = element(by.id("password"));

    this.loginButton = element(by.id("submit"));
}

module.exports = LoginPage;

在单浏览器测试中，很清楚如何使用它:

var LoginPage = require("./../po/login.po.js");

describe("Login functionality", function () {
    var scope = {};

    beforeEach(function () {
        browser.get("/#login");

        scope.page = new LoginPage();
    });

    it("should successfully log in a user", function () {
        scope.page.username.clear();
        scope.page.username.sendKeys(login);
        scope.page.password.sendKeys(password);
        scope.page.loginButton.click();

        // assert we are logged in
    });
});

但是，当涉及到实例化多个浏览器的测试并且需要在单个测试中在它们之间切换时，如何在多个浏览器中使用相同的页面对象变得不清楚:

describe("Login functionality", function () {
    var scope = {};

    beforeEach(function () {
        browser.get("/#login");

        scope.page = new LoginPage();
    });

    it("should warn there is an opened session", function () {
        scope.page.username.clear();
        scope.page.username.sendKeys(login);
        scope.page.password.sendKeys(password);
        scope.page.loginButton.click();

        // assert we are logged in

        // fire up a different browser and log in
        var browser2 = browser.forkNewDriverInstance();

        // the problem is here - scope.page.username.clear() would be applied to the main "browser"
    });
});

问题:

在我们 fork 一个新的浏览器之后，我们如何使用相同的页面对象字段和函数，但应用于新实例化的浏览器(在本例中为 browser2)？

换句话说，这里所有的element() 调用都会应用于browser，但需要应用于browser2。我们如何切换上下文？

---

想法:

• 一种可能的方法是 redefine the global element = browser2.element暂时处于 browser2 的上下文中。这种方法的问题是我们在页面对象函数中也有 browser.wait() 调用。这意味着还应设置 browser = browser2。在这种情况下，我们需要记住临时变量中的 browser 全局对象，并在切换回主 browser 上下文后恢复它。

  /li>

• 另一种可能的方法是将浏览器实例传递到页面对象中，例如:

  var LoginPage = function (browserInstance) {
      browser = browserInstance ? browserInstance : browser;
      var element = browser.element;
  
      // ...
  }
  

  但这可能需要更改我们拥有的每个页面对象..

_{希望问题很清楚 - 如果需要澄清，请告诉我。}

Answer 1

也许你可以写几个函数让浏览器注册/启动/切换更顺畅。 (基本上这是您的第一个选择，需要一些支持。)

例如:

var browserRegistry = [];

function openNewBrowser(){
  if(typeof browserRegistry[0] == 'undefined'){
    browseRegistry[0] = {
      browser: browser,
      element: element,
      $: $,
      $$: $$,
      ... whatever else you need.
    }
  }
  var tmp = browser.forkNewDriverInstance();
  var id = browserRegistry.length;
  browseRegistry[id] = {
      browser: tmp,
      element: tmp.element,
      $: tmp.$,
      $$: tmp.$$,
      ... whatever else you need.
  }
  switchToBrowserContext(id);
  return id;
}
function switchToBrowserContext(id){
  browser=browseRegistry[id].browser;
  element=browseRegistry[id].element;
  $=browseRegistry[id].$;
  $$=browseRegistry[id].$$;
}

并且您在示例中以这种方式使用它:

describe("Login functionality", function () {
    var scope = {};

    beforeEach(function () {
        browser.get("/#login");
        scope.page1 = new LoginPage();
        openNewBrowser();
        browser.get("/#login");
        scope.page2 = new LoginPage();
    });

    it("should warn there is an opened session", function () {
        scope.page1.username.clear();
        scope.page1.username.sendKeys(login);
        scope.page1.password.sendKeys(password);
        scope.page1.loginButton.click();

        scope.page2.username.clear();
        scope.page2.username.sendKeys(login);
        scope.page2.password.sendKeys(password);
        scope.page2.loginButton.click();    
    });
}); 

因此您可以将页面对象保持原样。

老实说，我认为你的第二种方法更简洁...... 使用全局变量可能会在以后反咬一口。 但如果您不想更改采购订单，这也可以。

(我没有测试它...对于可能出现的拼写错误/错误感到抱歉。) (例如，您可以将支持功能放在 Protractor conf 的 onprepare 部分。)