Cypress 是一个前端自动化测试工具，它提供了简单易用的 API，可用于编写端到端测试（E2E）和集成测试。在这篇文章中，我们将介绍如何使用 Cypress 测试为实时数据源的 UI。
为什么需要测试实时数据源的 UI？
在现代 web 应用中，很少有应用是不依赖于实时数据源的。例如，当我们使用在线购物平台时，平台显示的产品价格和库存量随时更新。因此，在测试 UI 时，需要确保对实时数据源的正确性和稳定性进行测试，以防止用户在应用中遇到错误或不一致的数据。
当应用启动后，实时数据源的更新通常是由后端服务或外部服务驱动的，而前端 UI 只是从这些服务中获取数据并呈现给用户。这意味着在测试 UI 时，我们需要模拟或拦截与实时数据源的通信，并检查 UI 的正确性。
Cypress 的基础知识
在开始测试前，我们需要对 Cypress 的一些基础知识有清晰的理解。以下是几个基本概念：
测试文件
Cypress 测试文件以 .spec.js 或 .spec.ts 结尾。例如，如果您想编写名为 example.ts 的测试文件，则应该将它命名为 example.spec.ts。
测试套件和测试用例
测试文件可以包括一个或多个测试套件（describe 块），每个测试套件包括一个或多个测试用例（it 块）。测试套件和测试用例通常是根据功能和场景来组织的。例如，一个测试套件可以包含所有购物车相关的测试用例。
页面对象模式
在测试 UI 时，我们经常需要访问页面元素（例如按钮、文本框和下拉菜单）。将页面对象封装为单独的对象是一种常用的最佳实践。这种方式被称为“页面对象模式”。
断言
在 Cypress 中，断言用于检查预期结果是否与实际结果相一致。Cypress 提供了丰富的断言库，包括 expect 和 should。例如，以下代码断言页面的标题是否为“Welcome to Cypress!”：
cy.title().should('eq', 'Welcome to Cypress!')如何测试实时数据源的 UI
我们将使用以下示例应用程序作为约束条件。该应用程序有一个借书服务，用户可以从中借阅书籍，该服务的 API 由第三方供应商提供。为了测试我们的应用程序，我们需要模拟 API 调用，并测试 UI 的正确性。
步骤 1：创建页面对象
我们将首先创建一个页面对象，该对象管理应用程序页面上的所有元素。在这种情况下，我们将创建 BookServicePage 页面对象，如下所示：
-- -------------------- ---- -------
-- --------------------
------ ----- --------------- -
------ -
-------------
-
--- ------- -
------ ----------------
-
--- ------- -
------ ----------------
-
----------------- ------- -
------ ----------------------------------
-
-这个页面对象具有三个方法：open()、borrowBook(title: string) 和两个属性 title 和 books。open() 方法将打开书籍服务页面，title 属性将返回页面的标题，books 属性将返回书籍列表的元素。borrowBook(title: string) 将以指定的书籍标题借阅书籍。
步骤 2：编写测试套件和用例
现在我们将编写一个测试套件，它包括两个测试用例：一个测试用例用于检查书籍列表是否显示正确；另一个用例测试用户是否可以成功借阅一本书。在这种情况下，由于应用程序的 API 是由第三方供应商提供的，我们将使用 Cypress 的 cy.intercept() 命令模拟 API 调用。
-- -------------------- ---- -------
-- --------------------
-------------- --------- -- -- -
----- --------------- - --- -----------------
------------- -- -
--------------------------------------------- - -------- ------------ -----------------
----------------------
--------------------
--
------------ ------- -- -- -
----- ------ - ------ ---- --- ------ ------ --- ----------- --- ---- - -------------
------------------------------------------
------------------------------------------
---------------------- -- -
----------------------------------------------------------
--
--
----------- - ------ -- -- -
----- ----- - ----- ---- --- -----
---------------------------------
---------------------------------------------------------
--
--beforeEach() 块首先通过调用 cy.intercept() 命令来模拟从 API 获取数据的请求。as('getBooks') 用于为拦截器指定名称，这是为了在后面的测试中等待我们的拦截器。
it('Displays books', ...) 使用 Cypress 的断言库，检查页面是否正确地显示了书籍列表。
在 it('Borrows a book', ...) 中，我们模拟用户在页面上选择 Gone with the Wind 这本书并借阅它。然后，我们检查页面上是否不再显示这本书。
步骤 3：运行测试
现在我们运行 Cypress 并查看测试结果。在终端中使输入以下命令启动 Cypress：
npm run cypress:open
选择 book-service.spec.ts，并单击运行按钮。在测试运行结束后，我们可以查看测试结果，并检查测试是否能够通过。
结论
在这篇文章中，我们介绍了如何使用 Cypress 测试为实时数据源的 UI。我们学习了如何编写页面对象、测试用例和测试套件以及如何模拟 API 调用。通过编写端到端测试，我们可以验证用户界面是否正确地反映了实时数据源的状态，从而确保 web 应用程序的稳定性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773cd9c6d66e0f9aae7cf80