如何使用Cypress对React应用进行端到端测试

如何使用Cypress进行端到端测试您的React应用程序

React是一个流行的用于构建Web应用程序的框架。由于其声明式的用户界面设计和基于组件的架构，它是前端工程的最佳选择之一。

然而，在不同的场景中确保React应用程序按预期工作可能有些困难。

Cypress是一个端到端的测试框架，您可以使用它来测试您的React应用程序。在本教程中，我将解释如何使用Cypress和React为您的Web应用程序创建高效的端到端测试。

目录

  1. 什么是Cypress？
  2. 如何设置您的环境
  3. 如何编写您的第一个Cypress测试
  4. 如何与React组件进行交互
  5. Cypress查询
  6. Cypress断言
  7. Cypress动作
  8. 如何组织和运行您的Cypress测试
  9. 插件
  10. 描述块
  11. 自定义命令
  12. Cypress仪表板
  13. 如何使用Cypress调试代码
  14. 持续集成
  15. 结论

什么是Cypress？

Cypress是一个简单易用的开源端到端测试框架，专为现代Web开发设计。它基于JavaScript。

与Selenium等其他测试工具不同，Cypress在浏览器内运行。Cypress提供的简洁、简单的API可以轻松创建和管理测试。

您可以使用Cypress创建和管理模拟用户与应用程序进行交互的测试。您还可以检查您的Web应用程序的预期行为，并解决任何出现的问题。

如何设置您的环境

在开始编写测试之前，您需要设置您的环境。您必须安装Node.js和npm（Node包管理器）才能在React应用程序中使用Cypress。

如果尚未安装Node.js，则可以访问https://nodejs.org/en/下载并安装它。在安装Node后，您可以按照以下步骤开始使用Cypress：

1）创建一个React应用程序

我们将使用Vite来开发我们的React应用程序，因为它可以帮助我们快速高效地创建Web应用程序。

要开始，请在控制台中输入以下代码，在Vite上创建一个React应用程序：

npm create vite@latest

Vite会要求您给您的项目命名。选择任何你喜欢的名字。

然后，Vite会提供一个框架选择选项。确保选择React。

在选择React后，它会要求您在TypeScript和JavaScript之间进行选择。选择JavaScript。

然后进入您的项目目录并选择您的项目。

最后，在此之后输入npm install，然后npm start dev启动您的项目。

Vite将在http://localhost:5173/上托管您的项目。要在浏览器中查看您的项目，请单击提供的链接。

2）安装Cypress

您可以在终端中使用以下代码install cypress –-save-dev在您的项目中安装Cypress。这段代码会在您的React应用程序中安装Cypress。

3）初始化Cypress

从React项目的目录中运行npx Cypress open命令。此命令将启动Cypress测试运行器，一个用于创建和管理测试的图形化工具。现在，你有两个选择进行自动化测试：

  • 端到端测试：端到端测试涉及浏览器使用像Cypress这样的自动化工具，因此你可以创建由类似于按按钮、输入等功能组成的测试。这有助于确保一切都运行完美。
  • 组件测试：这涉及测试单个组件而不是整个React应用程序。

Cypress测试运行器是什么？

测试运行器在通过npx cypress open传递后打开。它是一个用于创建和管理测试的图形化工具，还允许你在Cypress中编写和执行测试用例。

在选择要进行的测试类型后，测试运行器的下一个部分帮助你指定要执行的脚本，并让你选择要使用的浏览器并验证你的测试是否符合预期。

4）文件夹结构

Cypress将自动将其测试文件和配置保存在名为cypress的子文件夹中。

如何编写你的第一个Cypress测试

我们将使用JavaScript编写Cypress测试，这些测试在浏览器中执行。下面是创建React应用程序的第一个测试的步骤。

假设我们希望检查文档对象模型（DOM）是否显示我们的h2元素。为了使用Cypress完成这个任务，请执行以下操作：

步骤1：在你的Cypress文件夹中，进入e2e文件，那里你会看到一行类似于这样的代码：

describe('template spec', () => {    it('passes', () => {        cy.visit('https://example.cypress.io')    })    })

