前端自动化测试框架Cypress之基础知识

afterEach(() => {

// 在每一条案例执行完成之后执行

})

it(‘测试表单验证案例’, () => {})

// 只执行该案例

it.only(‘测试表单验证案例’, () => {})

// 忽略该案例

it.skip(‘测试表单验证案例’, () => {})

})

2. 钩子函数里环境变量

---

1. 可以访问cy对象

const $cyElement = cy.get(‘.demo-ruleForm > .el-form-item:first-child input’)

2. 类似jquery可以链式调用

样式选择器连接如是

cy.get(‘.demo-ruleForm > .el-form-item:first-child input’)

.should(‘have.value’, ‘’)

.focus()

.blur()

3. js基本变量语法

js基本语法api都支持，但稍有不同

const arr = [];

arr.forEach 可以访问

[].forEach 不可以访问

4. expect asset断言

assert.isOk(‘everything’, ‘everything is ok’)

expect(‘Jane’).to.not.equal(‘Jane’)

5. Cypress对象

Cypress提供了cy的一切api，另外多了.$()方法用于返回jquery对象

便于操作dom

3. should里环境变量

---

可以访问Cypress对象

js基本变量语法

const $cyElement = cy.get(‘.demo-ruleForm > .el-form-item:first-child input’)

$cyElement.should($el => {

// 闭包环境里可以访问Cypress是个可以操作dom集合

// Cypress.dom 返回dom的api

// Cypress.$(dom) 返回jquery对象

const isDom = Cypress.dom.isDom($el)

const $jqEl=Cypress.$($el[0])

expect(isDom).to.be.true

})

• Cypress.$()返回jQuery对象，可以访问jquery 的api

• Cypress.dom 返回dom的api

• Cpress.cy返回cy实例，可以类似钩子函数里断言

4. 案例

---

代码如下：

// https://docs.cypress.io/api/introduction/api.html

