一、什么是 @testing-library/cypress？
@testing-library/cypress 是一个 Cypress 的 npm 包，它可以帮助你写出更好的端到端测试。它遵循了 JavaScript 测试库 @testing-library 的设计原则，让你的测试更专注于用户行为而不是实现细节。
同时，@testing-library/cypress 也是开源项目，旨在让用户更容易理解和调试它们的测试用例。
二、安装和配置
首先，你需要安装 Cypress：
--- ------- ------- ----------
然后，你可以安装 @testing-library/cypress：
--- ------- ------------------------ ----------
为了使用它，你需要在你的项目的 cypress/support/commands.js 文件中添加：
------ ---------------------------------------
具体可以参考 @testing-library/cypress 的文档。
三、使用方法
1. getByText
getByText 方法可以通过文本内容查找元素。比如，你想查找一个包含 “Hello, World” 文本的按钮，可以这样写测试用例：
------------ ----- ------ -- -- -
---------- ---- - ------ -- --- ------ -- -- -
--------------------------------------
--------------------------------
-----------------------------------------
--
--2. getByRole
getByRole 方法可以通过元素的角色属性查找元素。比如，你想查找一个 “button” 角色的元素，可以这样写测试用例：
------------ ----- ------ -- -- -
---------- ---- - ------ -- --- ------ -- -- -
--------------------------------------
--------------------------------
-----------------------------------------
--
--3. queryByText
queryByText 方法可以通过文本内容查找元素，但是如果找不到，它不会抛出异常，而是返回 null。比如，你想查找一个不包含 “Hello, World” 文本的按钮，可以这样写测试用例：
------------ ----- ------ -- -- -
---------- --- ---- - ------ -- --- ------ -- -- -
--------------------------------------
----------------------------------
------------------------------------------
--
--4. queryByRole
queryByRole 方法可以通过元素的角色属性查找元素，但是如果找不到，它不会抛出异常，而是返回 null。比如，你想查找一个 “checkbox” 角色的元素，可以这样写测试用例：
------------ ----- ------ -- -- -
---------- --- ---- - -------- -- --- ------ -- -- -
--------------------------------------
----------------------------------
------------------------------------------
--
--四、总结
使用 @testing-library/cypress 可以更有效地编写端到端测试用例，让测试更专注于用户行为而不是实现细节。本文介绍了 @testing-library/cypress 的安装和配置，以及四个常用方法：getByText、getByRole、queryByText 和 queryByRole。通过本文的学习和指导，你可以更好地使用 @testing-library/cypress 编写端到端测试用例。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/testing-the-library-cypress