赛普拉斯测试：运行网络应用程序测试的指南

在这篇文章中，我们将深入探讨Cypress测试。Cypress是一个现代的、开源的Web应用测试自动化工具。我们将看看如何设置和使用Cypress来测试Web应用程序，我们还将看看使Cypress成为一个有吸引力的选择的一些功能。

Cypress是建立在Electron之上的，Atom文本编辑器和许多其他应用程序都使用Electron。它很容易安装，并且有一个简单、清晰的API。

什么是软件测试？

软件测试 by Nick Youngson CC BY-SA 3.0 Pix4free.or

软件测试是验证一个应用程序的功能的过程。这可以手动完成，通过运行应用程序并尝试其各种功能，或自动完成，通过编写代码来测试应用程序的功能。

为什么软件测试很重要

测试很重要，因为它有助于确保软件按预期运行。它可以发现否则会被忽视的错误和问题，并有助于提高软件的质量。测试尤其重要，因为它可以快速有效地运行测试，而不需要人工干预。

自动化软件测试的好处

自动化软件测试有很多好处：

• 提高效率：它们可以快速和容易地运行，不需要人工干预。这节省了时间和资源。
• 提高准确性：它们通常比手动测试更准确，因为它们可以被写成涵盖所有可能的情况。
• 增加覆盖率：它们可以覆盖比人工测试更大的代码部分，提供对应用程序的全面覆盖。
• 降低成本：从长远来看，它们可以通过减少对人工测试人员的需求来节省资金。

什么是Cypress？

Cypress是一个现代的、开源的Web应用测试套件。它建立在Electron之上，Electron被Atom文本编辑器和许多其他应用程序所使用。Cypress很容易安装，并且有一个简单、清晰的API。

Cypress可用于自动化所有类型的测试，包括单元测试、功能测试和端到端测试。Cypress还可用于在多个浏览器和设备上并行运行测试。

Cypress的特点

使Cypress成为自动化测试的一个有吸引力的选择的一些特点是。

• **安装简单。**Cypress可以使用npm或Yarn进行安装。不需要安装任何其他的依赖项。
• **清晰的API：**Cypress提供的API很简单，容易理解。所有的命令都是可连锁的，使得代码易于阅读和编写测试。
• **自动等待。**Cypress自动等待元素出现，然后再对其执行任何操作。这使得代码更可靠，更容易编写。
• **平行执行：**使用Cypress Test Runner，测试可以在多个浏览器和设备上并行运行。这使得测试的执行速度更快。

开始使用Cypress测试

Cypress适用于Node.js12或14及以上版本，因此在安装和使用Cypress之前，你需要在电脑上安装Node.js。

Cypress的安装

你可以通过npm安装Cypress。

npm install cypress --save-dev

或者你可以使用Yarn来安装它。

yarn add cypress --dev

一旦Cypress安装完毕，你可以使用以下命令运行它。

$(npm bin)/cypress open

这将打开Cypress测试运行器。然后你可以从这里运行你的测试。

Cypress配置

Cypress可以使用cypress.json 文件进行配置。这个文件应该位于你项目的根部。下面是一个基本的例子。

{
  "baseUrl": "http://localhost:8080",
  "viewportWidth": 1200,
  "viewportHeight": 800,
  "fixturesFolder": "tests/e2e/fixtures",
  "integrationFolder": "tests/e2e/specs",
  "pluginsFile": "cypress/plugins.js",
  "supportFile": false,
  "screenshotsFolder": ".cypress/screenshots"  
}

关于配置Cypress的更多信息，请参阅文档。

编写Cypress测试

一个Cypress测试是用JavaScript编写的，在浏览器中运行。这使得测试易于编写和理解。

每个Cypress测试都被组织成 "规格"。一个规格是一个特定特征或功能的测试的集合。规格文件位于integrationFolder （默认为tests/e2e/specs ）中。一个规格或测试文件可以包含一个或多个测试。

下面是一个规格文件的基本例子。

describe('My App', function() {

  it('does something', function() {
    // Some test code here
  });

  it('does something else', function() {
    // Some test code here
  });  

});

赛普拉斯测试实例1：测试一个登录表单

在这个例子中，我们将写一个Cypress测试登录表单。我们将假设该表单有两个字段，username 和password ，以及一个提交按钮。

首先，我们需要打开包含登录表单的页面。我们可以用cy.visit() 命令来完成这个任务。

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/login');
  });

  // More tests here...  
});  

接下来，我们需要填写username 和password 字段，并点击提交按钮。我们可以用cy.get(),cy.type(), 和cy.click() 命令来完成这个任务。

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/login');
    cy.get('#username').type('testuser');
    cy.get('#password').type('secret');    
    cy.get('.btn-submit').click();    

  });  

  // More tests here...  
}); 

赛普拉斯测试实例2：测试一个购物车

在这个例子中，我们将编写一个测试购物车功能的规范。我们假设购物车有两个字段，quantity 和item ，以及一个 "添加到购物车 "按钮。

