Cypress应用

从Selenium迁移到Cypress

info

您将学到

• Selenium和Cypress的优势与局限
• 迁移策略与注意事项
• 如何将测试用例迁移到Cypress
• 如何将Cypress集成到CI/CD流水线

虽然Selenium和Cypress都是流行的Web自动化工具， 但每个框架都有其独特的优缺点。例如， Cypress是最容易上手的自动化框架之一， 而Selenium则是最古老且使用最广泛的框架之一。

仔细观察Selenium WebDriver可以发现其历史悠久且拥有丰富的 文档和故障排除指南。得益于活跃的社区支持，Selenium拥有 包括Java、JavaScript、Python、C#和Ruby在内的多语言文档。 其广泛采用还体现在与各种低代码工具的集成中，这突显了其在浏览器交互方面的多功能性。

Cypress与Selenium及其他测试自动化框架的一个关键区别在于其 独特方法，即在交互式浏览器内部运行测试， 而不是针对浏览器运行测试。这种方法减少了不稳定性， 并赋予用户对框架和被测应用程序更大的控制权。Cypress无需显式声明即可等待页面加载， 允许执行暂停直到应用程序完全就绪。此外，Cypress简化了测试记录， 无需复杂配置或设置，便于通过访问截图、视频和时间旅行调试进行故障排除和错误报告。

此外，Cypress新增的组件测试功能促进了 测试与开发团队之间的协作， 使他们能够使用相同的工具和语言工作。这种一致性简化了测试流程，并促进了团队间的一致性和效率。

迁移的五大理由

虽然迁移通常被视为麻烦事，但投资Cypress无疑是值得的。 事实上，迁移到Cypress甚至可能不会带来重大挑战。

1. 减少不稳定性

Cypress的主要优势之一是能够减少测试的不稳定性。偶尔的 测试失败会削弱对测试框架的信任。Cypress通过提供 自动重试和对应用程序的隐式等待等功能来解决这一问题，有效 减少不稳定性并提高测试可靠性。

2. 易于设置

与需要繁琐设置过程的传统测试自动化框架不同，Cypress 只需两个Node.js命令即可完成设置：'npm install' 和'npx cypress open'。 几秒钟内，用户就可以运行第一个测试。由于Cypress使用 本地安装的浏览器，因此无需复杂配置或额外安装。

3. 无限扩展

认识到Web应用程序的多样化需求，Cypress通过多种 插件提供可扩展性。这些插件大多由社区贡献， 允许用户根据特定项目需求定制测试框架，确保灵活性和可扩展性。

4. 强大的社区支持

Cypress拥有一个活跃的社区，贡献插件并优先考虑文档。 凭借丰富的文档、大使计划等支持举措以及拥有超过10,000名测试人员和开发人员的Discord社区， Cypress用户可以从丰富的资源和帮助中受益，使其成为一个得到高度支持的测试框架。

5. 易于使用

与Selenium相比，Cypress提供了更直观和用户友好的体验。选择器游乐场和 Cypress Studio等功能简化了测试编写和 调试，使用户能够专注于创建有效的测试，而无需在测试服务器和浏览器之间不断切换。这种 简化方法提高了生产力并加速了测试过程。

Cypress的测试回放提供了 时间旅行和交互式调试在CI/CD流水线中运行的测试的能力，这是Selenium所不具备的。

使用Cypress，测试不仅变得更可靠和高效，而且对开发人员和QA专业人员来说也更加愉快。

评估迁移的适用性

为了使迁移顺利进行，重要的是对现有测试用例 和框架功能进行全面分析。这一分析是确定测试用例迁移优先级的基础，因为 并非所有测试用例都需要一次性迁移。根据组织的需求，重点可能放在高优先级用例上，而不是快速见效的用例上。此外，必须评估嵌入在框架中的任何业务或组织特定逻辑是否可以重建或迁移到JavaScript或TypeScript。

如果当前的测试自动化框架采用页面对象模型， 可能从较简单的任务开始，然后再处理更复杂的测试用例会更有优势。从容易实现的目标开始，可以迁移选择器和基本交互，为您逐步引入框架。

需要注意的是，如果Selenium框架依赖XPath，迁移将需要更改这些选择器。 虽然'cypress-xpath'插件仍然可用，但它已被弃用，可能不是长期的最佳解决方案。

开始使用Cypress

安装和配置Cypress非常简单，我们提供了逐步指南帮助您入门。

• 首先安装Cypress。
• 然后打开Cypress应用。

查看我们的详细端到端测试入门指南。

现在您已准备好开始迁移。

策略与注意事项

info

如果当前的自动化框架支持Cucumber，请跳转到使用Cucumber迁移测试用例部分。

在开始编写任何代码之前，花时间评估框架的架构。结构良好的 框架在未来将更容易维护和扩展。

一些需要讨论的问题：

