Cypress 是一款流行的前端自动化测试工具，它的特点是易于使用、快速、可靠，并且具有良好的文档和社区支持。在进行 UI 自动化测试时，Cypress 可以帮助我们快速地进行页面元素的交互和断言。本文将介绍利用 Cypress 实现 UI 自动化测试的五个技巧。
技巧一：使用 cy.get() 获取元素
在 Cypress 中，使用 cy.get() 方法可以获取页面中的元素，并进行交互和断言。例如，要获取一个按钮并点击它，可以使用以下代码：
------------------------
其中，button 是要获取的元素的选择器。cy.get() 方法还可以接受其他参数，例如 cy.get('.my-class')，表示获取类名为 my-class 的元素。
技巧二：使用 cy.contains() 获取包含文本的元素
有时候需要获取包含特定文本的元素，可以使用 cy.contains() 方法。例如，要获取一个包含“提交”文本的按钮并点击它，可以使用以下代码：
-------------------------
其中，提交 是要包含的文本。
技巧三：使用 cy.wait() 控制测试的等待时间
在进行 UI 自动化测试时，有些操作可能需要等待页面加载或响应完成。可以使用 cy.wait() 方法来控制测试的等待时间。例如，要等待 3 秒钟后再进行下一步操作，可以使用以下代码：
-------------
其中，3000 是等待的毫秒数。
技巧四：使用 cy.url() 获取当前页面的 URL
有时候需要获取当前页面的 URL，可以使用 cy.url() 方法。例如，要断言当前页面的 URL 是否包含特定字符串，可以使用以下代码：
-------------------------- ---------
其中，/login 是要包含的字符串。
技巧五：使用 cy.get().should() 进行元素的断言
在进行 UI 自动化测试时，需要对页面中的元素进行断言。可以使用 cy.get().should() 方法来进行元素的断言。例如，要断言一个输入框的值是否为“hello”，可以使用以下代码：
------------------------------------ --------
其中，input 是要断言的元素的选择器，have.value 表示要断言元素的值是否为指定的值。
示例代码
以下是一个使用 Cypress 实现 UI 自动化测试的示例代码：
------------------ -- -- -
---------- -- -- -
------------------
----------------------------------------------
-------------------------------------------------
-------------------------
-------------------------- -------------
--------------------------
--
---------- -- -- -
------------------
----------------------------------------------
------------------------------------------------------
-------------------------
-----------------------
--
--以上代码测试了登录功能的成功和失败两种情况。在测试中，先访问登录页面，然后输入用户名和密码，点击登录按钮，最后进行断言。如果测试通过，则控制台将输出绿色的“✓”符号，否则将输出红色的“×”符号，并给出错误信息。
总结
本文介绍了利用 Cypress 实现 UI 自动化测试的五个技巧，包括使用 cy.get() 获取元素、使用 cy.contains() 获取包含文本的元素、使用 cy.wait() 控制测试的等待时间、使用 cy.url() 获取当前页面的 URL，以及使用 cy.get().should() 进行元素的断言。希望这些技巧能够帮助你更好地进行 UI 自动化测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650b13c195b1f8cacd55a413