Cypress - 複選框

---

check 和 uncheck 命令用於操作複選框。在 HTML 程式碼中，複選框具有一個 input 標籤，其 type 屬性的值為 checkbox。

Cypress 命令

與複選框相關的 Cypress 命令如下：

• 用於點選所有複選框的命令如下：

cy.get('input[type="checkbox"]').check()

• 用於點選 id 為 check 的複選框的命令如下：

cy.get('#chk').check()

• 用於點選值為 Cypress 的複選框的命令如下：

cy.get('input[type="checkbox"]').check('Cypress')

• 用於點選值為 Java 和 Python 的複選框的命令如下：

cy.get('input[type="checkbox"]').check(['Java','Python'])

• 用於點選值為 Java 並帶有選項的複選框的命令如下：

cy.get('.chk').check('Java', options)

• 用於點選值為 Java 和 Python 並帶有選項的複選框的命令如下：

cy.get('input[type="checkbox"]').check(['Java','Python'], options)

• 用於點選 class 為 check 並帶有選項的複選框的命令如下：

cy.get('.chk').check({force : true})

• 用於取消選中所有複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck()

• 用於取消選中 id 為 check 的複選框的命令如下：

cy.get('#chk').uncheck()

• 用於取消選中值為 Cypress 的複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck('Cypress')

• 用於取消選中值為 Java 和 Python 的複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'])

• 用於取消選中值為 Java 並帶有選項的複選框的命令如下：

cy.get('.chk').uncheck('Java', options)

• 用於取消選中值為 Java 和 Python 的複選框並帶有選項的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'], options)

• 用於取消選中 class 為 check 並帶有選項的複選框的命令如下：

cy.get('.chk').uncheck({force : true)

Cypress 中的選項

Cypress 中可用的選項如下：

• log – 預設值 – true – 用於開啟/關閉控制檯日誌。

• timeout – 預設值 – defaultCommandTimeout(4000ms) – 用於設定在丟擲錯誤之前的最大等待時間。

• force – 預設值 – false – 用於強制執行操作。

• scrollBehaviour – 預設值 – scrollBehaviour(top) – 用於設定在命令執行前視口滾動到的元素位置。

• waitForAnimations – 預設值 – waitForAnimations(true) – 用於等待元素完成動畫後再執行命令。

• animationDistanceThreshold - 預設值 – animationDistanceThreshold (5) – 用於設定元素應超過的畫素距離才能被視為動畫。

check/uncheck 命令都需要與產生 DOM 元素的命令鏈式呼叫，並且可以對這些命令應用斷言。

Cypress 命令的實現

下面解釋了 Cypress 中命令的實現：

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#/signup")
      //checkbox with assertion
      cy.get('input[type="checkbox"]').check().should('be.checked')
      //identify checkbox with class with assertion
      cy.get('.VfPpkd-muHVFf-bMcfAe').uncheck().should('not.be.checked')
   })
})

執行結果

輸出如下：

以上結果顯示，“顯示密碼”左側的複選框首先使用 check 命令選中（使用斷言 should 驗證）。

然後，它使用 uncheck 命令取消選中（也使用斷言 should 驗證）。