javascript - WebdriverIO 页面对象继承

Question

我正在使用 WebdriverIO 构建一个 e2e 测试套件，但我一直致力于在页面对象之间创建继承。

在 Protractor 中，我们可以通过参数传递上下文，然后只搜索该上下文中的元素。例如，

var pageObject = context.element(by.css('.some-class'));


例如，

这是主页上的标题

var HomePage = require('./home.page');
module.exports = Object.create(HomePage, {
    headerModule: {get: function () {return browser.element('.header');}
});

主页上还有页脚

var HomePage = require('./home.page');
module.exports = Object.create(HomePage, {
    footerModule: {get: function () {return browser.element('.footer');}
});

在这两个模块中，我有相同的按钮，并且我只想为两种情况下使用的按钮创建一个页面对象。我应该使用哪个页面来继承？我不知道如何通过参数传递父页面对象。

Answer 1

我不确定我是否有足够的信息来理解您想要做什么，但我认为您可能对页面对象的工作原理感到困惑。从您给出的示例中，您想要获取主页的页眉和页脚。在页面对象模型中，您将创建一个主页类(页面对象)，并在该类中声明两种方法，一种用于获取页眉，一种用于获取页脚。两种方法都是同一页面对象的一部分。

在脚本中，您将实例化主页类(页面对象)，然后调用方法来获取页脚和/或页眉。此时，无需传递上下文。获取页眉/页脚的所有代码都包含在主页类内的方法内。

我不知道 Protractor ，所以我不能给你写一些示例代码，但我确实发现这个页面看起来像是使用 Protractor 的页面对象的一个​​很好的介绍。我建议您阅读它，并可能使用“Protractor Selenium 页面对象”作为搜索词或类似的内容来搜索更多指南。有几个结果看起来可能不错。即使您在 Protractor 中找不到很多有关页面对象的文章，阅读其他语言的文章也将帮助您更好地理解这些概念，因此希望您可以用您选择的语言自己实现它们。

https://www.thoughtworks.com/insights/blog/using-page-objects-overcome-protractors-shortcomings