首先，我们需要打开包含购物车表单的页面。我们可以用cy.visit() 命令来做。

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/cart');
  });

  // More tests here...  
});  

接下来，我们需要填写quantity 和item 字段，并点击 "添加到购物车 "按钮。我们可以用cy.get(),cy.type(), 和cy.click() 命令来完成这个任务。

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/cart');
    cy.get('#quantity').type(5);
    cy.get('#item').type('pants');    
    cy.get('.btn-add-to-cart').click();    

  });  

  // More tests here...  
}); 

赛普拉斯测试实例3：测试一个单页应用程序

在这个例子中，我们将测试一个使用React前端框架的单页应用程序（SPA）。该应用是一个简单的任务管理器，允许用户添加、编辑和删除任务。

首先，我们需要安装一些依赖项。我们将需要以下东西。

• React
• 创建React应用程序
• 赛普拉斯

我们可以用npm安装这些依赖项。

npm install --save react react-dom create-react-app cypress   # Install React and Create React App dependencies, as well as Cypress itself

现在我们可以用Create React App创建一个新的React应用。

create-react-app my-app   # Create a new React app in the my-app folder

接下来，我们需要安装一些额外的Cypress依赖项。

cd my-app                          # Change directory into the new app folder
npm install --save-dev cypress     # Install Cypress as a development dependency

现在我们的依赖项已经安装完毕，我们可以编写我们的测试。在cypress/integration 文件夹中创建一个名为tasks.spec.js 的新文件，内容如下。

describe('Tasks', function() {

  beforeEach(function() {           // This runs before each test in the suite
    cy.visit('http://localhost:3000');  // Visit the base URL of the app before each test    
  });

  it('should add a task', function() {   // This is a test case - replace with your own    

    // Enter task details into form and submit     
    cy.get('input[name="taskName"]').type('My Task');
    cy.get('textarea[name="taskDescription"]').type('My Description');
    cy.get('form').submit();       

    // Assert that the task appears in the list
    expect(cy.get('.tasks li').its('length')).to.equal(1);
   });
});

