文章目录

前言
一、简介
二、原理
三、特性
四、优势
五、安装使用
- 1. npm install cypress --save-dev # 安装cypress
- - 1.1 在项目根目录下增加配置文件cypress.json
  - 1.2 在 package.json 文件添加对应启动脚本：
  - 1.3 “Cypress不能选择Chrome浏览器”的解决方法
  - 1.4 目录结构
- 2. 直接下载Cypress压缩包
六、流程
七、命令
- 1.选择器
- - 1.1 Cypress专有选择器
  - 1.2.其它选择器
- 2. 获取dom元素基本方式
- 3. 操作事件
- 4. 断言
- - 4.1. BDD断言
  - - .should
    - .and()
    - expect
  - 4.2.TDD断言
- 5. 数据请求
八、基本使用
- 1.编写简单的测试用例
- 2.自动完成测试用例和录制

前言

提示：为什么要学cypress?

一、简介

Cypress是即end to end（端到端）功能测试框架，它基于node.js。开箱即用，不仅支持本地浏览器直接模拟测试，也支持终端测试。还有测试录屏功能，方便在测试失败的时候，查看当时的失败的场景，方便定位。

  Mocha  适用于 Node.js 和浏览器的测试框架，它使得异步测试变得简单Chai   断言库

简化了设置测试、编写测试、运行测试和调试测试，支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。支持 Mac OS、Linux 和 Windows 平台

二、原理

   Webdriver 运行的方式大多数测试工具（如：Selenium/webdriver）通过在外部浏览器运行并在网络上执行远程命令来运行因为 Webdriver 底层通信协议基于 JSON Wire Protocol，运行需要网络通信Cypress 运行的方式Cypress 和 Webdriver 方式完全相反，它与应用程序在相同的生命周期里执行

三、特性

  时间穿梭【历史记录】Cypress 在测试代码运行时会自动拍照等测试运行结束后，用户可在 Cypress 提供的 Test Runner 里，通过悬停在命令上的方式查看运行时每一步都发生了什么实时重新加载当测试代码修改保存后，Cypress 会自动加载改动地方，并重新运行测试Spies（间谍）、Stubs（存根）、Clock（时钟）Cypress 允许你验证并控制函数行为，Mock 服务器的响应，更改系统时间单元测试触手可及！运行结果一致性Cypress 架构不使用 Selenium 或 Webdriver，在运行速度、可靠性测试、测试结果一致性上均有良好保障可调试性当测试失败时，可以直接从开发者工具（F12 Chrome DevTools）进行调试，这熟悉吧？？自动等待使用Cypress，永远无须在测试中添加 强制等待、隐性等待、显性等待Cypress 会自动等待元素至可靠操作状态时才执行命令或断言异步操作触手可及！网络流量控制Cypress 可以 Mock 服务器返回的结果，无须依赖后端服务器，即可实现模拟网络请求截图和视频Cypress 在测试运行失败时会自动截图，在无头运行时（无GUI界面）会录制整个测试套件的视频

四、优势

  像我们在用 Selenium 时，需要集成单元测试框架（unittest、pytest），想要好看的测试报告还得集成（allure），想要 Mock 还得引入对应的 Mock 库而 Cypress 是开箱即用！啥意思？看下图！

五、安装使用

1. npm install cypress --save-dev # 安装cypress

运行 node_modules/.bin/cypress open

1.1 在项目根目录下增加配置文件cypress.json

1.2 在 package.json 文件添加对应启动脚本：

1.3 “Cypress不能选择Chrome浏览器”的解决方法

  1.查看Chrome浏览器所在文件位置2.将Chrome下的Application文件夹拷贝至C:\Program Files (x86)\Google\Chrome3. 进入Application文件夹选择chrome.exe，启动Chrome，启动成功。4.启动cypress，确认是否可选Chrome浏览器，发现可以选择了。

1.4 目录结构

  cypress_demo├── cypress # Cypress 工作目录│   ├── fixtures # 测试用例中要用到的资源，比如：数据库模拟数据、图片、json信息等等，可以使用fixture方法读取│   │   └── example.json│   ├── integration # Cypress 脚本测试文件，允许多级目录│   │   └── examples # 这个文件夹中存放了 Cypress 官方提供的一些测试样例│   │       ├── actions.spec.js│   ├── plugins # 存放 Cypress 插件│   │   └── index.js│   └── support # 存放 Cypress 自定义命令│       ├── commands.js│       └── index.js├── cypress.json # Cypress 配置文件└── package.json # 这个要自己创建

2. 直接下载Cypress压缩包

  ①　官网下载地址：https://download.cypress.io②　解压到指定目录，然后进入目录，执行Cypress.exe新建一个测试文件 Cypress\integration\example

六、流程

流程-映射到Cypress对应的命令上

七、命令

1.选择器

1.1 Cypress专有选择器

  data-cydata-testdata-testid

