如何在页面对象模型中对页面进行编码以便更轻松地调试 Protractor 测试？

Question

前言

我想使用页面对象模型为端到端测试准备易于维护和调试的代码。

我做什么

当我通过执行以下步骤开始准备 Protractor end 2 end tests, I try to prepare code in Page Object Model 时：

打开我要在网络浏览器中测试的页面，
打开 developer tools (F12),
使用inspect工具熟悉DOM的页面，查看我想用于页面对象模型的元素的 ID、类名称和 CSS 选择器，
以元素依赖于以前定义的。特别是，我尝试将我的代码分成不同的类.

让我提供第 4 点中提到的此类代码的简化示例：

class genericPageWithTable {

    get Frame1() {
        return element(by.id('someId'));
        }

    get Table1() {
        return this.Frame1.element(by.tagName('table'));
        }
}

class specificTable extends genericPageWithTable {

    get specificElement {
        return this.Table1.element(by.className('specificElement'));
        }
}

并且我使用以下示例断言编写了简单测试：

expect(specificElement.getText()).toBe('someString');

这就是我的挫败感开始的地方...

测试失败，因为 undefined 没有 getText()...

问题

我不知道哪个元素未定义，我的哪个方法没有返回任何元素。我不知道我是否可以相信我的任何方法。

所以我运行 protractor --elementExplorer 并尝试验证我是否正确编写了每个定位器... 在 elementExplorer 中它有效，所以我开始添加 browser.wait(EC.visibilityOf(...)) 条件...但现在错误消息向我提供了未定义不包含 'isPresent' 方法的信息。所以我开始加上async和await，但是很多时候还是很难找到undefined返回的地方...

添加断点并尝试调试在很多情况下也让我感到困惑，因为流程在某种程度上是出乎意料的。

问题

你能告诉我吗：

我应该如何为页面对象模型准备代码，以便更容易维护和调试，从而确定我的方法确实 returns 东西？有没有比在浏览器中使用开发人员工具并根据我在 HTML 中看到的内容进行编码更好的方法？
确保我的页面对象模型代码正确的更好方法是什么？显然我可以尝试为每个 method/property 编写测试，但我不想混淆那些将阅读测试输出（并从业务角度期望结果）的人？

Answer 1

在项目中使用开发者工具或实际 HTML 是很好的方法。
如果您要为每个页面上的 get/perform 所有内容编写方法，您将花费很多时间。我的做法是在编写测试时创建方法。

如何在页面对象模型中对页面进行编码以便更轻松地调试 Protractor 测试？

How to code page in Page Object Model for easier debugging of Protractor tests?

typescript

debugging

protractor

pageobjects