Cypress - 元素查找及其操作（与 Selenium 对比）

一. 元素查找 - 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()
submit	提交表单	cy.get('.ant-form').submit()
dblclick	元素双击	cy.get('.ant-btn').dblclick()
rightclick	元素右击	cy.get('.ant-btn').rightclick()
select	对 <select> 元素选择	cy.get('.ant-select').select('apples')
check	勾选 checkbox	cy.get('.ant-checkbox').check()
uncheck	反选 checkbox	cy.get('.ant-checkbox').uncheck()
scrollIntoView	如果某个元素不在当前可视范围，可以滑动至可视范围	cy.get('#id').scrollIntoView()
scrollTo	指定位置滑动	cy.scrollTo('bottom') cy.get('#id').scrollTo(250, 250)