Cypress - 元素查找及其操作
Posted fayez
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cypress - 元素查找及其操作相关的知识，希望对你有一定的参考价值。
一. 元素查找 - 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]*/)
|
以上是关于Cypress - 元素查找及其操作的主要内容，如果未能解决你的问题，请参考以下文章