通过简单的步骤学习 Cypress

通过以下简单步骤可快速学习并使用Cypress进行Web测试：

• 安装Node.js和npmCypress依赖Node.js环境，需先安装Node.js（包含npm包管理工具）。

  下载地址：

  Node.js官网

  安装后验证版本：node -v # 查看Node.js版本npm -v # 查看npm版本

• 创建项目文件夹新建一个空文件夹作为项目根目录，例如：mkdir cypress-demo && cd cypress-demo
• 初始化npm在项目目录中运行以下命令，生成package.json文件：npm init -y

• 通过npm安装Cypress以开发依赖形式安装Cypress：npm install cypress --save-dev

  安装完成后，package.json的devDependencies中会显示cypress版本。

• 首次打开Cypress运行以下命令启动Cypress Test Runner（交互式测试运行器）：npx cypress open

  首次运行时，Cypress会自动完成以下操作：

  创建cypress配置文件夹（包含示例测试文件）。

  生成cypress.config.js（或cypress.json，取决于版本）作为配置文件。

  打开图形化界面，显示测试用例列表。

• 通过Cypress界面生成测试文件在Cypress Test Runner中：

  点击“E2E Testing”（端到端测试）或“Component Testing”（组件测试）。

  选择浏览器（如Chrome或Electron）。

  点击“Create new spec”，输入文件名（如example.spec.js），Cypress会自动在cypress/e2e目录下创建文件。

• 手动创建测试文件也可直接在项目目录中创建文件：

  mkdir -p cypress/e2e # 确保目录存在touch cypress/e2e/example.spec.js

  文件内容示例（测试访问Google）：describe('Google搜索测试', () => { it('访问Google主页', () => { cy.visit('

  https://www.google.com'
  ); cy.contains('Google').should('be.visible'); });});

• 通过Cypress界面运行在Test Runner中选择测试文件，点击运行，实时查看测试过程。
• 通过命令行运行运行所有测试用例：npx cypress run运行指定文件：npx cypress run --spec "cypress/e2e/example.spec.js"

Cypress提供简洁的API，常用命令包括：

• cy.visit(url)：访问指定URL。
• cy.get(selector)：选择DOM元素。
• cy.contains(text)：查找包含文本的元素。
• cy.click()：点击元素。
• cy.type(text)：在输入框中输入文本。
• 断言：cy.get('#input').should('have.value', '预期值');

• 修改配置文件编辑cypress.config.js调整默认设置（如基础URL、超时时间等）。
• 安装插件通过npm安装插件（如cypress-file-upload）扩展功能：npm install cypress-file-upload --save-dev
• 编写自定义命令在cypress/support/commands.js中添加复用逻辑：Cypress.Commands.add('login', (username, password) => { cy.get('#username').type(username); cy.get('#password').type(password); cy.get('#submit').click();});

• 端口冲突：若默认端口（5555）被占用，可在配置中修改：module.exports = { e2e: { baseUrl: '
  http://localhost:3000'
  , viewportHeight: 1080, viewportWidth: 1920, },};
• 跨域问题：开发环境下可通过代理或配置cypress.config.js解决。

通过以上步骤，可快速完成Cypress的安装、配置及基础测试编写。建议从官方文档的