本文解释了使用Typescript从头开始创建或设置cypress.io端到端测试框架。与其他教程不同的是，本文以简单易行的方式解释了使用Typescript设置Cypress框架的情况。这篇文章对那些想第一次设置Cypress Typescript自动化框架的人来说是有帮助的。另外，我知道有很多人从不同的自动化框架（如Protractor、webdriver.io等）迁移过来，这对他们也会有帮助。

本教程也展示了页面对象模型的创建，但是你可以跳过这些步骤，将其用于任何类型的框架。

2.**安装Visual Studio Code。**如果你的电脑上没有Visual Studio Code，请导航到 code.visualstudio.com/download 下载并安装。

第一步是在你的电脑上创建一个新的文件夹，放在所需的位置。下面是我创建的 **CypressTypescript** 作为项目文件夹。

第二步：在Visual Studio Code中打开项目文件夹 CypressTypescript

i.打开， Visual Studio Code ，点击 文件 *>* 打开文件夹

ii.选择。 CypressTypescript **文件夹 ，并点击 选择文件夹 在底部

第3步：创建 pacakge.json 文件

打开终端，在Visual Studio Code中点击 终端菜单 >选择 新终端。

注意。** 确保在工作目录中打开的 新终端 为 ***CypressTypescript*** .

i. 新终端 窗口出现在 Visual Studio Code 的底部，在新的终端上输入以下命令

npm init
ii.它将问你一组问题，如果你愿意，你可以输入所需的文本，否则逐一点击**[Enter****]**键，直到你得到消息 这样做可以吗？，然后再次点击回车键，它将创建 **package.json**为你。

第4步：安装Cypress
在Visual Studio Code终端，你需要输入以下命令。
npm install cypress --save-dev
上述命令可能需要一些时间，所以请等待，直到它完成。
第5步：打开Cypress
当你第一次输入cypress open命令时，它将为你创建一个默认的设置，其中也包括cypress、integration、fixtures等目录。为了打开cypress，在你的Visual Studio Code 终端窗口中输入以下命令**。**
npx cypress open
执行上述命令后，它将为你创建一个默认的Cypress框架，同时打开Cypress窗口。在这一点上，只要关闭Cypress窗口即可。
在这一点上，你的 **CypressTypescript**文件夹应该如下图所示。
***注意。***可以选择，如果你愿意，你可以使用cypress窗口玩一个内置的例子。
第6步：使用下面的命令在终端键入安装Typescript
在Visual Studio Code终端键入以下命令。
npm i typescript
第7步：创建Typescript配置文件(tsconfig.json)
在Visual Studio Code终端键入下面的命令来创建 **tsconfig.json**文件。
npx tsc --init
上面的命令将创建 默认的**tsconfig.json**文件，现在就让它这样吧，我们将在本教程的后面阶段配置它。
第8步：创建 **src**集成文件夹内的文件夹
注意。****集成文件夹已经由Cypress**创建，你不必创建自己的文件夹。
在你的 CypressTypescript> 双击cypress文件夹 > 打开集成文件夹
默认的 **integration** 文件夹看起来像下面这样。
现在，创建一个文件夹，名为 **src**的文件夹。 **integration**文件夹（只是再次提醒整合文件夹位于 **cypress**文件夹内
你可以选择删除**该文件夹***examples***文件夹，除非你想保留它作为一个参考。
注意。*

1.example 文件夹包含示例测试，只是为了玩玩一些测试案例，在你安装 cypress 包时由 cypress 提供。

2.你的测试应该总是在integration 文件夹内。然而，你可以创建子文件夹来安排你的规格，但它们应该在集成文件夹内。

完成上述步骤后，我们需要在文件夹中创建两个文件夹 **src**即 **page-objects**和 **specs**
CypressTypescript
-cypress
--integration
---src
----page-objects
----specs
为了避免任何混淆。我在下面一步一步地解释。
第9步：创建 **page-objects**文件夹
打开 **src**文件夹。
注意：src 文件夹位于CypressTypescript/cypress/integration内。
在该文件夹内再创建一个文件夹，命名为 **src**文件夹，将其命名为 **page-objects**你所有的页面对象文件都应该放在这里**。**
第十步。创建 **specs** 文件夹
创建 **specs**文件夹内的 **src**文件夹，你所有的规格文件都应该放在这里。
***请注意。***为页面对象和规格创建一个单独的文件夹有助于方便维护和管理自动化测试。这只是一个建议，不是强制性的。
完成上述步骤后，你的项目应该如下图所示。
第11步：在文件夹内创建第一个页面-对象文件 **page-objects**文件夹
使用Visual Studio代码，创建一个名为 **google-search.page.ts**.这个文件应该被创建在 **page-objects**文件夹中创建。复制并粘贴以下代码到 **google-search.page.ts**文件。
//Inside your google-search.page.ts file. This is pageobject file.
/// <reference types="cypress" />
export class GoogleSearch{
   googleSearch(){
   return cy.get('input[name="q"]').first();
   googleSearchBtn(){
    return cy.get('input[name="btnK"]').first();
    searchResults(){
        return cy.get('h3').first();
第12步：在文件夹内创建第一个规格 **Specs**文件夹
使用Visual Studio代码，创建一个名为 **google-search.spec.ts**.这个文件应该创建在 **spec**文件夹中创建，复制并粘贴以下代码到文件中：google-search.spec.ts 。
//This is spec file, inside your google-search.spec.ts
import {GoogleSearch} from "../page-objects/google-search.page";
const search = new GoogleSearch();
describe('Google Navigation', () => {
    it('Google Search', () => {
    cy.visit('https://www.google.com')
    search.googleSearch().type("Something");
    search.googleSearchBtn().click();
    search.searchResults().should('be.visible');
在这一点上，你的框架应该如下图所示。
第13步：配置tsconfig.json 文件
所以，你已经完成了，页面-对象文件，规格文件。如果你看到你创建的这些文件有一个 **.ts**扩展名，这意味着我们在这个项目中使用了typescript。为了使Cypress能够理解typescript，我们需要配置tsconfig.json 文件。tsconfig.json 文件将位于项目文件夹的根部，即文件夹中的CypressTypescript
i.在第7步中，你已经创建了tsconfig.json 文件。

ii.导航到tsconfig.json 文件

iii.删除里面的所有默认设置。(使其为空)

复制并粘贴以下代码
   "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  "include": ["**/*.ts"]
第14步：执行你的第一个测试
在VisualStudio代码终端，确保终端目前的工作目录是CypressTypescript。 输入以下命令
npx cypress open
等待Cypress窗口打开。下面的窗口出现。
现在，点击 **google.search.spec.ts**文件，在上面的窗口中。
你的测试开始在浏览器中运行。
一旦完成，你会看到结果。
如何使用命令行界面Cypress CLI执行Cypress测试？
要使用命令行执行Cypress测试。导航到 **CypressTypescript**文件夹，使用命令行输入以下命令。
npx cypress run --spec="./cypress/integration/src/specs/google-search.spec.ts"
默认情况下，Cypress不支持XPath作为选择器，如果你需要XPath支持，请安装cypress-xpathnpm包。
npm i cypress-xpath
为了获得对typescript的支持，使用行 **/// <reference types=”cypress-xpath” />**在你的规格文件中。下面是这个例子。
/// <reference types="cypress-xpath" />
如果你正在寻找任何帮助、支持、指导，请联系我LinkedIn|https://www.linkedin.com/in/ganeshsirsi/.