1. 简介

官网地址： www.cypress.io/
特点总结：
1 cypress 能够做E2E、单元测试的一个框架
2 他内嵌Jquery 、版本 4.1+ 支持TS，周边生态出成熟，曲线不是那么高
3 他与 Puppeteer 都是起一个本地浏览器来测试，但是 Puppeteer 范围更广只是他的功能可以支持 E2e，而cypress是专攻这个的 4 支持 web 端其他端不支持

2. 安装需要注意

他会下载一个压缩包，这个包下载起来很慢，你可以
docs.cypress.io/guides/gett…

直接下载下来放到根目录下，然后设置环境变量，跳过安装即可。

CYPRESS_INSTALL_BINARY=0 npm install

yarn 下载的时候加个环境变量，安装版本会随着压缩包走

CYPRESS_INSTALL_BINARY "https://npm.taobao.org/mirrors/cypress/5.1.0/mac/cypress.zip"

3. 尝试

3.1 integration 目录下新建一个 learn 目录存储相关测试代码

图片.png
3.2 测试代码如下

/// <reference types="cypress" />

context("Window", () => {
  beforeEach(() => {
    cy.visit("https://juejin.cn");  // 先打开页面
  });
  it("load juejin", () => {
    cy.title().should('include', '掘金') // 检查document.title
  });
  it("点击沸点", () => {
    cy.wait(2000) // 等 2000 ms
    cy.get(`a[href='/pins']`).click() // 点击沸点按钮
  });
  it("换个路由", () => {
    cy.wait(2000)
    cy.server()
    cy.visit('https://juejin.cn/topics') // 切换路由
  });
});

3.3 设置 cy:open 命令启动

"scripts": {
    "cy:open": "cypress open"
  }

3.4 完成
图片.png

E2E工具 cypress

1. 简介

2. 安装需要注意

3. 尝试