大家好，我是阿萨。之前学习了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 cy.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"]')
3. 操作元素的方法
// 单击 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()
4. 写断言的方法
// 判断列表被选中元素个数是不是3，自动重试cy.get('li.selected').should('have.length', 3) // 输入框没有被disabled的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 mecy.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')
5. 无需等待，自动重试
不需要等待元素出现，自动重试。直到出现。
如果你正在用Cypress 写E2E的脚本，以上代码，赶快练习起来吧。
