前端自动化测试框架Cypress（二十二）--- 断言.should()expect()

.should() 创建断言。断言会自动重试，直到它们通过或超时。

语法

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

实例一

cy.get('.error').should('be.empty') // Assert that '.error' is empty cy.contains('Login').should('be.visible') // Assert that el is visible cy.wrap({ foo: 'bar' }).its('foo').should('eq', 'bar') // Assert the 'foo' property equals 'bar'

实例二 判断元素是否可见

cy .get('nav') // yields <nav> .should('be.visible') // yields <nav>

实例三 多条件断言

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

实例四

cy.get(':checkbox').should('be.disabled')

实例五

cy.get('option:first').should('be.selected').then(($option) => { // $option is yielded }) <div> <p class="text-primary">Hello World</p> <p class="text-danger">You have an error</p> <p class="text-default">Try again later</p> </div> cy .get('p') .should(($p) => { // should have found 3 elements expect($p).to.have.length(3) // make sure the first contains some text content expect($p.first()).to.contain('Hello World') // use jquery's map to grab all of their classes // jquery's map returns a new jquery object const classes = $p.map((i, el) => { return Cypress.$(el).attr('class') }) // call classes.get() to make this a plain array expect(classes.get()).to.deep.eq([ 'text-primary', 'text-danger', 'text-default' ]) }) <div class="docs-header"> <div class="main-abc123 heading-xyz987">Introduction</div> </div> cy.get('.docs-header') .find('div') // .should(cb) callback function will be retried .should(($div) => { expect($div).to.have.length(1) const className = $div[0].className expect(className).to.match(/heading-/) }) // .then(cb) callback is not retried, // it either passes or fails .then(($div) => { expect($div).to.have.text('Introduction') }) cy.get('.docs-header') .find('div') .should(($div) => { if ($div.length !== 1) { // you can throw your own errors throw new Error('Did not find 1 element') } const className = $div[0].className if (!className.match(/heading-/)) { throw new Error(`No class "heading-" in ${className}`) } }) <ul class="connectors-list"> <li>Walk the dog</li> <li>Feed the cat</li> <li>Write JavaScript</li> </ul> cy.get('.connectors-list > li').should(($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') }) cy.get('.connectors-list > li').should(($lis) => { expect($lis, '3 items').to.have.length(3) expect($lis.eq(0), 'first item').to.contain('Walk the dog') expect($lis.eq(1), 'second item').to.contain('Feed the cat') expect($lis.eq(2), 'third item').to.contain('Write JavaScript') })

比较两个元素的文本值

<div class="company-details"> <div class="title">Acme Developers</div> <div class="identifier">ACMEDEVELOPERS</div> </div> const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase() // will keep text from title element let titleText cy.get('.company-details') .find('.title') .then(($title) => { // save text from the first element titleText = normalizeText($title.text()) }) cy.get('.company-details') .find('.identifier') .should(($identifier) => { // we can massage text before comparing const idText = normalizeText($identifier.text()) // text from the title element should already be set expect(idText, 'ID').to.equal(titleText) })

使用断言链

// our subject is not changed by our first assertion, // so we can continue to use DOM based assertions cy.get('option:first').should('be.selected').and('have.value', 'Metallica')

等待断言通过

// Application Code $('button').click(() => { $button = $(this) setTimeout(() => { $button.removeClass('inactive').addClass('active') }, 1000) }) cy.get('button').click() .should('have.class', 'active') .and('not.have.class', 'inactive')

使用回调函数不会更改所生成的内容

cy .get('button').should(($button) => { expect({ foo: 'bar' }).to.deep.eq({ foo: 'bar' }) return { foo: 'bar' } // return is ignored, .should() yields <button> }) .then(($button) => { // do anything we want with <button> })

.should() 将继续重试其指定的断言，直到超时。

cy.get('input', { timeout: 10000 }).should(($input) => { // timeout here will be passed down to the '.should()' // unless an assertion throws earlier, // ALL of the assertions will retry for up to 10 secs expect($input).to.not.be('disabled') expect($input).to.not.have.class('error') expect($input).to.have.value('US') })