如何使用TypeScript用赛普拉斯编写完全类型的安全E2E测试

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

作为一个全栈开发人员，我习惯于从后端语言进行类型安全的代码，因此我将TypeScript类型扩展用于前端开发。我还认为有必要为E2E测试提供类型安全代码。在赛普拉斯官方网站上，有指向可能的TypeScript设置的链接，但是在我撰写本文时，这些教程还没有完全起作用。他们不允许在测试本身的源映射中进行调试。

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

建立专案

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

npm init1复制代码类型：[html]

现在安装：

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 --save1复制代码类型：[html]

这些都是所需的软件包。

配置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"]
}1234567891011121314151617181920212223242526272829复制代码类型：[html]

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

配置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"
};12345678910111213141516171819复制代码类型：[html]

配置赛普拉斯

用于Webpack预处理的赛普拉斯插件

要使用@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);
  };
}123456789101112131415161718复制代码类型：[html]

这是最重要的部分，因为这使您可以编译并获取源映射以进行cypress命令和spec文件的调试。

将赛普拉斯支持文件转换为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");
  }
);123456789101112复制代码类型：[html]

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

import "./commands";1复制代码类型：[html]

柏

最后，将cypress.json中的主要cypress配置更改为使用TypeScript规范和支持文件：

{
  "testFiles": "**/*.spec.ts",
  "pluginsFile": "cypress/plugins/index.js",
  "supportFile": "cypress/support/index.ts"
}12345复制代码类型：[html]

测验

现在，您可以在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();
  });
});123456789101112复制代码类型：[html]

现在，您可以像往常一样运行cypress测试：

npx cypress open1复制代码类型：[html]

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

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

结论

赛普拉斯是一个很好的测试工具，我相信本文已帮助您提高了它的使用率。

赞 (0)

相关推荐