零、前言

Cypress 是一个 JavaScript 自动化测试框架,创建它的唯一目的是执行前端测试。Cypress 擅长重新发明如何进行测试,尤其是对现代网络而言。与其他测试框架(如 Selenium WebDriver)不同,Cypress 在浏览器中运行时要快得多,并且与其他测试框架相比,它的学习曲线也更低。

使用前端应用的开发人员将能够将他们的知识用于本实用指南,并发展他们在端到端测试中的技能。这本书采取了一种实践的方法来实现和相关的方法,这将使你立即启动和运行,并富有成效。

这本书是给谁的

这本书是为测试专业人员、软件和网络测试人员以及网络开发人员编写的,他们精通 JavaScript,可能熟悉也可能不熟悉自动化测试的概念。前三章提供了一个快速入门指南,将帮助您熟悉 Cypress 如何工作,以及如果您是一个完整的 Cypress 新手,如何开始。如果你是一名硒测试人员,想迁移到 Cypress 并揭示其功能,你会发现这本书非常有用。需要对网络测试和 JavaScript 有很好的理解。

这本书涵盖了什么

第一章安装设置 Cypress,带你了解 Cypress 入门的要领,包括 Cypress 包的安装、默认配置、设置的定制。在本章中,您将了解 Cypress 的工作原理、它需要运行哪些模块、测试文件命名建议以及如何开始使用 Cypress。了解 Cypress 的工作方式将确保您能够掌握 Cypress 的内部工作方式,并能够在充分了解 Cypress 框架结构的情况下自行安装和设置后续项目。

第二章Selenium WebDriver 与 Cypress 的区别是我们将探讨 Cypress 与 Selenium WebDriver 有何不同的地方,并重点介绍选择 Cypress 进行端到端测试的一些利弊。在本章中,我们还将探讨使 Cypress 比硒更适合测试的元素,以及用户如何扩展其功能。

第三章使用 Cypress 命令行工具,向您展示了可以用来执行 Cypress 命令的不同 Cypress 命令。本章将解释如何运行命令,以及如何使用 Cypress 命令调试应用。

第四章写你的初试,会看到你用 Cypress 写你的初试。我们将从一个通过的测试开始,检查一切是否正常工作,然后进行一个失败的测试,然后我们将看到 Cypress 的行为以及自动重新加载功能是如何工作的。在本章的第二部分,我们将重点关注更高级的场景,让您了解如何正确编写 Cypress 测试。

第五章调试 Cypress 测试,深入探讨 Cypress 为帮助调试应用而包含的不同类型的工具。使用 Cypress 的调试工具,您将学习如何返回到每个命令的快照,查看执行过程中发生的不同页面事件,并可视化不同的命令以及元素被隐藏和发现的时间。您还将学习如何在命令快照之间向前和向后步进,以及如何以迭代方式暂停和步进命令快照。

第六章使用 TDD 方法编写 Cypress 测试,向您介绍测试驱动开发 ( TDD )概念,以及如何将其应用于编写 Cypress 测试。您将学习如何使用 TDD 方法编写测试,并深入研究如何在尚未开发的应用中实际应用 TDD。

第七章了解 Cypress 中的元素交互,涵盖了如何与 DOM 中的各种元素交互。本章还将教您如何与动画交互,如何将鼠标悬停在元素上,以及如何检查元素是否被禁用。到本章结束时,您将可以轻松地浏览 DOM 元素并编写有意义的元素测试。

第八章了解 Cypress 中的变量和别名,探索如何通过别名的使用来处理异步命令。我们还将确定通过使用别名来简化测试的方法。最后,我们将确定如何在路由和请求中使用别名。

第九章Cypress 测试跑者的高级用法,看如何利用 Cypress 测试跑者写出更好的测试。我们的重点将放在仪表板和选择器操场上。我们将学习如何使用仪表板来理解间谍和存根的概念,以及 Cypress 如何解释它们。

第 10 章练习–导航和网络请求,向您展示旨在练习如何使用和进行网络请求导航的实例和练习。该练习还将结合别名和变量使用等概念,以确保您能够将本书第二部分中学习的不同概念联系起来。

第 11 章练习–清除和监视 XHR 请求,了解什么是 XHR 请求,以及 Cypress 如何帮助清除耗时过长或接收响应复杂的请求。Cypress stubbing 对于确保实现的测试不脆弱以及我们可以有自定义响应而不是等待来自请求的服务器响应非常重要。

