比Selenium好用！用这款工具来做UI自动化测试效率翻倍！

npm install cypress --save-dev

|-- cypress.config.js    // 配置文件|-- cypress    -- fixtures     // 用于存放自定义的json文件    -- e2e  // 测试代码    -- plugins       // 自定义指令时，与support文件夹组合使用        -- index.js    -- support        -- commands.js        -- index.js

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

npm run cypress:open

describe('example to-do app', () => {  beforeEach(() => {    cy.visit('https://example.cypress.io/todo')  })
  it('displays two todo items by default', () => {    cy.get('.todo-list li').should('have.length', 2)    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')  })
  it('can add new todo items', () => {    const newItem = 'Feed the cat'    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)    cy.get('.todo-list li')      .should('have.length', 3)      .last()      .should('have.text', newItem)  })})

describe('Cypress 常用API 示例', () => {        // 访问页面      it('访问 Cypress 官网', () => {          cy.visit('https://www.cypress.io')          cy.title().should('include', 'Cypress') // 断言页面标题包含 "Cypress"      })        // 元素查找与交互      it('在 Cypress 官网中查找并点击 "Features" 链接', () => {          cy.visit('https://www.cypress.io')          cy.contains('a', 'Features').click() // 查找包含 "Features" 的链接并点击          cy.url().should('include', '/features') // 断言URL中包含 "/features"      })        // 表单操作      it('在表单中填写并提交数据', () => {          cy.visit('https://example.cypress.io/commands/actions') // 假设这是一个包含表单的测试页面          cy.get('#email').type('test@example.com') // 在邮箱输入框中输入文本          cy.get('#submit').click() // 点击提交按钮          cy.url().should('not.include', '/commands/actions') // 断言提交后URL发生变化      })        // 断言      it('断言页面元素的存在与文本内容', () => {          cy.visit('https://www.cypress.io')          cy.get('h1').should('exist') // 断言页面中的h1标签存在          cy.get('h1').should('contain', 'Fast, Easy and Reliable Testing for Anything that Runs in a Browser') // 断言h1标签包含特定文本      })        // 循环与条件      it('遍历页面上的多个元素', () => {          cy.visit('https://example.cypress.io/commands/iterations-and-aliases') // 假设页面上有多个可迭代元素          cy.get('.item').each(($el, index, $list) => {              // 对每个元素执行操作，例如打印其文本              cy.wrap($el).invoke('text').then(text => {                  console.log(`Item ${index + 1}: ${text}`)              })          })      })        // 等待与重试      it('等待元素加载完成', () => {          cy.visit('https://example.cypress.io/commands/waiting')          cy.get('.slow-loading-element', { timeout: 10000 }).should('be.visible') // 等待元素在10秒内变得可见      })        // 网络请求拦截      it('拦截并验证网络请求', () => {          cy.server() // 开启cy.route()和cy.stub()的拦截功能          cy.route('GET', '/some/api/endpoint').as('getApi') // 拦截GET请求并命名为'getApi'          cy.visit('https://example.cypress.io/commands/network-requests')          cy.wait('@getApi').then((xhr) => { // 等待名为'getApi'的请求完成              expect(xhr.status).to.eq(200) // 断言HTTP状态码为200          })      })  })