Cypress学习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)
})