步骤2：现在，在cy.visit中，将默认的HTTP地址更新为你的React应用程序的地址（如果你记得的话，是http://localhost:5173/）。

步骤3：我们希望检查DOM是否具有我们的h2元素。导航到你希望测试的元素，并添加data-testid作为属性来实现这一点。接下来，为属性指定一个名称。示例：<h2 data-testid="cypress-h1"> Leo Website </h2>。

步骤4：在你的cypress文件夹中添加这段代码以查看属性是否存在。

cy.get(‘[data-testid=”cypress-header”]’).should(“exists”):

由于Cypress配置为在保存任何代码时执行测试，因此只要你在代码编辑器中保存任何内容，测试就应立即在Cypress中开始。

如何与React组件进行交互

为了编写更有见地的测试，你需要熟悉用于模拟用户交互的各种命令。Cypress专为Web页面和Web应用程序而设计，具有广泛的用于与和测试在线元素交互的命令集。

测试脚本使用这些指令来模拟用户交互并断言应用程序的特定行为。由于Cypress代表你维护了一个Promise链，你可以将命令链接在一起。每个命令都会生成一个“subject”给下一个命令，直到链断裂并发生错误。

Cypress的命令可以分为以下几类：查询、断言、操作和其他。

Cypress查询

这些是Cypress命令，用于获取你的应用程序的当前状态。它们会根据需要进行重试，以确保提供的DOM元素或其他数据始终是最新的。它们返回一个主题，供其他命令进行操作或断言。

以下是一些你可以组织和运行测试的方式：

使用.children()方法

要选择并处理Cypress中父元素的直接子元素，请使用.children()方法。它允许你通过导航DOM树来访问给定父元素的特定子元素。

以下是在Cypress中使用.children()的一些示例：

示例1：假设你在jsx文件中有以下HTML结构：

<div class="parent-element">  <div class="child">子元素1</div>  <div class="child">子元素2</div>  <div class="child">子元素3</div></div>

要选择并处理.parent元素内部的子元素，请使用以下代码：使用.children()函数:

cy.get('.parent').children('.child').should('have.length', 3);// 点击第二个子元素cy.get('.parent').children('.child').eq(1).click();

示例2：使用.children()结合其他Cypress功能可以执行各种任务。例如，您可以识别特定的子对象并定义其属性：

// 确保第一个子元素包含文本“Child 1”cy.get('.parent').children('.child').first().should('contain', 'Child 1');// 验证所有子元素是否具有特定的类cy.get('.parent').children('.child').each(($child) => {  cy.wrap($child).should('have.class', 'child');});

示例3：许多Cypress指令可以链接在一起执行更复杂的交互。使用.children()，您可以选择父元素、选择其子元素，并操作子元素，如以下示例所示：

