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

Question

我们刚刚开始在工作中实现 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 项目的建议或示例都将受到高度赞赏。 谢谢!

Answer 1

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

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

写作

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

清楚地表明需要进行页面导航，并且您现在位于 Page1。调试也容易得多，因为您可以直接转到 Page1，而不必遵循其他页面的长链。