时间戳

首页 > 解决方案 > JavaScript 类：在构造函数与 get 方法中存储变量

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

问题描述

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

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

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

想到了两个选项（我不是 JavaScript 专家，所以可能有更好的方法。无论如何有..

选项 1：（将它们存储在简单的 GET 方法中，如下所示）：

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

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

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

然后，当我需要访问定位器时，我只需在类更大的方法中调用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()虽然我想我也可以将整个赛普拉斯命令函数存储在构造函数值中，例如：

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

两者都有什么特别的优势吗？我希望 JavaScript 允许将常量私有值存储在类似于其他语言的类中（我知道它会出现在 ES7 中，但我想坚持现在的工作方式）。

显然，欢迎任何其他建议。出于某种原因Option 1，我看起来更好。但我不确定定义这么多功能是否更慢/更丑。

标签： javascriptpageobjects

解决方案

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

Class WidgetForm {

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

}

然后在你的测试中：

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

不确定您的第二个建议是否是这个意思，但您可以使用吸气剂：

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)
    }
}

推荐阅读