cy.get('.parent')  .children('.child')  .first()  .click()  .next()  .type('I'm Leo');

在此示例中，为了与下一个子元素进行交互，我们首先选择.parent元素，然后使用.children('.child')选择其子元素，然后点击第一个子元素，并继续链式调用更多指令来输入“I’m Leo.”

这些示例向您展示了如何使用.children()函数选择并处理父元素中的子项。根据您独特的HTML结构，您可以修改.children()中的CSS选择器以匹配您希望定位的子元素。

现在，您应该对.children()的工作原理和如何使用查询作为Cypress命令有了一些了解。还有更多查询命令，但您可以随时参考cypress.io上的文档来了解更多详情。

使用cy.get()命令

cy.get()是Cypress框架中的基本命令。您可以使用它来选择和执行在Web应用程序中的DOM元素上的操作，包括使用React创建的元素。

要选择要测试的React应用程序中的一个或多个DOM元素，请使用cy.get()命令。它允许您使用CSS选择器或其他与Cypress兼容的方法选择元素。

cy.get()的基本语法是cy.get(selector)。

selector是CSS选择器的一个实例。还有其他方法可以根据ID、类名或数据等属性选择组件。

假设您有这样一个React组件：

<button data-testid="Leo-button">点击</button>

您可以使用cy.get()选择该按钮元素：

cy.get('button[data-testid="Leo-button"]');

在这种情况下，cy.get('#Leo-button')选择ID为”Leo-button”的按钮元素。

Cypress断言

这些是Cypress命令，它们对您的应用程序状态进行断言。当达到时间限制或满足指定条件时，它们会停止您的测试。

断言命令只有两种类型：.and()和.should()。我们在这里讨论.should()。

在Cypress中，使用.should()命令来作出关于特定元素状态的陈述。它允许您指定组件必须满足的要求。如果这些要求不满足，测试将失败。

.should()的基本用法

.should()的基本语法如下：

cy.get('选择器').should('条件', 期望值);
  • 您要对其进行断言的DOM元素是通过cy.get('选择器')选择的。
  • .should('条件', 期望值)指示选择的元素必须满足的条件和值。

您还可以链接.should()断言。链接的.should()语句用于验证同一元素上的不同条件：

cy.get('input#用户名')  .should('be.visible')  .should('have.attr', 'placeholder', '输入您的用户名')

在此示例中，我们验证用户名输入元素是否存在，并验证占位符内容是否合适。

.should() 还允许您通过将回调函数作为期望值传递来使用自定义断言：

cy.get('.my-element').should(($element) => {  expect($element).to.have.class('active');  expect($element).to.have.css('color', 'rgb(255, 0, 0)');});

在此代码中，我们在.should()中使用自定义断言来检查元素是否具有类名”active”，以及其文本颜色是否为红色。

用.should()否定断言

.should('not.条件', 期望值)用于反驳以下断言：

cy.get('#error-message').should('not.exist');

此代码验证不存在带有ID “error-message”的元素。

将.should()与其他命令结合使用

为了创建更复杂的测试场景，您可以将.should()与其他Cypress命令结合使用。例如，您可以用它来断言元素在.click()或.type()命令之后的最终状态。

cy.get('按钮').click().should('be.disabled');cy.get(‘[data-testid=”search-input”]’).type('Leonard').should('have.value', 'Leonard');

在这些示例中，我们首先与元素进行交互（通过点击按钮或在输入框中输入文本），然后使用.should()根据使用.should()确定的元素状态来确定元素的最终状态。

在构建相关断言以确认您的 Web 应用程序在端到端测试期间的行为和状态时，Cypress 的 .should() 命令是一个强大的工具。

Cypress 操作

Cypress 命令以用户的方式与您的程序进行交互。它们只有在组件或元素可操作时才与页面进行交互。有很多示例，但现在我将使用 .click() 命令。

要在 Cypress 中模拟对 DOM 元素的点击，请使用 .click() 命令。这是您在端到端测试中进行的最常见和基本的操作之一。

让我们来看一个使用 .click() 的代码示例：

基本 .Click() 用法

.click() 的语法如下：

cy.get('选择器').click();

通过cy.get('选择器')选择要点击的 DOM 元素。 .click() 在选择的元素上模拟点击事件。

在用户交互中处理点击

有时，您可能需要在事件发生之前与一些内容进行交互。例如，您可能希望完成一个表单字段，然后按提交按钮。您可以使用 .type() 在继续点击提交按钮 .click() 之前与输入字段进行通信：

cy.get(‘[data-testid=”username”]’).type('okosaleo');cy.get(‘[data-testid=”password”]’).type('password');cy.get(‘[data-testid=”Leo-button”]’).click();

首先，在此示例中，我们使用 .type() 在密码和用户名字段中输入值，然后使用 .click() 点击登录按钮并提交表单。

处理动态元素

您可以在处理动态元素或在某个操作后出现的元素时使用 .click()。为了确保元素已经存在并准备好进行操作，您可以将 .click() 与其他命令结合使用。

例如，点击一个动态元素。假设您有一个项目列表，并且希望在用户交互一定次数后单击某个弹出的项目：

cy.get（'[data-testid =“Leo-button”]’）.click（）；cy.get（'.dynamic-item'）.should（'have.length.gt'，5）；cy.get（'.dynamic-item'）.eq（4）.click（）；

在此示例中，为了动态加载新内容，首先单击 “Leo-button” 按钮。在使用 .should（'have.length.gt'，5） 确保至少显示六个项目之后，使用 .eq（4） 单击第五个项目。

其他命令

Cypress 还有许多其他命令，我们在这里没有讨论，但您可以使用它们编写其他测试。您可以在 Cypress 文档中查看它们。

如何组织和运行您的 Cypress 测试

随着时间的推移，您的应用程序可能会积累大量的测试。Cypress 提供了几种方法来设置和有效管理这些测试。

插件

为了帮助完成诸如创建代码覆盖报告和模拟 API 等任务，Cypress 提供了许多扩展和插件。

插件是专门设计的 JavaScript 模块，可让您修改和添加 Cypress 测试框架的新功能。通过使用插件，您可以增强 Cypress 的功能，并根据您的特定需求进行自定义。

Cypress 插件包括：

  1. 集成：通过创建插件，可以将 Cypress 与其他程序、服务和系统集成。其中包括部署管道、版本控制系统和持续集成（CI）平台等。
  2. 自定义命令：您可以使用插件定义自定义命令，以便封装和重用常规测试过程或用户与应用程序的交互。这可以提高测试代码的组织性和可维护性。

Cypress 还提供许多其他插件功能。插件是自定义测试框架，以适应项目特定需求、增强测试功能以及更好地组织和维护测试代码的一种灵活方式。

描述块

Cypress 与 Mocha 测试框架集成，帮助您组织和结构化测试套件，其中包括描述块 (describe blocks)。

这些描述块为您的测试提供清晰的结构，帮助您对相关测试用例进行分组。

您可以使用描述块对您正在评估的程序的功能和行为进行分类和解释。

Cypress 中描述块的目的

  • 组织测试用例：通过使用描述块，您可以将相关的测试用例组织在一起。可以为特定的应用程序功能、部分或功能创建描述块。
  • 增强测试框架：它们为您的测试提供了一个层次结构框架，使测试套件更易于探索和理解。借助这种结构，开发人员和测试人员可以更快地找到某些测试。
  • 清晰和文档化：使用描述块，您可以为测试提供人类可读且具有描述性的标题。这是一种测试文档。

描述块的结构如下：

describe('测试套件或功能的描述', function () {  // 此处放置您的测试用例（it 块）});
  • "测试套件或功能的描述"：一个字符串，包含测试套件或功能的描述。它充当测试用例组的标题。
  • function () { /*... */ }：这个函数包含与此 describe 块相关的各种测试用例，并在 it 块内编写。

如何使用描述块自定义命令

假设您正在评估一个 Web 应用程序的登录功能。以下是使用描述块结构化您的测试的示例：

describe('登录功能', function () {  // 这是用于登录功能的最外层 describe 块  it('应显示登录表单', function () {    // 检查登录表单是否显示的测试用例逻辑  });  it('应在无效登录时显示错误消息', function () {    // 检查错误消息是否显示的测试用例逻辑  });  it('应使用有效凭证成功登录', function () {    // 检查登录成功的测试用例逻辑  });  describe('密码重置', function () {    // 用于密码重置功能的嵌套 describe 块    it('应允许用户请求密码重置', function () {      // 密码重置请求的测试用例逻辑    });    it('应使用有效的重置令牌重置密码', function () {      // 使用有效令牌进行密码重置的测试用例逻辑    });  });});</pre
在这个例子中：
  1. 所有与登录功能相关的测试用例都被分组在最外层的describe块中。
  2. 与密码重置功能相关的测试被分组在其中的一个嵌套的describe块中。
通过这种层次结构，您可以轻松地识别相关的测试，这也有助于澄清每组测试用例的目标。
在Cypress中有效地使用describe块可以让您编写结构良好且易于访问的测试套件，这将促进项目扩展时的测试管理和维护。
自定义命令
为了简化重复的任务并改善测试的可读性，您可以创建自定义的Cypress命令。
为了封装和重用与被测试应用程序的常见测试过程或交互，您可以在Cypress测试套件中开发并添加自定义命令。这些自定义命令可以帮助增强内置Cypress命令的功能，并提高测试代码的可读性、组织性和可维护性。
您需要在测试文件中的一个地方定义自定义命令，通常是commands.js文件。通常情况下，您可以在<cypress/support目录中找到这个文件。
另外，您可以根据程序的特点将自定义命令排列在不同的文件或文件夹中。
这是一个示例：
Cypress.Commands.add('customCommandName', (arg0, arg1, ...) => {  // 在这里定义自定义命令的逻辑});


    

  • customCommandName：这是您在测试脚本中使用的自定义命令的名称。
    • 

  • (arg0, arg1,...)：这些是您可以给自定义命令传递的参数或参数，以便改变程序的行为方式。
    • 

  •  // 自定义命令的逻辑 }：在这里提供您想要自定义命令执行的具体操作。
    • 



如何使用自定义命令


一旦您定义了自定义命令，您可以像使用任何内置的Cypress命令一样在测试脚本中使用它。


使用以下语法，您可以调用自定义命令：


cy.customCommandName(arg0, arg1, ...);


自定义命令的优势


Cypress自定义命令具有许多优点：


    

  1. 可重用性：您可以使用自定义命令封装复杂或常用的与应用程序的交互，这减少了测试脚本中的冗余并鼓励代码的重用。
    2. 

  2. 可读性：当典型任务被抽象为自定义命令时，您的测试脚本变得更可访问和可理解。使用自定义命令，您的测试代码将更加自解释。
    3. 

  3. 可维护性：与在多个测试脚本中查找和更新每个操作实例相比，您只需要在需要更新常见操作或交互时修改自定义命令一次。
    4. 

  4. 一致性：使用自定义命令可以确保您的测试套件的常见交互以一致的方式执行，从而保持测试过程的一致性。
    5. 



这是一个基本示例，展示了一个自定义命令，它可以让用户通过填写用户名和密码登录：


Cypress.Commands.add('login', (username, password) => {  cy.get('[username-input"]').type(username);  cy.get('[data-testid="password-input"]').type(password);  cy.get('[data-testid="Leo-button"]').click();});


Cypress Dashboard


这个工具允许你监视文本执行器的电影，组织测试运行，并与团队讨论结果。你可以找到Cypress仪表板在测试运行窗口。


要查看您测试运行的历史记录，请点击“运行”选项卡。运行选项卡的顶部将包含一个“查看仪表板”的链接。当您点击“查看仪表板”链接时，您的网页浏览器将启动Cypress仪表板。


Cypress提供仪表板作为一个基于Web的服务。Cypress仪表板的目标是改进和简化Web应用程序测试和测试管理过程。它提供了一个单一平台，使用Cypress监视、分析和管理您的测试运行。


Cypress仪表板的主要属性和功能如下：


    

  1. 实时测试执行：当您使用Cypress仪表板服务执行Cypress测试时，您可以实时查看测试执行过程。它提供了对您的测试的实时视图，包括视频和实时浏览器截图。这个工具对于跟踪测试进度和解决问题很有用。
    2. 

  2. 协作与共享：开发和QA团队可以通过仪表板合作。当测试运行与团队成员共享时，开发人员、测试人员和其他相关方可以轻松访问和查阅测试结果。
    3. 

  3. 集中化的测试管理：使用Cypress仪表板，您可以将您的Cypress测试结果存储和管理在一个中心位置。测试运行可以从单一位置访问和组织。
    4. 

  4. Cypress仪表板促进了在多台计算机和Web浏览器上并发运行测试。这可以显著加快测试执行过程，并更快地提供您需要的结果。
    5. 

  5. 测试洞察和分析：通过跟踪测试结果，您可以了解更多关于您的测试运行。Cypress仪表板提供了详细的分析，包括执行时间，通过/失败状态等。您可以使用这些数据来分析测试结果中的趋势和模式。
    6. 

  6. 测试自动化和调度：您可以通过安排测试在预定的时间或间隔运行来自动化测试过程。这对于运行回归测试和维护持续的测试覆盖率都很有好处。
    7. 



以下是 Cypress 仪表板提供的一些功能和属性。


dashboard-analytics-overview
以下是 Cypress 仪表板的示例


如何使用 Cypress 调试代码


使用 Cypress 调试测试非常简单。要停止测试执行并在浏览器中查看应用程序的状态，请添加 cy.debug()。让我们看一个在 Cypress 中使用 cy.debug 的示例：


describe('Cypress 调试示例', () => {  it('执行登录并检查用户资料', () => {    cy.visit('/login');    cy.get('#username-input').type('testuser');        // 暂停测试执行以检查应用程序状态    cy.pause();    cy.get('#password-input').type('password123');    cy.get('#login-button').click();    // 继续执行断言    cy.url().should('include', '/profile');    cy.get('.user-info').should('contain', '欢迎，testuser');  });});


在此示例中，测试将在达到 cy.pause() 命令时暂停，Cypress 测试运行程序将提示您查看开发工具控制台。


之后，您可以与程序交互，检查 DOM，验证变量，并通过控制台以交互方式执行更多的 Cypress 命令进行调试。


时间旅行调试


Cypress 还具有一项强大的功能，称为 "时间旅行调试"。该功能允许您在测试期间随时查看应用程序的当前状态。这大大简化了诊断流程。


使用此功能，您可以记录和重播测试执行阶段，以排查 Cypress 测试中的问题。通过逐步展示测试执行过程的可视化描述，它可以帮助您识别和解决测试和应用程序的问题。通过使用测试驱动开发（TTD），您可以在测试运行的各个阶段交互式地查看应用程序的状态。


Cypress 的时间旅行调试工作原理如下：


要使用 TTD，您首先必须记录一个测试运行。您可以使用 Cypress 仪表板服务或在本地运行您的测试并使用 --record 参数进行记录。


以下是如何在记录时进行测试的示例：


npx cypress run --record


测试默认在 Electron 浏览器中启动。


一旦测试运行结束并将结果提交给 Cypress 仪表板，您就可以使用 Cypress 仪表板 Web 界面。


接下来，在 Cypress 仪表板中找到您希望调试的测试运行，并点击它。这将引导您进入包含测试详细信息的页面。


在测试详细信息页面上，您可以看到在每个 Cypress 命令执行时的应用程序状态的时间线表示。


要查看某一时刻应用程序的状态，请在时间线上点击快照。您可以浏览控制台日志，使用 DOM，并在该快照的上下文中运行 Cypress 命令。


要查看应用程序在各个测试阶段的状态，您可以选择在时间线上前往特定点，或逐个命令地遍历时间线。


以下是在 Cypress 测试中应用 TTD 的示例：


describe('时间旅行调试示例', () => {  it('执行登录并检查用户资料', () => {    cy.visit('/login');    cy.get(‘[username-input”]’).type('testuser');    cy.get(‘[password-input”]’).type('password');    cy.get(‘[login-input”]’).click();    // 在此时，我们可以使用 TTD 来检查应用程序的状态，确保用户返回到个人资料页面。        cy.url().should('include', '/profile');    cy.get('.user-info').should('contain', '欢迎，testuser');  });});


在这种情况下，您可能会在输入登录信息并点击登录按钮后遇到需要诊断的问题。


为了确保用户在个人资料页面上，并且名称显示正确，您可以使用 TTD 在 cy.url() 断言处暂停，并验证应用程序的状态。


通过使用 TTD，您可以在不同的时间点检查应用程序的状态，以交互方式调试和排查问题，从而更高效地找到和解决问题。


持续集成


Cypress测试可以通过Travis CI、GitHub actions、Jenkins或CircleCI等工具集成到您的持续集成（CI）工作流中。让我们来谈谈使用GitHub actions进行持续集成：


使用GitHub Actions进行Cypress持续集成


您可以使用GitHub Actions将Cypress自动化测试作为您的开发工作流的一部分进行持续集成（CI）。


您可以使用GitHub Actions创建工作流程，自动化执行多种进程，例如当您的源代码发生更改时执行Cypress测试。让我们来学习如何设置它。


先决条件：


    

  1. GitHub仓库：Cypress测试和应用程序代码应该在GitHub仓库中。
    2. 

  2. Cypress配置：确认Cypress已经安装在您的项目中，并且您的Cypress测试配置正确。Cypress Open可以用来设置和运行本地测试。
    3. 



步骤1：建立工作流程配置：


在您的GitHub仓库中创建一个文件，命名为工作流程配置。该文件通常命名为.github/workflows/cypress.yml，其中定义了CI工作流程，并提供了何时以及如何执行Cypress测试的指令。


以下是一个简单配置文件的示例：


name: Cypress Testson:  push:    branches:      - main # 根据您的仓库默认分支进行修改jobs:  cypress:    runs-on: ubuntu-latest    steps:    - name: Checkout code      uses: actions/checkout@v2    - name: Install dependencies      run: npm install    - name: Run Cypress tests      run: npm run cypress:run


每次对main分支进行推送时，此配置文件将创建一个执行Cypress测试的流程。您可以根据实际需求进行修改。


步骤2：描述npm脚本：


在package.json文件中定义npm脚本，以便执行Cypress测试。例如：


"scripts": {  "cypress:run": "cypress run",  "cypress:open": "cypress open"}


在开发过程中，使用cypress:open可以交互式运行测试，而cypress:run用于无界面执行Cypress测试。


步骤3：添加到GitHub仓库


将应用程序代码和GitHub Actions配置文件（cypress.yml）添加到您的GitHub仓库中。将修改发送到GitHub。


步骤4：打开GitHub Actions：


如果尚未打开，请转到您的GitHub仓库，选择“Actions”选项卡，并为您的仓库启用GitHub Actions。


步骤5：管理您的流程：


每次您向仓库提交更改时，GitHub Actions将自动启动指定的流程，其中包括Cypress测试。


步骤6：查看结果：


您可以在GitHub仓库的“Actions”页面上查看Cypress测试的状态和结果。测试结果和日志将显示给您，便于诊断和查找问题。


无界面选项


Cypress提供了一个无界面选项用于持续集成（CI）测试。在没有Cypress测试运行器的情况下，您仍然可以以无界面方式运行Cypress。通过使用命令npx cypress run，这意味着测试运行器不会部署，我们主要编写脚本来使用Cypress。


无界面浏览器是适用于服务器环境下的自动化测试的浏览器，例如持续集成/持续交付系统。


在无界面模式下运行Cypress测试时，测试执行过程中不会显示可见的浏览器窗口。这在自动化持续集成和交付流水线中进行无用户界面测试时非常有帮助。


要使用此选项，请在终端中输入命令npx cypress run。


    

  1. 执行此命令时，Cypress将在Electron浏览器中启动您的测试。
    2. 

  2. 完成后，Cypress将自动提供测试运行的视频剪辑和截图，以便于调试。
    3. 

  3. 用户可以调整截图和视频。名为“截图和视频”的文件夹包含Cypress生成的截图和视频。
    4. 



运行测试的另一种方法是通过向您的package.json文件添加脚本。您可以添加由工作作为对象的key和value对组成的脚本。其中key是命令的名称，value是要运行的命令。


让我们使用键值对来无头运行测试：




"script": {    "cypress:run": "cypress run",    "cypress:open": "cypress open"}
此行代码应在您的package.json文件中找到


在此代码中，"cypress:run"和"cypress:open"是keys，而"cypress open"和"cypress open"是命令。要运行命令，我们需要使用npm run，然后是使用的键，例如：npm cypress:run。


希望您现在明白了如何在Cypress中无头运行测试。


结论


Cypress是一个有效的工具，您可以使用它来测试您的Web应用程序。您可以使用它编写端到端测试，确保React项目按预期工作并识别任何问题。


Cypress是您测试工具箱中有用的补充，因为它具有交互式的测试运行器、易于使用的API和强大的调试功能。现在，请使用Cypress来测试您的React应用程序，以确保用户体验流畅且无错误。


如果您想更详细了解Cypress，可以在其文档中查看：cypress.io。为您的测试加油！
如何在登录后爬取亚马逊产品评价
CSS 框架与自定义 CSS – 有什么区别？
如何使用Firebase托管和部署React应用程序

Leave a Reply

Your email address will not be published. Required fields are marked *

    Framework

    Framework