如何使用 WebdriverIO 返回一个新的有效页面对象？答案

【问题标题】：How can you return a new valid page object with WebdriverIO?如何使用 WebdriverIO 返回一个新的有效页面对象？
【发布时间】：2018-01-17 11:17:00
【问题描述】：

我们刚刚开始在工作中实现一个 WebdriverIO-mocha-chai 框架，因为我有 Selenium/Java 背景，所以对我来说有点棘手。

我的页面对象如下所示：

**page.js**

export default class Page {

  get title() { return browser.getTitle() };
  get header() { return browser.element('.Header') }
  get logoutLink() { return browser.element('a.logout') }


  open(url) {
    browser.windowHandleFullscreen().url(`/#/${url}`);
  }
}


**page1.js**

import Page from './page'
import Page2 from './Page2'

class Page1 extends Page {

  get element1() { return browser.element('selector1') }
  get element2() { return browser.element('selector2') }

  clickElement1Page1() {
    this.element1.scroll();
    this.element1.waitForVisible();
    this.element1.click();
    return this;
  }
}

export default new Page1()

**page2.js**

import Page from './page'
import Page1 from './page1';

class Page2 extends Page {
  get element1() { return browser.element('selector1') }
  get element2() { return browser.element('selector2') }
  get element3() { return browser.element('selector3') }
  get element4() { return browser.element('selector4') }

  open() {
    super.open('page2')
  }

  clickElement1Page2() {
    this.element1.scroll();
    this.element1.waitForVisible();
    this.element1.click();
    return this;
  }

  fillForm(name, title) {
    this.element2.setValue(name);
    this.element3.setValue(title);
    this.element4.click();
    return new Page1();
  }
}

export default new Page2()

这与 WebdriverIO 网站上建议的模型之间的区别在于我添加了 return 语句，这使我们遇到了我需要帮助的问题。我希望我的测试看起来尽可能简单，例如：

Page2.clickElement1Page2().fillForm("text", "text").clickElement1Page1();

expect(...).to.be.true;

现在我在return new Page1() 行得到一个“_page1.default 不是构造函数”。

考虑到在这个范例中元素没有在构造函数中初始化，这种链接是否可以使用 WebdriverIO？非常感谢任何关于可靠 webdriverIO POM 项目的建议或示例。谢谢！

【问题讨论】：

标签： javascript testing automated-tests pageobjects webdriver-io

【解决方案1】：

首先，我认为您可以通过将return new Page1() 更改为return Page1 来完成您想做的事情。

也就是说——我不相信从Page2 内部返回Page1 的好处是值得的。在我看来，页面对象很有用，因为您可以清楚地分隔应用程序的页面/部分，包括在您的测试用例中。不过，我当然会推荐使用return this 来在单个页面对象中链接命令。

写作

Page2.clickElement1Page2().fillForm("text", "text")
Page1.clickElement1Page1()

清楚地表示页面导航是预期的，并且您现在位于第 1 页。调试也容易得多，因为您可以直接转到 Page1，而不必遵循来自其他 Pages 的长链。

【讨论】：