Cypress：如何测试 SPAs 中的 loading 状态？
在现代 Web 应用程序中，很少有什么能比页面加载更重要的事情了。加载时间会影响到用户满意度，甚至是搜索引擎排名。然而，在 SPA 中，如何测试加载状态可能会成为一个挑战，特别是在应用程序中存在动态加载逻辑的情况下。在这篇文章中，我们将介绍 Cypress 如何测试 SPA 中的加载状态，并提供了一些示例代码。
- 安装 Cypress
如果你还没有安装 Cypress ，首先需要安装 Cypress 。你可以在终端中运行以下命令进行安装：
npm install cypress --save-dev
- 配置 Cypress
Cypress 允许你在测试用例运行时执行 JavaScript 。这意味着你可以在测试用例中使用 Node.js，因此只需创建一个 Node.js 文件，并在 Cypress 中使用它即可。要在 Cypress 中使用 Node.js 文件，请将以下代码添加到 cypress/plugins/index.js 文件中：
-- -------------------- ---- -------
----- - -------------- - - ---------------------------------------
----- ------------- - -----------------------------------
-------------- - ---- ------- -- -
---------------------- --------- -- -
------ ----------------
--------
--------------
---
---
------ -------
--- 编写测试用例
在测试用例中，我们需要创建一个名为“cy.waitUntil”（等待直到）的自定义命令，该命令将等待直到页面的属性为“data-loaded”时，即页面加载完成，返回 true 。
-- -------------------- ---- -------
--------------------------------- ---- -- -
-------------------------
------ --
--------- ------
---------- ----- -- -
------ -----
--
-------------------------------
-----------
-------- -- -
--------------
----------------
-------- -- -
------ -----
---
--
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
--------------------
---该命令将在测试中使用，等待页面加载完成。您可以使用它来测试您的 SPA 是否按预期加载并呈现内容。
describe('Test SPA loading status', () => {
it('should wait until the page is fully loaded', () => {
cy.visit('http://localhost:8888');
cy.waitUntil(() => {
return cy.get('.content').should('exist');
});
});
});上述代码中，“cy.visit”命令将进入您的 SPA ，在进入完后等待页面完全加载，然后执行其他测试代码。
- 总结
使用 Cypress ，您可以轻松地测试 SPA 中的加载状态。通过该自定义命令，“cy.waitUntil”可以等待到页面完全加载，测试您的 SPA 是否按预期加载并呈现内容。请尝试使用 Cypress 并编写测试用例来验证您的 SPA 是否符合您的预期。
代码示例：
-- -------------------- ---- -------
----- - -------------- - - ---------------------------------------
----- ------------- - -----------------------------------
--------------------------------- ---- -- -
-------------------------
------ --
--------- ------
---------- ----- -- -
------ -----
--
-------------------------------
-----------
-------- -- -
--------------
----------------
-------- -- -
------ -----
---
--
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
-------------------
--------------------
---
-------------- --- ------- -------- -- -- -
---------- ---- ----- --- ---- -- ----- -------- -- -- -
----------------------------------
--------------- -- -
------ -----------------------------------
---
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d76f0968c7c53b0c232c7