• 我们会使用页面对象吗？
• 我们会模拟API调用吗？
• 我们将如何划分测试？

例如：虽然页面对象模型（POM）的利用已被广泛讨论并被视为最佳实践，但在其实现上仍存在分歧。一些人主张采用极简方法，其中POM仅包含页面选择器，而其他人则主张采用更全面的方法，包括选择器和所有可能的页面操作。重要的是进行团队讨论以对齐POM结构，从而避免在首次拉取请求时出现意外。

另一个关键考虑因素是团队是否打算利用 cy.intercept()来存根API调用。 虽然这种方法减少了对端到端测试的需求，但它显著增加了较小测试的数量。对于某些团队来说，增加的维护开销可能超过其好处。然而，存根API请求可以减少后端依赖并增强框架稳定性。

在较大的应用程序中，定位框架中的特定测试可能具有挑战性。因此，建立 测试组织指南对于创建可维护的框架至关重要。一些团队倾向于基于应用程序功能组织测试，而其他团队则选择按网页组织。虽然性能和功能不受影响，但关于测试放置的明确指南对框架的可维护性至关重要。

这些考虑因素为打造结构良好、易于维护且使用愉快的框架提供了路线图。花时间思考并与团队广泛讨论这些问题将在长期内带来显著回报。

迁移测试用例

准备工作充分后，是时候启动实际的迁移过程了。

首先迁移的可能是所有页面对象或选择器，根据开发人员使用的前端框架，这可能是一个快速的查找和替换操作。例如，在Vue.js中，Selenium的选择器是vl-checkbox，而在Cypress中则是.vl-checkbox。这将使您快速拥有可用于测试应用程序的Cypress测试。这也可能是审查测试以查看当前选择器对变化的敏感程度的机会。Cypress记录了许多关于如何编写健壮测试的最佳实践，选择元素部分是一个很好的资源。

Selenium和Cypress之间最显著的变化之一是实际的测试语法。 虽然Selenium会运行一个类或不同的场景，但Cypress会在*.cy.js文件中运行每个it。 因此，测试的流程应转移到一个it中。为了使结构更加清晰，可以在describe中添加多个it。这允许您创建类似于测试套件和测试用例的细分。

describe('General information', () => {
  beforeEach(() => {
    cy.get('#loginButton').click()
  })

  it('Header is visible', () => {
    cy.get('#header').should('be.visible')
  })

  it('Footer is visible', () => {
    cy.get('#footer').should('be.visible')
  })
})

另一个重大变化是不再需要任何WebDriver定义。Cypress 负责打开和关闭浏览器，无需任何显式提示，这与Selenium不同。任何用于定义WebDriver的代码现在都已过时。

 WebDriver driver = new ChromeDriver();

 WebDriverWait wait = new WebDriverWait(driver, 10);

 driver.quit();

接下来是替换所有可能的操作。以下代码在Selenium框架中相当标准。

wait.until(EC.element_to_be_clickable((By.ID, "myButton"))).click()

将这段代码更改为在Cypress框架中工作相当容易。甚至可以通过查找和替换完成。在Cypress中，命令如下：

cy.get('#myButton').click()

在Selenium中使用的任何等待功能在Cypress中不再需要。此功能已内置。

下一个关键部分是迁移断言。我们都同意断言对测试自动化框架至关重要。下一段代码是一个Python Selenium断言，用于验证按钮是否可见。虽然可以添加第三方库，但Cypress的内置断言可以处理各种情况。

assert driver.find_element(By.ID, "myButton").is_displayed()

在Cypress中，相同的命令是：

cy.get('#myButton').should('be.visible')

考虑到Cypress的简单明了语法，转移所有选择器可能需要最长的时间。虽然复制和粘贴选择器绝对是一个选项，但可能需要重写选择器以符合最佳实践。

多标签页

当需要在Cypress中与多个浏览器标签页交互时，官方提供了一个插件来实现这一目标。Puppeteer插件利用Puppeteer的浏览器API，在Cypress中通过一个命令实现。

文件上传

由于Selenium无法与文件上传对话框交互，它提供了一种无需打开对话框即可上传文件的方式。Cypress通过内置的.selectFile()命令支持文件上传。有许多选项可用于上传单个文件、多个文件，甚至在Cypress中拖放文件。

GraphQL

鉴于GraphQL的日益突出，社区也做出了相应反应。使用Cypress的原生拦截功能完全可以验证GraphQL请求或响应的内容。此插件增强了拦截功能的稳定性和可用性：Shopify/cypress-graphql

使用Cucumber迁移测试用例

如果您当前使用的是Cucumber框架，这个Cypress插件可以帮助您顺利过渡。虽然它改变了传统的describe和it功能，但调整过程应该相对简单。

主要区别在于，不是将整个流程放入单个it部分，而是将不同的步骤放入类似it的部分，其中it被标准的Gherkin语法替换。