describe(‘自动化测试表单验证案例’, () => {

before(() => {

// 在全部案例执行之前执行一次

// 浏览器模式访问时，可按照自己的需要设置窗口大小，如 cy.viewport(1920,1100)

// 访问首页

cy.visit(‘http://localhost:2000/#/input-demo’)

})

after(() => {

// 在全部案例执行完成之后执行一次

})

beforeEach(() => {

// 在每一条案例之前执行

})

afterEach(() => {

// 在每一条案例执行完成之后执行

})

// 案例一、测试表单验证案例

it(‘测试表单验证案例’, () => {

cy.get(‘.demo-ruleForm > .el-form-item:first-child input’)

.should(‘have.value’, ‘’)

.focus()

.blur()

cy.get(‘.demo-ruleForm .el-form-item__error’)

.should(‘contain’, ‘请输入活动名称’)

cy.get(‘.demo-ruleForm > .el-form-item:first-child input’).type(‘测试数据’)

.blur()

cy.get(‘.demo-ruleForm .el-form-item__error’)

.should(‘not.be.visible’)

cy.get(‘.demo-ruleForm > .el-form-item:first-child input’).type(‘测试数据测试数据’)

.blur()

cy.get(‘.demo-ruleForm .el-form-item__error’)

.should(‘contain’, ‘长度在 3 到 5 个字符’)

})

// 案例二、测试一些闭包环境变量及api

it(‘测试表单验证案例’, () => {

// This is fine, jQuery returns the element synchronously.

// const $jqElement = $(‘.demo-ruleForm > .el-form-item:first-child input’)

// This will not work! Cypress does not return the element synchronously.

const $cyElement = cy.get(‘.demo-ruleForm > .el-form-item:first-child input’)

// cy操作类型jquery传入selector选择器，但不可以直接操作dom

// 类似jquery可以链式调用

// js基本变量语法

// 但稍有不同

const arr = [];

// arr.forEach 可以访问

// [].forEach 不可以访问

$cyElement.should($el => {

// 闭包环境里可以访问Cypress是个可以操作dom集合

// Cypress.dom 返回dom的api

// Cypress.$(dom) 返回jquery对象

const isDom = Cypress.dom.isDom($el)

const $jqEl=Cypress.$($el[0])

expect(isDom).to.be.true

})

})

})

四、获取dom元素

========================================================================

1.get

---

用法一、选择器定位

cy.get(selector)

用法二、以别名定位

cy.get(alias)

匹配多个元素时，返回多个对象

2.find

---

cy.get(selector).find(selector1)

定位方法，用来在 DOM 树中搜索已被定位到的元素的后代，例如get选中的后代元素

// 错误写法

cy.find(selector)

会报错，需要一个父类选中元素

3.contains

---

两种用法，如下：

.contains(content)

.contains(selector, content)

支持cy.contains，及cy.get().contains

重点：只会返回第一个匹配到的元素

4.first

---

类似jquery的first方法

5.eq

---

类似jquery的eq方法，eq(index) index从0开始获取第几个元素子元素

五、获取/设置dom元素属性 ！！！

=================================================================================

1. cy.$$(selector，context) ☆☆☆

---

cy.$$(‘input’) // 返回input元素的jquery对象

cy.$$(‘input’).value() // 可用用jquery的api

cy.$$(‘input’).text() // 例子，等等

cy对象挂载在window下，故环境变量this指向window时可用访问，一般顶级作用域指向这个window，可用通过箭头函数将内部作用域指向window，访问cy

2. Cypress.$(selector) ☆☆☆

---

Cypress.$(‘input’) // 返回input元素的jquery对象

Cypress.$(‘input’).value() // 可用用jquery的api

Cypress.$(‘input’).text() // 例子，等等

Cypress对象挂载在window下，故环境变量this指向window时可用访问，一般顶级作用域指向这个window，可用通过箭头函数将内部作用域指向window，访问Cypresss

3.should回调函数 ☆☆☆

---

• 形参$e为jquery对象

• Cpress.$ 返回jquery对象

利用jquery的api可以获取元素的dom属性

cy.get(‘.dom-demo’)

.should($e => {

// $e jquery对象

// Cpress.$ 返回jquery对象

const text = $e.find(‘.item’).first().text();

const text1 = Cypress.$($e[0]).find(‘.item’).first().text();

console.log(text === text1) // true

})

4.cy对象的type方法

---

对input输入框的输入

cy.get(‘input’).type(‘text’)

cy.get(‘input’).type(‘2222’)

六、鼠标事件

=====================================================================

1.单击事件click

---

// 点击事件

cy.get(‘#btn’).click()

2.悬浮事件hover

---

版本不支持该事件，有代替方案如下：

cy.get(‘#btn’)

.trigger(‘mouserover’)

.wait(3000)

.rightclick()

.wait(3000)

.should(‘have.css’, ‘color’, ‘rgb(255, 255, 255)’)

3.双加事件dblclick

---

// 双击事件

cy.get(‘#btn’).dblclick()

4.右击事件rightclick

---

// 右击事件

cy.get(‘#btn’).rightclick()

5.聚焦事件focus

---

// 聚焦事件

cy.get(‘input’).focus()

6.失焦事件blur

---

// 失焦事件

cy.get(‘input’).blur()

总结案例

---

// 案例三、测试鼠标一些事件

it(‘测试鼠标一些事件’, () => {

// 点击事件

cy.get(‘#btn’)

.click()

// 双击事件

cy.get(‘#btn’)

.dblclick()

// 右击事件

cy.get(‘#btn’)

.rightclick()

// 悬浮事件

// cy.get(‘#btn’).hover()

// 该事件本版本不支持

// 代替方案如下：

cy.get(‘#btn’)

.trigger(‘mouserover’)

.wait(3000)

.rightclick()

.wait(3000)

.should(‘have.css’, ‘color’, ‘rgb(255, 255, 255)’)

// 聚焦事件

cy.get(‘#int’)

.focus()

// 失焦事件

cy.get(‘#int’)

.blur()

})

七、断言should、expect

================================================================================

每条案例都需要加断言，及验证点，否则是一条不完整的案例

（一）、should断言

---

1. dom断言

1. Length

// retry until we find 3 matching <li.selected>

cy.get(‘li.selected’).should(‘have.length’, 3)

2. Class

// retry until this input does not have class disabled

cy.get(‘form’).find(‘input’).should(‘not.have.class’, ‘disabled’)

3. Value

// retry until this textarea has the correct value

cy.get(‘textarea’).should(‘have.value’, ‘foo bar baz’)

4. Text Content

// retry until this span does not contain ‘click me’

cy.get(‘a’).parent(‘span.help’).should(‘not.contain’, ‘click me’)

5. Visibility

// retry until this button is visible

cy.get(‘button’).should(‘be.visible’)

6. Existence

// retry until loading spinner no longer exists

cy.get(‘#loading’).should(‘not.exist’)

7. State

// retry until our radio is checked

cy.get(‘:radio’).should(‘be.checked’)

8. CSS

// retry until .completed has matching css

cy.get(‘.completed’).should(‘have.css’, ‘text-decoration’, ‘line-through’)

// retry until .accordion css have display: none

cy.get(‘#accordion’).should(‘not.have.css’, ‘display’, ‘none’)

2. 回调函数

cy.get(‘div’)

.should(($div) => {

expect($div).to.have.length(1)

const className = $div[0].className

// className will be a string like “main-abc123 heading-xyz987”

expect(className).to.match(/heading-/)

})

（二）、expect断言

---

1. 断言入参不是dom对象时

| Chainer | Example |

| — | — |

| not | expect(name).to.not.equal(‘Jane’) |

| deep | expect(obj).to.deep.equal({ name: ‘Jane’ }) |

| nested | expect({a: {b: [‘x’, ‘y’]}}).to.have.nested.property(‘a.b[1]’) expect({a: {b: [‘x’, ‘y’]}}).to.nested.include({‘a.b[1]’: ‘y’}) |

| ordered | expect([1, 2]).to.have.ordered.members([1, 2]).but.not.have.ordered.members([2, 1]) |

| any | expect(arr).to.have.any.keys(‘age’) |

| all | expect(arr).to.have.all.keys(‘name’, ‘age’) |

| a(type) Aliases: an | expect(‘test’).to.be.a(‘string’) |

| include(value) Aliases: contain, includes, contains | expect([1,2,3]).to.include(2) |

| ok | expect(undefined).to.not.be.ok |

| true | expect(true).to.be.true |

| false | expect(false).to.be.false |

| null | expect(null).to.be.null |

| undefined | expect(undefined).to.be.undefined |

| exist | expect(myVar).to.exist |

| empty | expect([]).to.be.empty |

| arguments Aliases: Arguments | expect(arguments).to.be.arguments |

| equal(value) Aliases: equals, eq | expect(42).to.equal(42) |

| deep.equal(value) | expect({ name: ‘Jane’ }).to.deep.equal({ name: ‘Jane’ }) |

| eql(value) Aliases: eqls | expect({ name: ‘Jane’ }).to.eql({ name: ‘Jane’ }) |

| greaterThan(value) Aliases: gt, above | expect(10).to.be.greaterThan(5) |

| least(value)Aliases: gte | expect(10).to.be.at.least(10) |

| lessThan(value) Aliases: lt, below | expect(5).to.be.lessThan(10) |

| most(value) Aliases: lte | expect(‘test’).to.have.length.of.at.most(4) |

| within(start, finish) | expect(7).to.be.within(5,10) |

| instanceOf(constructor) Aliases: instanceof | expect([1, 2, 3]).to.be.instanceOf(Array) |

| property(name, [value]) | expect(obj).to.have.property(‘name’) |

| deep.property(name, [value]) | expect(deepObj).to.have.deep.property(‘tests[1]’, ‘e2e’) |

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
(‘test’).to.have.length.of.at.most(4) |

| within(start, finish) | expect(7).to.be.within(5,10) |

| instanceOf(constructor) Aliases: instanceof | expect([1, 2, 3]).to.be.instanceOf(Array) |

| property(name, [value]) | expect(obj).to.have.property(‘name’) |

| deep.property(name, [value]) | expect(deepObj).to.have.deep.property(‘tests[1]’, ‘e2e’) |

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-QePinvwF-1715892293489)]

[外链图片转存中…(img-4xm07Yqp-1715892293490)]

[外链图片转存中…(img-s8qzst6H-1715892293490)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！