Cypress 测试用例的一些编写技巧

一、排除和包括指定的case

要运行指定的套件或测试，只需要将 .only 加到该函数即可。

it.only('returns "fizz" when number is multiple of 3', function () {
    numsExpectedToEq([9, 12, 18], 'fizz')
  })

要跳过指定的套件或测试，只需要将 .skip() 加到该函数即可。

it.skip('returns "fizz" when number is multiple of 3', function () {
  numsExpectedToEq([9, 12, 18], 'fizz')
})

二、动态生成测试

describe('if your app uses jQuery', function () {
  ['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach((event) => {
    it('triggers event: ' + event, function () {
      // if your app uses jQuery, then we can trigger a jQuery
      // event that causes the event callback to fire
      cy
        .get('#with-jquery').invoke('trigger', event)
        .get('#messages').should('contain', 'the event ' + event + 'was fired')
    })
  })
})

上面的代码将生成一个包含4个测试的套件

if your app uses jQuery
triggers event: 'mouseover'
triggers event: 'mouseout'
triggers event: 'mouseenter'
triggers event: 'mouseleave'

三、给单个元素设置查找等待时间

cy.get('.my-slow-selector', { timeout: 10000 })

四、获取元素的属性

1、its API
https://docs.cypress.io/zh-cn/api/commands/its.html#Syntax

2、获取元素的innerText

cy.xpath('....').then((x)=>{
            expect(x.text(),account)
        })

五、断言元素的属性

1、expect 文本断言

//精确断言
expect(x.text(),'myText')
expect(x.text()).to.equal(expectValue)
//模糊断言
expect(text).to.include('foo')

2、should 控件断言
.should(chainers,method,value)一般用于断言元素的属性值

cy.get('#myButtom').should(chainers,method,value)
cy.get('#myButtom').should('have.attr', 'style', 'color: red;')
cy.get('div').should('have.css','color','blue')

should('have.class', 'success') 断言元素的class属性值是 'success'
should('have.text', 'Column content') 断言元素文本值 'Column content'
should('contain', 'Column content') 断言元素文本包含 'Column content'
should('have.html', 'Column content') 断言元素html文本'Column content'
should('match', 'td') chai-jquery 使用 "is()"检查元素是否与选择器匹配
.invoke('text')
.should('match', /column content/i) 文本与正则表达式匹配先使用invoke结合should
.contains('text') 文本与正则表达式匹配元素文本包含，这种比上面更好

六、多个断言

1、查找看见元素
Cypress将重试最多10秒，以找到 mobile-nav 类的可见元素且文本包含”Home”

cy.get('.mobile-nav', { timeout: 10000 })
  .should('be.visible')
  .and('contain', 'Home')

2、校验超级链接按钮的文案和跳转链接
校验超链接文案

cy.get('#button').should('contain', 'go to baidu')

校验超链接跳转地址

cy.get('#button').should('have.attr', 'href').and('contain', `www.baidu.com`)

持续更新中....
https://www.cnblogs.com/liuyitan/p/12591545.html