如何跨多个规范/测试文件使用可重用功能来组织/构建赛普拉斯测试

Question

我们刚刚开始使用 Cypress 来测试 Storybook 中的组件库。我们用 Typescript 编写集成/功能测试。单元测试在其他地方编写。

\n

我正在努力组织测试，我来自 Selenium 世界，在那里我曾经使用 POM 方法。目前，我有一个名为 [Componenent].test.ts 的规范文件（我们不使用规范，因为我们注意到它通常保留用于单元测试）。

\n

目前，每个测试文件都包含一堆在顶部声明的测试使用的函数和常量。如果我们以aGrid为例，这些函数主要是检索行、工具提示、编辑单元格等，以便我们集中选择器并且不重复代码。

\n

很快我们希望为这些组件添加可访问性测试和视觉测试。因此，我有几个问题。

\n

\n

1. 我可以将所有这些测试编写在与功能测试相同的测试文件中。我不喜欢这种方法，因为它\xe2\x80\x99很混乱，如果我只想运行可访问性测试或可视化测试，那么我可以\xe2\x80\x99t将它们隔离以仅运行\xe2\x80\x9c\xe2\x80\x93spec\xe2\x80\x9c它们

   \n
\n

2. 我想为视觉和可访问性测试创建单独的测试文件，并将其放入不同的文件夹中，因此最终我将拥有以下文件夹：集成、可访问性、视觉\n我还需要在测试文件名中附加一些内容知道它是什么类型的测试。我的主要问题是如何重用所有这些文件中的函数和命令？我的 3 个组件测试文件需要使用相同的常量、函数等......

   \n
\n

\n

我不\xe2\x80\x99t 认为 Typescript 支持分层继承，而且我一直听说我不应该使用 POM。我还注意到我可以将它们写入功能测试文件中，然后将它们导出并导入到其他两个文件中，但不确定它\xe2\x80\x99 是否是正确的方法。如你所见，我\xe2\x80\x99m对此很陌生。

\n

请提出建议？

\n

Answer 1

为了更好的组织，我们可以：

1. 将自定义命令放入每个单独的命令文件中（例如，基于功能）。
2. 在声明index.d.ts文件中，我们可以将常规interface与扩展其他interface（更具体）分开。例如：

// index.d.ts
interface AuthenticationChainable {
  login(): Cypress.Chainable<JQuery<HTMLElement>>;
  logout(): void;
}

interface InputChainable {
  input(): Cypress.Chainable<JQuery<HTMLElement>>;
  toggle(): Cypress.Chainable<JQuery<HTMLElement>>;
}

declare global {
  namespace Cypress {
    interface Chainable extends AuthenticationChainable, InputChainable {
      // general commands
      navigateTo(): Cypress.Chainable<JQuery<HTMLElement>>;
      ...
    }
  }
}

// commands.ts
Cypress.Commands.add('navigateTo', () => {
  ...
});

// authentication-commands.ts
Cypress.Commands.add('login', () => {
  ...
});

// input-commands.ts
Cypress.Commands.add('input', () => {
  ...
});

3. 对于非自定义命令的可重用函数，您可以将它们放在util或helper文件下。

const isAsset = (asset: Asset): boolean => {
  ...
};

export const assetUtils = {
  isAsset,
};