JavaScript 类：在构造函数和 get 方法中存储变量

Question

所以我正在使用页面对象模型模式和 Cypress（用 JavaScript 编写）开发自动化框架。

对于页面的某些部分，我正在制作页面组件（本质上是较小的页面对象）。为了减少维护，我想为 Web 元素存储 "locators" 以便于访问（以防它们发生变化）。

我将在 class 中进一步提到这些定位器的更大方法（组合多个元素并用它们做事）。但是我不确定存储它们的最佳方式。

我想到了两个选择（我不是 JavaScript 方面的专家，所以可能有更好的方法。总之有..

选项 1：（将它们存储在像这样的简单 GET 方法中）：

saveButton() {
    return cy.contains('Save')
}

nameField() {
    return cy.get('.form-control[name="name"]')
}

descriptionField() {
    return cy.get('.form-control[name="description"]')
}

然后，当我需要访问定位器时，我只需在 class 更大的方法中进一步调用 nameField().type() 或 saveButton().click() （尽管我想我需要在前面加上 this 在他们之前。

使用构造函数的另一个选项是这样的：

选项2：（使用构造函数）

class WidgetForm extends PageObject {
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
//...more code further down that uses these values

然后我可以用类似的方式引用它们，例如 cy.get(this.nameField).type() 尽管我想我也可以将整个 Cypress 命令函数存储在构造函数值中，例如：

this.nameField = cy.get('.form-control[name="name"]')（至少我假设）。

两者有什么特别的优势吗？我希望 JavaScript 允许像其他语言一样在 classes 中存储常量私有值（我知道它会出现在 ES7 中，但我想坚持现在有效的方法）。

显然欢迎任何其他建议。出于某种原因 Option 1 对我来说看起来更好。但是我不确定是不是slower/uglier定义了那么多函数。

Answer 1

选项 1 对我来说不错，组织更直观，我认为最终结果看起来更好。

Class WidgetForm {

    nameField() {
        return cy.get('.form-control[name="name"]')
    }

}

那么在你的测试中：

beforeEach(function () {
  WidgetForm.nameField().type({"Smith"})
})

不确定你的第二个建议是不是这个意思，但你可以使用 getter:

Class WidgetForm extends PageObject{
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
    get nameField() {
        return cy.get(this.nameField)
    }
}

JavaScript 类：在构造函数和 get 方法中存储变量

JavaScript Classes: storing variables in constructor vs get methods

javascript

pageobjects