【原】如何使用TypeScript用賽普拉斯編寫完全類型的安全E2E測試

碼農(nóng)9527 2021-05-10

展開全文

自動化的端到端Web應用程序測試是開發(fā)生產(chǎn)應用程序的支柱之一,。有各種測試框架可以提高質(zhì)量檢查的效率。最近,，我有機會在新開發(fā)的產(chǎn)品上試用賽普拉斯框架,。賽普拉斯是一個運行在瀏覽器中的JS測試框架,，因此可以很好地模擬真實客戶端的行為?？梢酝瑫r編寫GUI和API測試,，并且它提供了許多有趣的功能。

作為一個全棧開發(fā)人員,，我習慣于從后端語言進行類型安全的代碼,，因此我將TypeScript類型擴展用于前端開發(fā)。我還認為有必要為E2E測試提供類型安全代碼,。在賽普拉斯官方網(wǎng)站上,，有指向可能的TypeScript設置的鏈接,，但是在我撰寫本文時,，這些教程還沒有完全起作用。他們不允許在測試本身的源映射中進行調(diào)試,。

本文介紹如何創(chuàng)建一個測試項目,，該項目允許您在TypeScript源文件中進行編寫和完全調(diào)試。

建立專案

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

npm init1復制代碼類型：[html]

現(xiàn)在安裝：

1,、cypress-測試框架

2、typescript-TypeScript編譯器

3,、ts-loader-TypeScript源代碼的加載器

4,、webpack-構(gòu)建工具

5、@cypress/webpack-preprocessor-使用webpack預處理插件文件

npm i cypress typescript ts-loader webpack @cypress/webpack-preprocessor --save1復制代碼類型：[html]

這些都是所需的軟件包,。

配置TypeScript

要配置打字稿,，請在項目的根目錄中創(chuàng)建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

用于測試項目的構(gòu)建工具是webpack,。要配置它,，請創(chuàng)建包含以下內(nèi)容的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文件的調(diào)試,。

將賽普拉斯支持文件轉(zhuǎn)換為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]

現(xiàn)在將support/index.js重命名為cypress/support/index.ts,，并確保其中包含以下內(nèi)容：

import "./commands";1復制代碼類型：[html]

柏

最后,，將cypress.json中的主要cypress配置更改為使用TypeScript規(guī)范和支持文件：

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

測驗

現(xiàn)在，您可以在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]

現(xiàn)在，您可以像往常一樣運行cypress測試：

npx cypress open1復制代碼類型：[html]

您可以看到測試列表中有test.spec.ts,。

web

如果現(xiàn)在使用開放的開發(fā)人員工具運行測試,，則調(diào)試器將在此debugger行停止。這對于停止執(zhí)行是必要的。之后,，調(diào)試器還將在您的斷點處停止,。請注意，調(diào)試直接在test.spec.ts中進行,，因此直接在原始TypeScript代碼中進行,。您也可以調(diào)試命令。

web