beforeEach 函数在规范中的每个测试之前运行。在这种情况下，我们要访问我们应用程序的基本URL (http://localhost:3000)。

it 函数包含我们的实际测试代码。第一个参数是测试案例的描述，第二个参数是包含我们测试代码的回调函数。在这个例子中，我们要测试我们的任务管理器应用程序在使用表单提交任务时是否正确地将任务添加到列表中。我们通过首先在表单字段中输入一些数据，然后提交来做到这一点。最后，我们使用expect ，断言列表中现在有一个任务。

你可以在Visual Studio Code中运行你的测试，方法是在Test Explorer**（查看->Test Explorer**）下打开集成测试。

或者，你也可以使用npm从终端窗口运行它们。

npm run e2e                            # Run all tests in headless mode (Chrome)
npm run e2e:open                       # Run all tests with GUI ( Electron)

赛普拉斯测试运行器

有两种方法来运行每个Cypress测试：本地和云端。

在本地测试Cypress

你可以通过运行以下命令来打开Cypress测试运行器。

node_modules/.bin/cypress open

测试运行器将在一个新窗口中打开。在这里，你可以通过点击 "运行所有规格"或 "运行测试文件"按钮来运行所有测试或个别测试。

赛普拉斯的云测试

Cypress还提供基于云的测试服务，允许你在远程服务器上运行你的Cypress测试。如果你想在本地没有的不同浏览器或设备上进行测试，这尤其有用。

要使用基于云的Cypress测试服务，你首先需要在www.cypress.io/ 注册一个免费账户。一旦你有了账户，你就可以连接你的GitHub仓库，并选择你要测试的分支。然后，Cypress会在该分支的每次提交中自动运行你的测试。

你也可以通过点击项目名称旁边的 "运行 "按钮，从Cypress仪表板上手动触发测试运行。

持续集成

持续集成（CI）是自动构建和测试代码变更的做法。这使开发人员能够及早发现错误，避免在开发过程中出现潜在问题。

有许多不同的CI工具，但我们将专注于三个最流行的工具。Travis CI、CircleCI和Jenkins。

特拉维斯CI

Travis CI是一个流行的托管CI服务，对开源项目是免费的。它与GitHub集成，使其易于设置和使用。

要在Cypress中使用Travis CI，你需要在项目的根目录下创建一个travis.yml 文件。这个文件告诉Travis如何构建和测试你的项目。下面是一个简单的例子。

# tell Travis we're using Node.js
language: node_js

# specify which versions of Node to use
node_js: 10

# run our tests
script:
  # or yarn test if you're using Yarn instead of NPM
  - npm run test

# set the base URL environment variable for Cypress
env: CYPRESS_BASE_URL=https://example.com

这个文件告诉Travis使用Node v10进行测试，并运行npm run test 命令（或者yarn test ，如果你使用Yarn而不是npm）。它还设置了CYPRESS_BASE_URL 环境变量，Cypress在运行测试时将会使用该变量。

你可以在Cypress文档中了解更多关于配置Travis CI以使用Cypress的信息。

CircleCI

CircleCI是另一个流行的托管CI服务，为开源项目提供一个免费计划。与Travis一样，它与GitHub集成，使其易于设置和使用。

要在Cypress中使用CircleCI，你需要在项目的根目录中创建一个circleci/config.yml 文件。这个文件告诉CircleCI如何构建和测试你的项目。

这里有一个简单的例子。

version: 2.0
jobs:
  build:
    docker:
      # specify the version of Node.js to use
      - image: circleci/node:10

    steps:
      # run our tests
      - run: npm run test

      # set the base URL environment variable for Cypress
      - run: echo "CYPRESS_BASE_URL=https://example.com" >> $BASH_ENV

  deploy:
    # ... deployment steps here ...

这个文件告诉CircleCI使用Node v10进行测试，并运行npm run test 命令。它还设置了CYPRESS_BASE_URL 环境变量，这将被Cypress在运行测试时使用。

你可以在Cypress文档中了解更多关于配置CircleCI以使用Cypress的信息。

Jenkins

Jenkins是一个流行的、自我托管的CI服务器，可用于开源和私人项目。它提供了广泛的功能和插件来扩展其功能。

要将Jenkins与Cypress一起使用，你需要从Jenkins的插件库中安装Cypress插件。这个插件增加了一个新的 "Cypress "构建步骤，可用于运行Cypress测试。

在你项目的Jenkins配置中，你需要添加一个 "Cypress "构建步骤，并指定你项目的cypress.json 文件的路径。你还需要将该文件中的baseUrl 属性设置为你的应用程序的URL（如https://example.com ）。这里有一个cypress.json 文件的例子。

{
  "baseUrl": "https://example.com"
}

你可以在Cypress文档中了解更多关于配置Jenkins以用于Cypress测试的信息。

调试测试

调试Cypress测试是简单而直接的。有两种方法来调试测试：使用命令行，或使用浏览器DevTools。

使用命令行的Cypress测试

Cypress命令行界面（CLI）有一个内置的调试器，可以用来调试测试。要使用CLI调试器，只需运行带有--debug 标志的cypress 命令。这将打开Cypress GUI，并启用调试器。

一旦GUI打开，你可以通过点击左侧面板上的行号在测试代码中设置断点。测试将在每个断点处暂停，你将能够检查变量并看到调用堆栈。你也可以恢复测试的执行，并浏览每一行的代码。

使用浏览器开发工具进行赛普拉斯测试

如果你不使用CLI，你仍然可以使用浏览器DevTools调试你的Cypress测试。要做到这一点，只需打开DevTools控制台，在控制台中输入cypress 。这将使你能够使用与CLI调试器相同的所有调试功能，包括设置断点和检查变量。

升级Cypress测试套件

当从Cypress的一个版本升级到另一个版本时，重要的是要注意已经引入的任何突破性变化。这些变化可能会破坏你的Cypress测试，并可能要求你更新你的代码，以便继续使用新版本的Cypress。

请务必查看官方的迁移指南。

有用的资源

如果你想了解更多关于Cypress的信息，这里有一些有用的资源。

• Cypress.io：Cypress的官方网站
• 文档：Cypress的官方文档
• Cypress博客：Cypress的官方博客
• GitHub：Cypress的GitHub repo
• 示例：使用Cypress构建的示例应用程序
• 视频教程：Cypress的一系列视频教程

从Selenium迁移

如果你目前正在使用Selenium测试Web应用程序，你可能正在考虑迁移到Cypress。你可能想这样做，有几个原因。

• 与Selenium相比，Cypress有一个更简单、更直观的API。
• Cypress测试在与被测试的应用程序相同的环境中运行，这使得调试更容易。
• Cypress可以自动等待元素出现在DOM中，然后再与它们进行交互，这使得测试更加稳健。

从Selenium迁移到Cypress有两个主要选择。WebDriverIO和Protractor。

WebDriverIO

WebDriverIO是一个Node.js库，围绕Selenium WebDriver的API进行包装。它的API与Cypress相似，因此很容易将现有的Selenium测试迁移到WebDriverIO。WebdriverIO网站有一个关于如何做到这一点的指南。

Protractor

Protractor是一个用于Angular应用程序的端到端测试框架，在引擎盖下使用Selenium WebDriver API。它的架构与Cypress相似，因此很容易将现有的Selenium测试迁移到Protractor。Protractor网站有一个关于如何做到这一点的指南。

结论

像Cypress这样的自动化测试工具可以使我们的开发者的生活变得更加轻松。通过自动运行测试，我们可以快速捕捉错误并避免潜在的回归。

尽管仅仅依靠自动测试是很诱人的，但手动测试仍然很重要。自动测试可以捕捉一些错误，但它们不能捕捉所有的东西。仍然需要人的眼睛来捕捉诸如错别字、布局问题和用户体验问题。

如果你还没有使用自动化工具，我建议你试一下Cypress。它很容易设置和使用，而且从长远来看，Cypress测试可以为你节省大量的时间和麻烦。