Cypress 好用的用法

简介: 大家好,我是阿萨。之前学习了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"]')


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)
// 输入框没有被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')


5.无需等待,自动重试


不需要等待元素出现,自动重试。直到出现。


如果你正在用Cypress 写E2E的脚本,以上代码,赶快练习起来吧。

相关文章
|
6月前
|
测试技术
如何用命令行执行cypress?
如何用命令行执行cypress?
111 0
|
JavaScript 前端开发
【前端】解决webstorm执行typescript脚本输出中文乱码问题
【前端】解决webstorm执行typescript脚本输出中文乱码问题
620 0
|
6月前
Cypress那些好用的写法
Cypress那些好用的写法
|
XML JSON JavaScript
【cypress】6. cypress的默认文件结构介绍
【cypress】6. cypress的默认文件结构介绍
【cypress】6. cypress的默认文件结构介绍
|
Web App开发 前端开发 测试技术
【cypress】1. 什么是cypress,为什么要用它?
【cypress】1. 什么是cypress,为什么要用它?
【cypress】1. 什么是cypress,为什么要用它?
Cypress系列(5)- 自定义 Cypress
Cypress系列(5)- 自定义 Cypress
221 0
Cypress系列(5)- 自定义 Cypress
|
JavaScript
Cypress系列(93)- Cypress.dom 命令详解
Cypress系列(93)- Cypress.dom 命令详解
295 0
Cypress系列(93)- Cypress.dom 命令详解
|
资源调度 索引
Cypress系列(98)- cypress-xpath 插件, xpath() 命令详解
Cypress系列(98)- cypress-xpath 插件, xpath() 命令详解
383 0
Cypress系列(98)- cypress-xpath 插件, xpath() 命令详解
Cypress系列(99)- cypress-downloadfile 插件, downloadFile() 命令详解
Cypress系列(99)- cypress-downloadfile 插件, downloadFile() 命令详解
380 0
Cypress系列(99)- cypress-downloadfile 插件, downloadFile() 命令详解