第十二章Cypress 的视觉测试,讲述视觉测试在 Cypress 是如何工作的。我们将探讨什么是视觉测试,不同类型的测试,以及视觉测试对现代网络的重要性。我们还将研究视口以及它们如何影响视觉测试的过程,最后研究视觉测试自动化工具,如 Applitools 和 Percy,我们可以使用它们来进行视觉验证。

为了充分利用这本书

您将需要对 JavaScript 有所了解,并且需要在您的机器上安装 Node.js 以及 Shane 和 npm 包管理器。所有给出的代码示例都已经在 macOS 上测试过了,应该也可以在所有 Linux 操作系统上正常工作。对于 Windows 操作系统,特别是最后三章,请阅读标注框中的附加注释,在技术要求部分中,关于如何在 Windows 上运行命令。在撰写本文时,所有示例都已经过 Cypress 6 . 2 . 1 版本的测试。

重要说明

在出版时,这本书是用 Cypress 6 . 2 . 1 版本编写的,有些功能可能已经被破坏或弃用。请查看我们的 GitHub 存储库,了解最新的代码更新和更改。

如果您正在使用本书的数字版本,我们建议您自己键入代码或通过 GitHub 存储库访问代码(下一节中提供了链接)。这样做将帮助您避免任何与复制和粘贴代码相关的潜在错误。

经常尝试练习;它们不仅仅是为了好玩,而是为了帮助你学习和掌握章节内容而精心制作的。

下载示例代码文件

你可以从你在www.packt.com的账户下载这本书的示例代码文件。如果您在其他地方购买了这本书,您可以访问www.packtpub.com/support并注册将文件直接通过电子邮件发送给您。

您可以按照以下步骤下载代码文件:

  1. 登录或注册www.packt.com
  2. 选择支持选项卡。
  3. 点击代码下载
  4. 搜索框中输入图书名称,并按照屏幕指示进行操作。

下载文件后,请确保使用最新版本的解压缩文件夹:

  • 视窗系统的 WinRAR/7-Zip
  • zipeg/izp/un ARX for MAC
  • 适用于 Linux 的 7-Zip/PeaZip

这本书的代码包也托管在 GitHub 上,网址为。如果代码有更新,它将在现有的 GitHub 存储库中更新。

我们还有来自 https://github.com/PacktPublishing/丰富的书籍和视频目录的其他代码包。看看他们!

使用的约定

本书通篇使用了许多文本约定。

Code in text:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟网址、用户输入和推特句柄。这里有一个例子:“命令cy.intercept()监听 XHR 的响应,并知道 Cypress 何时返回了对特定 XHR 请求的响应。”

代码块设置如下:

it('can wait for a comment response', () => {
      cy.request('https://jsonplaceholder.cypress.io/comments/6')
    .as('sixthComment');
      cy.get('@sixthComment').should((response) => {
        expect(response.body.id).to.eq(6)
    });
 });

任何命令行输入或输出都编写如下:

npm run cypress:open 

粗体:表示一个新的术语、一个重要的单词或者你在屏幕上看到的单词。例如,菜单或对话框中的单词像这样出现在文本中。这里有一个例子:“为此,在浏览器中打开浏览器控制台,点击网络选项卡,然后选择 XHR 过滤器选项。”

提示或重要注意事项

像这样出现。

取得联系

我们随时欢迎读者的反馈。

一般反馈:如果你对这本书的任何方面有疑问,在你留言的主题中提到书名,发邮件给 z。

勘误表:虽然我们已经尽了最大的努力来保证内容的准确性,但是错误还是会发生。如果你在这本书里发现了一个错误,如果你能向我们报告,我们将不胜感激。请访问www.packtpub.com/support/errata,选择您的图书,点击勘误表提交链接,并输入详细信息。

盗版:如果您在互联网上遇到任何形式的我们作品的非法拷贝,如果您能提供我们的位置地址或网站名称,我们将不胜感激。请联系我们在copyright@packt.com与材料的链接。

如果你有兴趣成为一名作者:如果有一个你有专长的话题,你有兴趣写或者投稿一本书,请访问authors.packtpub.com

评论

请留下评论。一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢?然后,潜在的读者可以看到并使用您不带偏见的意见来做出购买决定,我们在 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们的书的反馈。谢谢大家!

更多关于 Packt 的信息,请访问packt.com