如何在多个规范/测试文件中使用可重用函数来组织/结构化Cypress测试

Question

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

我在测试组织方面遇到了困难。我来自Selenium世界，以前我使用POM方法。目前，我有一个名为[Component].test.ts的规范文件（我们不使用“spec”，因为我们注意到它通常是保留给单元测试的）。

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

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

1. 我可以将所有这些测试都写在同一个测试文件中作为功能测试。我不喜欢这种方法，因为它很混乱，如果我只想运行可访问性测试或视觉测试，则无法使用“-spec”将它们分离出来仅运行它们。
2. 我想为视觉和可访问性测试创建单独的测试文件，并将它们放入不同的文件夹中，因此最终我会有以下文件夹：集成，可访问性，视觉。我还需要在测试文件名后附加一些内容以了解它们的类型。我的主要问题是如何在所有这些文件中重用功能和命令？我的三个组件测试文件将需要使用相同的常量、函数等。

我认为Typescript不支持分层继承，我一直听说不应该使用POM。我还注意到可以将它们编写在功能测试文件中，并将其导出并在其他两个文件中导入，但不确定这是否是正确的方法。正如您所看到的，我是新手。

请给出建议。

- onimougwo

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', () => {
  ...
});

对于不是自定义命令的可重用函数，您可以将它们放在一个名为util或helper的文件中。

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

export const assetUtils = {
  isAsset,
};

- Audwin Oyong

---

谢谢你的回答，这是一个很好的组织方式。 - onimougwo

Answer 2

你可能可以使用Cypress自定义命令来解决第二个问题。 https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax

我们使用它们来处理测试套件中广泛使用的命令。TypeScript提供了一种良好的方式，可以为每个命令添加带有示例的文档。

- cdcastillo

---

谢谢您的回复。是的，我们已经使用自定义命令，但正如您所提到的，我们将它们用于所有组件中使用的事物。 在这种情况下，我正在寻找一种方法来集中一些仅由某些组件使用而不是全部使用的函数。目前，我创建了一个带有这些函数的助手文件，并将其导出。我的测试文件导入这些函数。 不确定是否有更好的方法。针对您的观点，我确实想知道是否应该即使在这种情况下也使用自定义命令并创建多个命令文件。我的担心是命令文件会变得非常庞大。 - onimougwo

这是Cypress警告的一件事情。他们建议将函数尽可能靠近测试，如果不是在测试文件本身内部。以避免拥挤的命令文件。 - cdcastillo

@onimougwo 我认为将适用于某些组件但不适用于其他组件的命令放入命令文件中并没有功能上的缺陷，但为了更好的组织，您可以考虑将命令分解为单独的文件，然后将它们导入到commands/index.js中。对于我们不作为命令使用的“实用”函数，我们还创建了“助手”文件。我们创建了一个名为util/的目录，其中包含一个index.js文件，该文件导入了我们所有的helper文件。 - majorobot

谢谢@majorobot，这就是我最终做的！ - onimougwo