Cypress 是一个基于 JavaScript 的前端自动化测试工具，它提供了丰富的 API，可以帮助开发者轻松地编写测试用例。在测试过程中，经常需要对 DOM 元素进行操作，本文将详细介绍 Cypress 的 DOM 操作 API。
安装 Cypress
在使用 Cypress 之前，需要先安装它。可以使用 npm 命令进行安装：
npm install cypress --save-dev
安装完成后，可以使用 npx cypress open 命令打开 Cypress 的图形界面。
获取 DOM 元素
在 Cypress 中，获取 DOM 元素的方法有多种。下面介绍其中几种常用的方法。
cy.get()
cy.get() 是 Cypress 中最常用的获取 DOM 元素的方法。它可以通过 CSS 选择器、类名、标签名等方式获取元素。例如：
cy.get('.my-class') // 通过类名获取元素
cy.get('#my-id') // 通过 ID 获取元素
cy.get('input[type="text"]') // 通过属性选择器获取元素
cy.get('button') // 通过标签名获取元素在获取元素后，可以使用 Cypress 的其他 API 对元素进行操作。
cy.contains()
cy.contains() 可以通过元素的文本内容查找元素。例如：
cy.contains('Submit') // 查找文本内容为 Submit 的元素
cy.contains('button', 'Submit') // 查找标签名为 button，文本内容为 Submit 的元素cy.findBy()
cy.findBy() 是 Cypress 6.0 新增的 API，它可以通过类名、标签名等方式获取元素。与 cy.get() 不同的是，cy.findBy() 会等待元素出现，直到超时或找到元素为止。例如：
cy.findBy('.my-class') // 通过类名获取元素
cy.findBy('button') // 通过标签名获取元素操作 DOM 元素
在获取 DOM 元素之后，可以使用 Cypress 的 API 对元素进行操作。下面介绍几种常用的操作方法。
cy.click()
cy.click() 可以模拟用户的点击操作。例如：
cy.get('button').click() // 点击按钮cy.type()
cy.type() 可以模拟用户的输入操作。例如：
cy.get('input[type="text"]').type('hello world') // 输入文本cy.clear()
cy.clear() 可以清空输入框中的文本。例如：
cy.get('input[type="text"]').clear() // 清空输入框cy.select()
cy.select() 可以选择下拉框中的选项。例如：
cy.get('select').select('option1') // 选择下拉框中的第一个选项cy.check()
cy.check() 可以勾选复选框或单选框。例如：
cy.get('input[type="checkbox"]').check() // 勾选复选框
cy.get('input[type="radio"]').check() // 勾选单选框cy.uncheck()
cy.uncheck() 可以取消勾选复选框。例如：
cy.get('input[type="checkbox"]').uncheck() // 取消勾选复选框cy.trigger()
cy.trigger() 可以触发元素的事件。例如：
cy.get('button').trigger('mouseover') // 触发鼠标悬停事件示例代码
下面是一个使用 Cypress 对百度搜索进行测试的示例代码：
describe('Baidu Search', () => {
it('should search for Cypress', () => {
cy.visit('https://www.baidu.com')
cy.get('#kw').type('Cypress')
cy.get('#su').click()
cy.contains('Cypress - JavaScript End to End Testing Framework').should('be.visible')
})
})在这个测试用例中，首先访问百度搜索页面，然后在搜索框中输入 Cypress，点击搜索按钮。最后断言页面是否包含 Cypress 的相关信息。
总结
本文介绍了 Cypress 的 DOM 操作 API，包括获取元素和操作元素的方法，并提供了示例代码。通过学习本文，读者可以更加深入地了解 Cypress 的使用方法，提高前端自动化测试的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6607af95d10417a2226476a8