一. 元素查找 - get
1. get 相当于 selenium 中的 find_element_by_css & find_elements_by_css
2. css 的所有 selector 均可以放在 get里查找
3. 示例：
| 描述 | 在 Cypress 中的使用(单个/多个元素) | 在 Selenium 中的使用(单个元素) | 在 Selenium 中的使用(多个元素) |
| 根据元素 id 查找 | cy.get('#id') | driver.find_element_by_id("id") | driver.find_elements_by_id("id") |
| 根据元素名称查找 | cy.get('div[name="ele-name"]') | driver.find_element_by_name("ele-name") | driver.find_elements_by_name("ele-name") |
| 根据元素的类名查找 | cy.get('.class-name') | driver.find_element_by_class_name("class-name") | driver.find_elements_by_class_name("class-name") |
| 根据css selector查找 | cy.get('div[key="value"]') | driver.find_element_by_css_selector("div[key='value']") | driver.find_element_by_css_selector("div[key='value']") |
| 根据 xpath 查找 | 需要安装插件：https://github.com/cypress-io/cypress-xpath | driver.find_element_by_xpath("//div[@key='value']") | driver.find_element_by_xpath("//*div[@key='value']") |
二. 元素查找 - contains
1. contains 是查找包含文字内容的 DOM 元素
2. contains 相当于 selenium 中的 driver.find_element_by_xpath("//*[contains(text(),'value')]")，但更强大
3. 示例：
| 描述 | 在 Cypress 中的使用(单个/多个元素) | 在 Selenium 中的使用(单个元素) | 在 Selenium 中的使用(多个元素) |
| 根据元素文本查找 | cy.contains('value') | driver.find_element_by_xpath("//*[contains(text(),'value')]") | driver.find_elements_by_xpath("//*[contains(text(),'value')]") |
| 根据元素属性及其文本查找 | cy.get('div[name="ele-name"]').contains('value') | driver.find_element_by_xpath("//div[@name='ele-name'][contains(text(),'value')]") | driver.find_elements_by_xpath("//div[@name='ele-name'][contains(text(),'value')]") |
| 使用正则匹配元素文本以查找 |
cy.get('.class-name')
.contains(/[0-9]*/)
|
三. 元素操作 - type
1. type 相当于 selenium 的 send_keys
2. type 也可以按键盘
3. 示例：
| 描述 | 在 Cypress 中的使用 | 在 Selenium 中的使用 |
| 向 DOM 元素输入内容 | cy.get('#input_id').type('输入的内容') | driver.find_element_by_id("input_id").send_keys("输入的内容") |
| 按下 Enter 键 | cy.get('#id').type('{enter}') | driver.find_element_by_id("id").send_keys(Keys.ENTER) |
| 组合键 | cy.get('#id').type('{control}a') | driver.find_element_by_id("id")..send_keys(Keys.CONTROL + 'a') |
四. 元素操作 - click
1. click 相当于 selenium 的 click
2. click 支持点击元素的位置，也支持根据坐标点击
3. click 支持同时点击多个元素
| 描述 | 在 Cypress 中的使用 | 在 Selenium 中的使用 |
| 点击 DOM 元素 | cy.get('#id').click() / cy.get('#id').click('center') | driver.find_element_by_id("id").click() |
| 点击 DOM 元素其他位置 | cy.get('#id').click('topLeft') / cy.get('#id').click(80,75) | -- |
| 点击多个元素（不建议） |
cy.get('#ids').click({ multiple: true })
|
-- |
五. 元素操作 - 强制操作
（UI 测试不建议）
当元素是不可见 (disvisible) 或不可用 (disable) 时，在 selenium 中为了对其操作需要使用 JS 修改元素属性，在 Cypress 中可通过添加参数修改。
| 描述 | 在 Cypress 中的使用（会报错） | 在 Cypress 中的使用（不会报错，正常往下跑） | 在 Selenium 中的使用 |
| input 元素 e1 是不可用 (disable) | cy.get('#e1').type("输入的内容") | cy.get('#e1').type("输入的内容", { force: true }) | driver.execute_script("arguments[0].value="输入的内容"",driver.findElement_by_id("#e1"))) |
| button 元素 e2 是不可见 (disvisible) | cy.get('#e2').click() | cy.get('#e2').click({ force: true }) |
userName = driver.find_element_by_xpath("#e2") driver.execute_script("arguments[0].click();", userName) |
六. 元素操作 - 其他
| API | 描述 | 在 Cypress 中的使用 |
| clear
|
清空 input 或 textarea 的内容 |
cy.get('.ant-input').clear()
|
| 提交表单 | cy.get('.ant-form').submit() | |
| 元素双击 | cy.get('.ant-btn').dblclick() | |
| 元素右击 | cy.get('.ant-btn').rightclick() | |
| 对 <select> 元素选择 |
cy.get('.ant-select').select('apples')
|
|
| 勾选 checkbox | cy.get('.ant-checkbox').check() | |
| 反选 checkbox | cy.get('.ant-checkbox').uncheck() | |
| 如果某个元素不在当前可视范围，可以滑动至可视范围 |
cy.get('#id').scrollIntoView()
|
|
| 指定位置滑动 |
cy.scrollTo('bottom')
cy.get('#id').scrollTo(250, 250)
|