1. 程式人生 > 實用技巧 >Cypress系列(48)- and() 命令詳解

Cypress系列(48)- and() 命令詳解

如果想從頭學起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用

  • 建立一個斷言,斷言將自動重試,直到它們通過或超時
  • 和 should() 一個用法

語法格式

.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)

引數說明

  • chainers:斷言器
  • value:需要斷言的值
  • method:需要呼叫到的方法
  • callbackFn:回撥方法,可以滿足自己想要斷言的內容;且總是返回前一個 cy 命令返回的結果,方法內的 return 是無效的;會一直執行直到裡面沒有斷言

and() 返回的結果

在大多數情況下,.and() 返回與上一個命令相同的結果

cy
  .get('nav')                       // 返回 <nav>
  .should('be.visible')             // 返回 <nav>
  .and('have.class', 'open')        // 返回 <nav>

但是,某些 chainer 會改變返回的結果

cy
  .get('nav')                       // 返回 <nav>
  .should('be.visible')             //
返回 <nav> .and('have.css', 'font-family') // 返回 'sans-serif' .and('match', /serif/) // 返回 'sans-serif'

簡單的栗子

對同一結果操作的栗子(button 元素)

cy.get('button').should('have.class', 'active').and('not.be.disabled')

chainer 改變返回結果的栗子

html 程式碼

  <li>
    <a href="users/123/edit">Edit User</
a> </li>

cypress 程式碼

cy
  .get('a')
  .should('contain', 'Edit User') // 返回的是 <a>
  .and('have.attr', 'href')       // 返回的是 href 的值
  .and('match', /users/)          // 返回的是 href 的值
  .and('not.include', '#')        // 返回的是 href 的值

method + value 引數的栗子

斷言 href 屬性值是否等於 /users

cy
  .get('a')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')