javascript - 常用函数抽象(结构正确)

我知道有 commands.js 可以添加我们经常使用的函数,但是如果我们在那个 js 文件中只有一堆函数,它不会变得混乱吗?

假设我有一个登录表单并创建帐户表单,我为他们两个创建页面对象以具有所有功能,并且两者都有电子邮件输入字段和密码输入字段,那么我显然不想在其中有两个功能两个类:

class CreateAccPage {
  private enterEmail = (email: string) => {
    return this;
  };

  private enterPassword = (password: string) => {
    return this;
  };
}

class LoginPage {
  private enterEmail = (email: string) => {
    return this;
  };

  private enterPassword = (password: string) => {
    return this;
  };
}

所以我担心的是在一个命令类中有很多功能,这在我看来并不好,所以我该怎么办?创建父 Form 类并在那里拥有这些函数然后继承它们或者有更好的方法。谢谢

回答1

您可以在几个独立的 JavaScript 文件之间拆分自定义命令,而无需类继承。只要记住在 Cypress 的 supportFile 中导入那些 JavaScript 文件。

回答2

Cypress https://docs.cypress.io/api/cypress-api/custom-commands#Syntax 明确指出 cypress/support/commands.js 文件中定义的常用功能可以源自其他东西(非常类似于 express.js 路由器)

Cypress.Commands.add(name, callbackFn) - cypress
app.get('/', callbackFn) - express.js

在这两种用例中,您都可以选择使用内联实现(如您所述 - 它很快就会变得非常混乱)或在其他地方定义您的函数,然后将它们用作委托。为了简化它 - 而不是这样做:

Cypress.Commands.add('visit page', (path) => cy.visit(path)

做这个:

/-- Http helpers file: --/

class Http {
  static visit(path) {
    cy.visit(path)
  }
}

/-- commands.js file: --/

Cypress.Commands.add('visit page', Http.visit) // delegation to your function

这样,您将能够在类中使用函数(或不使用任何适合您的函数)并根据时间正确维护您的代码

相似文章

javascript - 伊朗平均成绩 Regex

我需要一个regex来处理伊朗平均成绩,regex应该涵盖所有这些规则数字范围应在0到20之间。数字可以是十进制,但20除外。整数部分和小数部分应包含一或两个数字。如果您使用“。”你应该至少有一个十进...

r - Dates 在 R 中转换不正确

我写了这段代码:除了最后一行之外,此代码中的所有内容都运行良好。本质上,如果发票的date大于发票的date,那么我希望它找到两者之间最大的value并替换发票。代码运行但弄乱了我的date格式。在代...

随机推荐

最新文章