如何使用 TypeScript 使用 Cypress 编写完全类型安全的端到端测试

• 下载模板 - 57.7 KB

引言

自动化端到端 Web 应用程序测试是开发生产应用程序的基石之一。 有各种测试框架可以提高 QA 的效率。 最近，我有机会在一个新开发的产品上试用了 Cypress 框架。 Cypress 是一个在浏览器中运行的 JS 测试框架，因此可以很好地模拟真实客户端的行为。 可以使用它编写 GUI 和 API 测试，并且它提供了许多有趣的功能。

作为一名全栈开发人员，我习惯了来自后端语言的类型安全代码，所以我使用 TypeScript 类型扩展进行前端开发。 我还认为对 E2E 测试使用类型安全代码是必要的。 在 Cypress 官方网站上，有指向可能的 TypeScript 设置的链接，但在我撰写本文时，这些教程并未完全运行。 它们不允许在测试本身的源映射中进行调试。

本文介绍了如何创建一个测试项目，该项目允许您在 TypeScript 源代码文件中进行编写和完全调试。

创建项目

首先，使用命令初始化 npm 项目

npm init

现在安装

1. cypress - 测试框架
2. typescript - TypeScript 编译器
3. ts-loader - 用于 TypeScript 源代码的加载器
4. webpack - 构建工具
5. @cypress/webpack-preprocessor - 使用 webpack 进行插件文件预处理

npm i cypress typescript ts-loader webpack @cypress/webpack-preprocessor --save

这些是所需的所有软件包。

配置 TypeScript

要配置 typescript，请在项目根目录中创建 tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noEmitHelpers": true,
    "noImplicitAny": true,
    "strictPropertyInitialization": true,
    "preserveConstEnums": false,
    "target": "es5",
    "lib": [
      "es5",
      "dom",
      "es2015.core",
      "es2015.promise",
      "es2015.iterable",
      "es2015.collection"
    ],
    "types": ["cypress"],
    "sourceMap": true,
    "reactNamespace": "b",
    "removeComments": false,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true
  },
  "include": ["**/*.ts"]
}

此示例包含对类型安全性的最严格限制。

配置 webpack

您的测试项目的构建工具是 webpack。 要配置它，请创建包含 webpack.config.js

module.exports = {
  resolve: {
    extensions: [".js", ".ts", ".d.ts"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: "ts-loader",
            options: { allowTsInNodeModules: true }
          }
        ]
      }
    ]
  },
  mode: "development"
};

配置 Cypress

用于 Webpack 预处理的 Cypress 插件

要使用 @cypress-webpack-preprocessor，请将 cypress/plugins/index.js 更改为如下所示

// plugins file
const webpack = require("@cypress/webpack-preprocessor");

module.exports = (on, config) => {
  const options = {
    webpackOptions: require("../../webpack.config"),
    watchOptions: {}
  };
  on("file:preprocessor", getWepPackWithFileChange(options));
};

function getWepPackWithFileChange(options) {
  const webPackPreProcessor = webpack(options);
  return function(file) {
    file.outputPath = file.outputPath.replace(".ts", ".js");
    return webPackPreProcessor(file);
  };
}

这是最重要的一部分，因为这允许您编译并获取调试 Cypress 命令和 spec 文件的源映射。

将 Cypress 支持文件转换为 TS

将 support/commands.js 重命名为 cypress/support/commands.ts 并添加以下自定义 cy 命令

declare namespace Cypress {
  interface Chainable<Subject> {
    customCommand(): Cypress.Chainable<null>;
  }
}

Cypress.Commands.add(
  "customCommand",
  (): Cypress.Chainable<null> => {
    return cy.log("TEST LOG");
  }
);

现在将 support/index.js 重命名为 cypress/support/index.ts，并确保它包含以下内容

import "./commands";

Cypress

最后，将 cypress.json 中的主 Cypress 配置更改为使用 TypeScript spec 和支持文件

{
  "testFiles": "**/*.spec.ts",
  "pluginsFile": "cypress/plugins/index.js",
  "supportFile": "cypress/support/index.ts"
}

测试

现在，您可以在 cypress/integration 文件夹中定义一个简单的测试，例如 cypress/integration/examples/test.spec.ts 包含

describe("Example", () => {
  it("test", () => {
    const testString = "test-string";

    debugger; // Just to break running tests for debugging - this should be removed 
              // in final code

    cy.wrap(testString)
      .should("exist", testString)
      .customCommand();
  });
});

现在您可以像往常一样运行 Cypress 测试

npx cypress open

您可以在测试列表中看到 test.spec.ts。

如果您现在使用打开的开发人员工具运行测试，调试器将在 debugger 行处停止。 这是停止执行所必需的。 之后，调试器也会在您的断点处停止。 请注意，调试直接在 test.spec.ts 中进行，即在原始 TypeScript 代码中。 您也可以调试命令。

结论

Cypress 是一个很棒的测试工具，我相信本文可以帮助您改进其使用。

历史

• 2020 年 1 月 16 日：初始版本