1.2.其它选择器

  A.#id选择器通过html元素id属性来获取DMO获取用户名input元素方法：cy.get('#account').click() B.class类选择器类选择器通过html元素class属性来获取DMO获取用户名input元素方法：cy.get('.form-control').click() C.attributes属性选择器类选择器通过html元素class属性来获取DMO获取用户名input元素方法：cy.get('[input[id = "account"]]').click() D.nth-child(n)选择器:nth-child(n)选择器匹配属于其父元素的第n个子元素，不论元素的类型。获取用户名DOM元素方法：cy.get(tbody > tr:nth-child(1) > th')

2. 获取dom元素基本方式

      .find(selector) 搜索定位元素.get(selector) 搜索定位元素.contains(selector) 搜索定位元素.children() 方法用来获取DON元素的子元素.parents() 用来获取DOM元素的所有父元素.parent() 用来获取DOM元素第一层元素.siblings() 用来获取DOM元素的所有同级元素.first() 用来获取指定DOM对象的第一个元素.last() 用来获取指定DOM对象的最后一个元素.next() 用来匹配DOM对象紧跟着的下一个同级元素.nextAll() 用来匹配给定的DOM对象的所有同级元素.nextUntil() 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止.prev() 用来匹配给定DOM对象紧跟着的上一个同级元素.prevAll() 用来匹配给定的DOM对象之前的所有同级元素.prevUntil() 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止.each() 用来遍历数组及其类似结果.eq() 用来在元素或者数组中的特定索引处获取DOM元素。类似于Jquery中nth:child()cy.get('ul>li').each(($item, $index) => {if ($index !== 0) {values.push(text);cy.log($index.toString());cy.log(text);}})cy.get('li').eq(0).click()

3. 操作事件

4. 断言

4.1. BDD断言

.should

  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') 文本与正则表达式匹配元素文本包含，这种比上面更好

.and()

  针对同一元素多个断言，可以使用 and 语法cy.get('.assertions-link') .should('have.class', 'active') .and('have.attr', 'href') .and('include', 'cypress.io')

expect

  针对项目 BDD 断言方式expect(true).to.be.true

4.2.TDD断言

5. 数据请求

八、基本使用

1.编写简单的测试用例

      context('第一个测试', () => {before(function () {//初始化执行所有用例之前运行，执行一次cy.log("我是before")})after(function () {//初始化执行所有用例完之后运行，执行一次cy.log("我是after")})beforeEach(function () {//每条用例执行之前都执行cy.log("我是beforeEach")cy.visit('')})afterEach(function () {// 每条用例执行之后都执行cy.log("我是afterEach")})})

2.自动完成测试用例和录制

  npm run cypress:run

cypress 自动化测试相关推荐

Cypress自动化测试系列之三
本文技术难度★★★,如果前编内容顺利执行,请继续. 如果Selenium尚无法灵活运用的读者,本文可能难度较大. "理论联系实惠,密切联系领导,表扬和自我表扬"--我就是老司机,曾 ...
cypress自动化测试工具开发指南
待到秋来九月八,我花开后百花杀简介 cypress安装教程(MacOS版本) 安装前准备安装方式安装后使用 cucumber插件安装 cypress的基础配置插件支持配置--package.j ...
前端自动化测试框架cypress
前端自动化测试框架cypress 自动化测试为了保障软件质量,并减少重复性的测试工作,自动化测试已经被广泛运用. 自动化测试是一种测试方法,是指使用特定的软件,去控制测试流程,并比较实际结果与预期结 ...
我与无影的初体验：使用无影云桌面进行一个开源 Angular 项目的端到端测试
近日很荣幸地收到了阿里云邀请做一个关于阿里旗下无影云桌面的评测,从官网上了解到阿里云无影云桌面原名为弹性云桌面,融合了无影产品技术后更名升级,可广泛应用于具有高数据安全管控.高性能计算等要求的安全办公 ...
感恩节，感谢大家的一路相伴
今天是2022年11月24日,感恩节,感谢一路上大家的支持和帮助,也谢谢你们的不离不弃.从公众号创建到现在,你们没有因为我写的内容而取关,也没有因为推送的广告而取关,也谢谢群里的每一位小伙伴你们能够遵 ...
小博的软件测试学习笔记（V1.0）
小博,一位非常热心的软件测试领域的博主,乐于分享知识和学习资料,在我的学习交流群里的小伙伴都知道,我经常给大家分享各种资料,说百宝箱也不过分.接下来看一下都发表过哪些文章: 功能测试相关 0基础入门软 ...
前端性能测试工具Lighthouse
在前端开发中,对于自己开发的app或者web page性能的好坏,一直是让前端开发很在意的话题.我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,现在推荐一款工具:Light ...
自动化Web页面性能测试介绍
随着越来越多的用户使用移动设备访问 Web 应用,使得 Web 应用需要支持一些性能并不是很好的移动设备.为了度量和测试 Web 应用是不是在高复杂度的情况下,页面性能能满足用户的需求. 同时,随着 ...
mochawesome如何合并测试报告_Vue项目采用Cypress做e2e自动化测试，手把手一撸到底...
一.Cypress 介绍 cypress是一款支持现代浏览器的端到端的自动化测试工具. 项目地址 :https://github.com/cypress-io/cypress 目前22.5k star ...

cypress 自动化测试