在开发生产级应用程序时，测试是不可或缺的一部分。有多种测试框架可以提高QA的效率。最近，有机会在新开发的产品上尝试Cypress框架。Cypress是一个JavaScript测试框架，它在浏览器中运行，因此能够非常好地模拟真实客户端的行为。可以用它编写GUI和API测试，并且它提供了许多有趣的特性。
作为一名全栈开发者，习惯于从后端语言中使用类型安全的代码，因此在前端开发中也使用TypeScript类型的扩展。也认为对于端到端测试来说，拥有类型安全的代码是必要的。在官方Cypress网站上，有链接到可能的TypeScript设置，但在写这篇文章的时候，这些教程并不完全可用。它们不允许在测试本身的源代码映射中进行调试。
本文描述了如何创建一个测试项目，允许在TypeScript源文件中编写和完全调试。
首先，使用命令初始化npm项目：
npm init
现在安装：
cypress -测试框架
typescript -TypeScript编译器
ts-loader -TypeScript源代码的加载器
webpack - 构建工具
@cypress/webpack-preprocessor - 使用webpack进行文件预处理的插件
npm i cypress typescript ts-loader webpack @cypress/webpack-preprocessor --save
这些是所需的所有包。
要配置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.config.js：
module.exports = {
resolve: {
extensions: [".js", ".ts", ".d.ts"]
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
options: { allowTsInNodeModules: true }
}
]
}
]
},
mode: "development"
};
配置Cypress
要使用@cypress-webpack-preprocessor，请将cypress/plugins/index.js更改为如下：
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文件。
将support/commands.js重命名为cypress/support/commands.ts，并添加以下自定义cy命令：
declare namespace Cypress {
interface Chainable {
customCommand(): Cypress.Chainable;
}
}
Cypress.Commands.add("customCommand", (): Cypress.Chainable => {
return cy.log("TEST LOG");
});
现在将support/index.js重命名为cypress/support/index.ts，并确保它包含以下内容：
import "./commands";
Cypress
最后，将主cypress配置在cypress.json中更改为使用TypeScript spec和support文件：
{
"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代码中。也可以调试命令。