Cypress web自動化7-連接器connectors

前言

關於web頁面上的選項，通常我們需要斷言選項的個數，遍歷每個選項的內容.

.each()

<ul class="connectors-each-ul">
              <li data-cypress-el="true">Lara Williams</li>
              <li data-cypress-el="true">William Grey</li>
              <li data-cypress-el="true">Monica Pharrel</li>
            </ul>

cy.get('.connectors-each-ul>li')
  .each(function($el, index, $list){
    console.log($el, index, $list)
  })

.its()

判斷選項里面元素個數

<ul class="connectors-its-ul">
              <li>Chai</li>
              <li>Chai-jQuery</li>
              <li>Chai-Sinon</li>
            </ul>

cy.get('.connectors-its-ul>li')
  // calls the 'length' property returning that value
  .its('length')
  .should('be.gt', 2)

.invoke()

隱藏元素判斷

<div class="well">
            <div class="connectors-div" style="display: none;">
              This is a div
            </div>
          </div>

定位隱藏元素，對異常隱藏的判斷

cy.get('.connectors-div').should('be.hidden')
  // call the jquery method 'show' on the 'div.container'
  .invoke('show')
  .should('be.visible')

.spread()

遍歷 arr 依次斷言

const arr = ['foo', 'bar', 'baz']

cy.wrap(arr).spread(function(foo, bar, baz){
  expect(foo).to.eq('foo')
  expect(bar).to.eq('bar')
  expect(baz).to.eq('baz')
})

.then()

要使用當前主題調用回調函數，請使用.then（）命令。

cy.get('.connectors-list>li').then(function($lis){
  expect($lis).to.have.length(3)
  expect($lis.eq(0)).to.contain('Walk the dog')
  expect($lis.eq(1)).to.contain('Feed the cat')
  expect($lis.eq(2)).to.contain('Write JavaScript')
})

如果回調函數返回一個值，它將被生成到下一個回調，就像在 Promise 回調中一樣。

cy.wrap(1)
  .then((num) => {
    expect(num).to.equal(1)

    return 2
  })
  .then((num) => {
    expect(num).to.equal(2)
  })

但與 Promise 不同的是，如果返回未定義的值，則傳遞給.then（cb）的原始值將被傳遞給下一個回調。

cy.wrap(1)
  .then((num) => {
    expect(num).to.equal(1)
    // note that nothing is returned from this callback
  })
  .then((num) => {
    // this callback receives the original unchanged value 1
    expect(num).to.equal(1)
  })

如果.then（cb）回調中有Cypress命令，則最后一個命令生成的值將傳遞給下一個回調。

cy.wrap(1)
  .then((num) => {
    expect(num).to.equal(1)
    // note how we run a Cypress command
    // the result yielded by this Cypress command
    // will be passed to the second ".then"
    cy.wrap(2)
  })
  .then((num) => {
    // this callback receives the value yielded by "cy.wrap(2)"
    expect(num).to.equal(2)
  })