第一个片段是纯Cypress代码，而第二个片段展示了Cucumber版本。

it("I should see a search bar", () => {
  cy.visit("https://www.duckduckgo.com");
  cy.get("input").should(
    "have.attr",
    "placeholder",
    "Search the web without being tracked"
  )

import { When, Then } from '@badeball/cypress-cucumber-preprocessor'

When('I visit duckduckgo.com', () => {
  cy.visit('https://www.duckduckgo.com')
})

Then('I should see a search bar', () => {
  cy.get('input').should(
    'have.attr',
    'placeholder',
    'Search the web without being tracked'
  )
})

显然，实际的代码或逻辑没有变化。区别在于规范文件的结构和框架的架构。

与CI/CD流水线集成

与当前流水线集成

Cypress可以通过其无头运行器集成到任何流水线技术中。此无头运行器利用Electron浏览器，确保对当前CI/CD的最小适应。鉴于Docker在大多数流水线中的广泛使用，Cypress流水线也不例外。通过使用Node.js Docker镜像或Cypress通过Docker Hub提供的镜像，集成变得轻而易举。这些Docker镜像不仅由Cypress提供，还包括各种版本的Chrome、Firefox和Edge。

执行以下命令将启动针对Electron浏览器的无头运行。完成后，将生成一个简洁的表格，详细说明每个'cy.js'文件的测试数量，以及失败、跳过和通过的测试及其运行时间。表格底部将显示运行的测试总数、运行持续时间以及失败、通过和跳过的测试数量。

npm

npx cypress run

yarn

yarn cypress run

pnpm

pnpm cypress run

这将完全替换当前CI/CD工作流中的Selenium步骤。

了解更多关于在持续集成中运行Cypress测试。

Cypress Cloud

Cypress和Selenium在集成方面的显著区别在于讨论 Cypress Cloud时，这是一个基于开源应用程序中测试运行的丰富结果数据构建的服务。

Cypress.io提供了其量身定制的流水线结构，精心设计以高效执行测试。 伴随这一结构的是一些高级功能，值得在迁移到Cypress时关注。虽然可以在没有Cypress Cloud的情况下利用迁移的所有优势，但不探索其功能带来的潜在好处将是疏忽。

一些核心功能包括：

测试回放

无头测试故障排除的主要困难之一是在本地环境中重现CI中的故障以进行调试。Cypress Cloud通过测试回放解决了这一问题。测试回放的交互式界面允许更快地调试，使您的团队能够通过被测应用程序的时间旅行快速识别和解决CI中出现的问题。这消除了在本地重现CI问题的需要，使您能够迅速回到为用户提供有价值的软件。通过检查被测应用程序的DOM、网络事件和控制台日志，可以准确了解导致崩溃或故障的事件。

并行化

为了进一步提高测试效率，Cypress Cloud提供了内置的测试并行化解决方案。通过简单的切换，测试可以并行运行，无需复杂配置即可并发运行测试。

Cypress将根据我们的平衡策略将每个规范文件分配给可用机器。由于这种平衡策略，并行化时规范文件的运行顺序不保证。

分析与报告

流水线集成的最后一步是报告结果。虽然大多数流水线可以报告是否有失败，但精确的数字需要更多配置。显示报告的最受欢迎插件之一是mochawesome(cypress-mochawesome-reporter)。此插件可以轻松集成到大多数流水线基础设施中，配合正确的CI/CD插件。

但即使没有mochawesome包，任何流水线基础设施都可以注册错误代码（错误代码1）如果有测试失败。一旦发现此错误代码，Webhook可以在您选择的媒介中触发通知。

Cypress Cloud还可以作为自动化流水线集成，提供内置的分析和报告功能。此功能使您能够查看运行持续时间、不稳定测试和性能最慢的测试等指标，从而全面监控大规模测试的健康状况。此外，这消除了添加另一个包或依赖的必要性，因为Cypress Cloud与测试无缝交互。

结论

在本迁移指南中，我们深入探讨了各种主题。从简要概述两种测试框架的优势和局限开始，我们提倡了迁移的可行性，并深入探讨了启动迁移前的关键设计考虑因素。

随后，我们讨论了迁移过程的初始步骤以及优先迁移哪些测试。认识到迁移过程本身的重要性，我们关注了各种实现方式，并确定了可以丰富Cypress体验的插件。

欢迎来到流畅测试的世界！

Cypress不仅与Selenium等成熟框架有效竞争，还引入了一系列增强功能。这些增强功能包括更简单的设置和维护，以及显著的生活质量改进。最小化的不稳定性和简化的编程体验使Cypress成为被数千个开发和测试团队采用的首选测试自动化框架。

传统上，迁移被视为昂贵且耗时的努力。我们希望本指南已缓解这些担忧。迁移过程不仅简单，而且承诺提供更稳定和高效的框架，在长期内带来显著好处。