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