一、确保安装了node

  1. node –v
  2. npm -v

**

二、创建Cypress项目

1，初始化项目

  1. mkdir Crypress_project // 创建一个文件夹
  2. cd Crypress_project // 进入新创建的文件夹下面
  3. npm init -y // 初始化项目
  4. npm i cypress -S -D // 安装cypress
  5. code ./ // vscode打开该项目

2，修改项目配置

打开package.json文件，将里面的内容全部删除，复制上去以下代码：

  1. {
  2.       "scripts": {
  3.       "cypress": "cypress open"
  4.      }
  5. }

三、运行Cypress

1，打开Cypress的app

  1. npm run cypress
  2. // Cypress的app窗口正常打开不报错，即环境安装成功。
  3. // 项目目录下会多出两个文件：1，cypress.json文件；2，cypress文件夹
  4. // 其中Crypress_project/cypress/integration/examples中是Cypress提供的demo，点击即可运

2，点击app下面绿色按钮：OK，go it!
examples目录下是默认的测试文件demo，可点击测试看看

四、创建自己的测试文件

1，在Crypress_project/cypress/integration目录下创建自己的测试目录，如mytest
2，在mytest目录下创建baidu.spec.js，内容如下：

  1. /// <reference types="cypress" />
  3. context('Actions', () => {
  4.     beforeEach(() => {
  5.       cy.visit('https://www.baidu.com/') // 1，先进入百度页面
  6.     })
  7.     it('聚焦并输入内容', () => {
  8.         // 2，获取id为kw的元素并聚焦，后再输入文字“测试cypress”
  9.         cy.get('#kw').focus().invoke('val', "测试cypress")
  11.       })
  12. })

3，进入Cypress的app，找到自己的测试文件baidu.spec.js，打开，
就能看到app先打开了一个新的chrome浏览器，然后再打开了百度，最后输入了“测试cypress”文字