开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
大家好，我是阿萨。之前学习了cypress的最基本的用法。可是有些同学还是反馈不会写cypress，怎么办？
今天就列举一些常见的cypress的写法。
1. 常见单个元素定位方法
// TagName 是h1
cy.get('h1')
// css selector 是my-class
cy.get('.my-class')
// 元素id是my-id
cy.get('#my-id')
// 输入框的name 是field-name c
y.get('input[name="field-name"]')
//通过css selector 找到之后，根据text 去判断。
cy.get('.my-class').contains('text')
//通过文本去获取元素。根据元素的文本获取元素。
cy.contains('text')
2. 常见定位多个元素方法
// 获取所有列表元素
cy.get('li')
/// 通过CSS selector获取苏所有满足条件的元素
cy.get('.list-item')
// 通过控件类型以及属性名称获取元素，
cy.get('input[name="field-name"]')
- 操作元素的方法
// 单击
cy.get('button').click()
// 输入文本
cy.get('input').type('my text')
// 清空文本
cy.get('input').clear()
// 选中复选框的第一个
cy.get('[type="checkbox"]').first().check()
// 选中单选框中的第一个
cy.get('[type="radio"]').check('radio1')
// 取消选中第一个可操作对的元素cy.get('[type="checkbox"]').not('[disabled]').first().uncheck()
// 选中dropdown中可选元素
cy.get('select[name="optionsList"]').select('my value')
// 滚动到可视区域
cy.get('#my-id').scrollIntoView()
- 写断言的方法
// 判断列表被选中元素个数是不是3，自动重试cy.get('li.selected').should('have.length', 3)
// 输入框没有被disable class
cy.get('form').find('input').should('not.have.class', 'disabled')
// 文本框的值是对的
cy.get('textarea').should('have.value', 'foo bar baz')
// 元素的文本是期望的
cy.get('#user-name').should('have.text', 'Joe Smith')
//元素包含某个文本
cy.get('#address').should('include.text', 'Atlanta')
// span 不包含click me
cy.get('a').parent('span.help').should('not.contain', 'click me')
// 元素文本没有从“Hello” 开始。
cy.get('#greeting') .invoke('text') .should('match', /^Hello/)
//正则匹配元素。
cy.contains('#a-greeting', /^Hello/)
//元素是否可见
cy.get('button').should('be.visible')
//元素是否存在
cy.get('#loading').should('not.exist')
//元素状态是否被选中
cy.get(':radio').should('be.checked')
//元素css 中是否包含某个属性
cy.get('.completed').should('have.css', 'text-decoration', 'line-through')
cy.get('#accordion').should('not.have.css', 'display', 'none')
//校验disabled 属性
cy.get('#example-input') .should('be.disabled') .invoke('prop', 'disabled', false)
cy.get('#example-input') .should('be.enabled') .and('not.be.disabled')
//反向校验 不包含，不可见，
cy.get('.todo').should('not.have.class', 'completed')
cy.get('#loading').should('not.be.visible')
- 无需等待，自动重试
不需要等待元素出现，自动重试。直到出现。
如果你正在用Cypress 写E2E的脚本，以上代码，赶快练习起来吧。
