如何 organize/structure 赛普拉斯测试跨多个 spec/test 文件的可重用函数

Question

我们刚刚开始使用 Cypress 在 Storybook 中测试我们的组件库。我们用 Typescript 编写 integration/functional 测试。单元测试在别处编写。

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

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

我们很快要为这些组件添加辅助功能测试和视觉测试。因此，我有几个问题。

我可以在与功能测试相同的测试文件中编写所有这些测试。我不喜欢这种方法，因为它很乱，如果我只想运行可访问性测试或视觉测试，那么我不能用 “–spec“ 将它们隔离到运行他们
我想为视觉和可访问性测试创建单独的测试文件，我会把它们放在不同的文件夹中，所以最后我会有以下文件夹：集成、可访问性、视觉我还需要在测试文件名中附加一些内容以了解它是什么类型的测试。我的主要问题是如何重用所有这些文件中的函数和命令？我的 3 个组件测试文件将需要使用相同的常量、函数等...

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

有什么建议吗？

Answer 1

赛普拉斯自定义命令可能会解决您的第二点。 https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax

我们将它们用于在整个测试套件中使用的命令。 TypeScript 还提供了一种很好的方法来为每个命令添加带有示例的文档。

Answer 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,
};

如何 organize/structure 赛普拉斯测试跨多个 spec/test 文件的可重用函数

How to organize/structure Cypress tests with reusable functions across multiple spec/test files

automation

components

automated-tests

typescript

cypress