一. 元素查找 - 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)
|