深入了解Cypress：端到端测试框架的优势、安装和使用指南，以及编写自定义测试案例

什么是cypress?

Cypress是一个用于编写端到端（end-to-end）测试的开源JavaScript测试框架。它专注于提供简单易用、可靠稳定的测试环境，用于测试Web应用程序。
Cypress通常用于执行自动化测试，以确保Web应用程序在不同浏览器和环境中的正常运行。

cypress的优点？

实时查看和调试： Cypress允许在测试运行时实时查看每个步骤的执行，提供直观的调试体验。开发人员可以轻松地定位和解决问题，从而加快开发和调试过程。
简单易用的API： Cypress提供了简单而强大的API，使得编写测试变得直观和容易。测试脚本更加清晰易读，降低了学习曲线。
自动等待机制： Cypress具有自动等待机制，无需手动添加等待时间。它能够智能等待页面元素的可见性和可交互性，提高测试的稳定性和可靠性。
实时重新加载： Cypress支持实时重新加载，当测试脚本发生变化时，它会自动重新加载，提高了开发人员的工作效率。
跨浏览器支持： Cypress可以在多个浏览器中运行测试，包括Chrome、Firefox、Edge等。这确保了应用在不同浏览器中的一致性和稳定性。
强大的断言库： Cypress集成了Chai断言库，使得编写断言更加容易和清晰。开发人员可以使用丰富的断言来验证应用程序的行为。
自动截图和视频记录： Cypress可以自动截图和记录测试执行的视频，有助于审查测试结果和问题排查。
支持现代Web应用： Cypress特别适用于测试现代、交互性强的Web应用程序，包括单页面应用（SPA）和动态内容。
持续集成和自动化部署： Cypress易于集成到持续集成（CI）工具中，支持自动化部署，帮助确保每次代码变更都经过全面的端到端测试。
活跃的社区和生态系统： Cypress拥有活跃的社区，提供丰富的文档、示例和插件，使开发人员能够更好地利用这个工具。

如何安装cypress

创建目录cypress-demo-1, 先安装然后运行yarn add --dev cypress

如何使用cypress

命令行输入 ./node_modules/.bin/cypress open，选择e2e-test，之后会自动创建配置文件和demo文件

第二种方式run+文件路径，命令行输入./node_modules/.bin/cypress run --spec cypress/e2e/2-advanced-examples/actions.cy.js，可以在命令行中执行测试

如果在命令后面加上--headed就可以在浏览器后面查看
第三种方式,使用webstorm，先安装插件，然后配置，然后运行run

写自己的测试文件

新建integration/demo.spec.js

js 复制代码

describe('baidu', ()=>{
  it('能搜索饥人谷', ()=>{
    cy.visit('https://www.baidu.com')
    cy.get('input#kw').type('饥人谷')
    cy.contains('百度一下').click()
    cy.contains('饥人谷官网').should('exist')
    cy.contains('jirengu.com').should('exist')
  })
})

能显示测试案例正确的结果

这里要注意有个配置，cypress.config.js配置了specPattern才能找到对应的文件

javascript 复制代码

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    specPattern: "**/*.spec.js",
  },
});