如何使用WebdriverIO返回新的有效页面对象?

时间:2018-01-17 11:17:00

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

我们刚刚开始在工作中实现一个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项目的例子都非常感谢。 谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

书写

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

清楚地表示预期页面导航,并且您现在在Page1上。调试也更容易,因为您可以直接转到Page1,而不是可能必须遵循其他页面的长链。