E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用

2024-08-23 01:08
文章标签 学习 使用 介绍 基本 测试 案例 端到 e2e cypress

本文主要是介绍E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

E2E 测试介绍

E2E

E2E（end to end）端到端测试是最直观可以理解的测试类型。在前端应用程序中，端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作。

E2E 把整个系统当作一个黑盒，测试人员模拟真实用户在浏览器中操作 UI，测试在真实浏览器环境运行测试，测试出的问题可能是前端也可能是后端导致的，比如：

  • 用户登录注册
  • 加入购物车
  • 订单结算
  • …

E2E 测试一般是由 QA 测试工程师来做。稍小的项目可能根据测试用例（excel）操作一遍就完了，稍大一点的会些一些自动化测试的代码。

前端可能会为核心的、主要的或稳定的业务流程写 E2E，不过占据的测试比例要小很多，主要目的是：

  • 便于给 PM（产品经理） 展示业务流程
  • 便于修改 Bug 之后的回归测试

E2E 测试优点

  • 真实的测试环境，相比集成测试和单元测试，更容易获得程序的信心

E2E 测试缺点

  • 端到端测试运行不够快
    • 启动浏览器需要占用几秒钟，网站响应速度又慢。通常一套端到端测试需要 30 分钟的运行时间。如果应用程序完全依赖于端到端测试，那么测试套件将需要数小时的运行时间。
  • 调试比较困难
    • 要调试端到端测试，需要打开浏览器并逐步完成用户操作以重现 bug。本地运行这个调试过程就已经够糟糕了，如果测试是在持续集成服务器上失败，而不是本地计算机上失败，那么整个调试过程将会变得更加糟糕。

流行的端到端测试框架

  • Selenium - 专业 QA 人员使用较多
    • 大部分使用 Python 编写测试
    • 基于 WebDriver，测试用例运行在浏览器外部，通过 WebDriver 协议与运行在浏览器内部的被测应用程序进行交互。
  • Cypress - 目前最流行的适合前端开发工程师的工具
    • 运行在浏览器内部，直接与被测应用程序进行交互。
    • 支持的浏览器没有 Selenium 多
    • 使用 JavaScript 语言（相比使用 Python/Java 的测试工程师不方便）
    • 不支持多页面、多窗口等问题。
    • 本质上是实现了前端开发测试代码的工具。
  • Nightwatch
  • WebdriverIO
  • Playwright - 微软新推的测试化工具
    • 和 Selenium 一样使用 WebDriver 协议，支持浏览器多
    • 社区拥抱，期待值高

本文主要通过 Cypress 学习 E2E 测试。

安装 Cypress

官方文档：Installing Cypress

简单使用没必要特意安装到某个前端项目，可以单独安装，运行真实浏览器环境，测试某个网站，这个网站可以是本地的，也可以是在线的。

mkdir cypress-demo
cd cypress-demo
npm init -y
npm i -D cypress

配置启动脚本：

"scripts": {"cypress:open": "cypress open"
},

运行命令： npm run cypress:open，会打开测试运行器（一个浏览器窗口），INTEGRATION TESTS 显示初始生成的测试用例文件，默认不运行

在这里插入图片描述

可以点击任意测试模块，它会打开一个浏览器窗口（Chrome）运行测试，左边是当前的测试概况，右边是一个真实的浏览器（地址栏+页面）

在这里插入图片描述

当 cypress 启动后，默认会在项目根目录下创建一个 cypress 目录，其中包含 4 个子目录：

├─ fixtures # 存放测试之前准备的测试数据
│   └─ example.json
├─ integration # 存放测试代码文件，可以通过子目录的方式进行分类
│   ├─ 1-getting-started
│   │   └─ todo.spec.js
│   └─ 2-advanced-examples
│       ├─ ...
│       └─ window.spec.js
├─ plugins # 配置 cypress 插件
│   └─ index.js
└─ support # 相关支持配置├─ commands.js└─ index.js

Cypress 基本使用

官方文档：Writing Your First Test

添加一个测试文件

在 integration 目录下创建测试文件 sample_spec.js。

测试运行器会实时加载，创建完成后会显示这个测试文件。

在这里插入图片描述

可以打开运行这个测试文件，测试窗口也会实时加载。

编写第一个测试代码

// describe it 使用的 Mocha
describe('My First Test', () => {it('Does not do much!', () => {// 断言使用的 chaiexpect(true).to.equal(true)})
})

一些 API 看上去和 Jest 很像，但其实 Cypress 中默认 describe 和 it 使用的 Mocha，expect 使用的 chai，如果想要使用 Jest 可以进行配置。

查看测试窗口：

在这里插入图片描述

如果编写一个失败的错误 expect(true).to.equal(false)：

在这里插入图片描述

会显示具体哪里导致的错误和文件地址，点击文件还可以用配置的编辑器打开测试用例文件，跳转到对应的代码位置。

编写一个真实测试

describe('My First Test', () => {it('Does not do much!', () => {// 访问一个页面cy.visit('http://npmjs.com/')// 查询一个元素cy.contains('Build amazing things')})
})

保存后观察测试窗口更新，可以看到右侧加载了页面。

即使没有添加断言，测试用例仍然成功，这是因为 Cypress 的许多命令如果没有找到预期的结果，在运行就会失败，这被称为默认断言。

如果编写一个错误测试，如查询页面上没有的内容 cy.contains('123')，测试将失败，但是会等待大于 4 秒后才给出结果，因为内容显示可能需要时间或异步加载，所以 Cypress 默认会等待 4 秒。

丰富用例：

describe('My First Test', () => {it('Does not do much!', () => {// 访问一个页面cy.visit('http://npmjs.com/')// 查询一个元素cy.contains('Build amazing things')// 找到输入框，输入内容并按下回车// .get(选择器) 类似于 jQuery 的 $(选择器)cy.get('[placeholder="Search packages"]').type('cypress{enter}')// 断言内容cy.contains('Cypress.io end to end testing tool')})
})

切换浏览器

Cypress 会自动识别系统中安装的浏览器，并允许切换：

在这里插入图片描述

在 Vue 应用中使用 Cypress

案例搭建

可以使用这个案例代码 gothinkster/vue-realworld-example-app，它是 realworld 案例的 Vue 版本。

代码中样式表 https://demo.productionready.io/main.css 从外部站点引入，如果有跨域限制，可手动拷贝到本地。

clone 或下载 zip 源码，npm i安装依赖，npm run serve 运行应用。

配置 Cypress

可以使用 Vue CLI 在创建应用的时候选择安装 Cypress。

已有的项目，也可以手动安装配置 Cypress。

或者使用官方提供的插件：e2e-cypress

# 在项目中安装插件
npx @vue/cli add e2e-cypress
# 如果全局安装了 @vue/cli 可以直接使用 vue 命令安装
# vue add e2e-cypress

安装完成后，查看项目：

1、package.json 中增加了插件依赖和启动命令：

{..."scripts": {..."test:e2e": "vue-cli-service test:e2e"},"devDependencies": {..."@vue/cli-plugin-e2e-cypress": "^5.0.4"}
}

2、项目中新增了 Cypress 的配置文件 cypress.json，里面指定了一个插件文件，在运行测试后的时候会加载这个插件：

{"pluginsFile": "tests/e2e/plugins/index.js"
}

3、还在 tests 目录下创建了 e2e 目录，存放Cypress 的代码，其中测试文件存放在 specs 中，其中包含一个示例文件。

在这里插入图片描述

describe('My First Test', () => {it('Visits the app root url', () => {cy.visit('/')// cy.contains('h1', 'Welcome to Your Vue.js App')})
})

4、运行测试命令 npm run test:e2e

该命令会将应用进行打包构建，Cypress 测试的就是打包后的应用，构建完成后，就会启动测试打开测试运行器。

配置 IDE 代码智能提示

官方介绍了如何配置 IDE 的代码智能提示功能：Intelligent Code Completion

在文件顶部添加注释（三斜杠）：

/// <reference types="Cypress" />

修改 DOM 命令等待时间

对基于 DOM 的命令，Cypress 默认等待 4 秒，案例中有些操作需要等待接口响应，而响应时间可能要久一些，可以修改默认等待时间：

// cypress.json
{"pluginsFile": "tests/e2e/plugins/index.js","defaultCommandTimeout": 10000
}

测试用户登录功能

给 Login 页面的元素添加 data-testid

src\views\Login.vue：

<ul v-if="errors" class="error-messages"><li data-testid="error-message-item" v-for="(v, k) in errors" :key="k">{{ k }} {{ v | error }}</li>
</ul>
<form @submit.prevent="onSubmit(email, password)"><fieldset class="form-group"><inputclass="form-control form-control-lg"type="text"v-model="email"placeholder="Email"data-testid="email"/></fieldset><fieldset class="form-group"><inputclass="form-control form-control-lg"type="password"v-model="password"placeholder="Password"data-testid="password"/></fieldset><buttondata-testid="submit"class="btn btn-lg btn-primary pull-xs-right">Sign in</button>
</form>

编写测试用例

// tests\e2e\specs\test.js
/// <reference types="Cypress" />describe('用户登录', () => {it('登录成功，跳转到首页', () => {// 打开登录页cy.visit('#/login')// 输入邮箱cy.get('input[data-testid="email"]').type('zby@renshijian.com')// 输入密码cy.get('input[data-testid="password"]').type('123456')// 按下登录按钮cy.get('button[data-testid="submit"]').click()// 断言：当前 url 包含 `#/`cy.url().should('contain','#/')// 断言：页面包含指定元素cy.contains('h1','conduit')})it('登录失败，展示错误提示信息', () => {cy.visit('#/login')cy.get('input[data-testid="email"]').type('zby@renshijian.com')cy.get('input[data-testid="password"]').type('@123456')cy.get('button[data-testid="submit"]').click()// 断言：页面包含指定元素cy.get('[data-testid="error-message-item"]').should('exist').should('contain', 'email or password is invalid')})
})

测试发布文章

给元素添加 data-testid

src\views\ArticleEdit.vue：

<form @submit.prevent="onPublish(article.slug)"><fieldset :disabled="inProgress"><fieldset class="form-group"><inputdata-testid="article-title"type="text"class="form-control form-control-lg"v-model="article.title"placeholder="Article Title"/></fieldset><fieldset class="form-group"><inputdata-testid="article-description"type="text"class="form-control"v-model="article.description"placeholder="What's this article about?"/></fieldset><fieldset class="form-group"><textareadata-testid="article-body"class="form-control"rows="8"v-model="article.body"placeholder="Write your article (in markdown)"/></fieldset><fieldset class="form-group"><inputdata-testid="article-tag"type="text"class="form-control"placeholder="Enter tags"v-model="tagInput"@keypress.enter.prevent="addTag(tagInput)"/><div class="tag-list"><spanclass="tag-default tag-pill"v-for="(tag, index) of article.tagList":key="tag + index"><i class="ion-close-round" @click="removeTag(tag)"/>{{ tag }}</span></div></fieldset></fieldset><buttondata-testid="article-publish":disabled="inProgress"class="btn btn-lg pull-xs-right btn-primary"type="submit">Publish Article</button>
</form>

编写测试用例

describe.only('发布文章', () => {it('发布成功，跳转到文章详情页', () => {// 准备登录状态const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InpieUByZW5zaGlqaWFuLmNvbSIsInVzZXJuYW1lIjoi5ZGo56eJ5LmJIiwiaWF0IjoxNjQ4NTM0NTc5LCJleHAiOjE2NTM3MTg1Nzl9.cjPX0Rq4O2jjFNZULL93DwJ8aP3wXig89QZYqL91_CE'window.localStorage.setItem('id_token', token)cy.visit('#/editor')const articleTitle = '这是一篇文章'cy.get('[data-testid="article-title"]').type(articleTitle)cy.get('[data-testid="article-description"]').type('文章描述')cy.get('[data-testid="article-body"]').type('文章内容')cy.get('[data-testid="article-tag"]').type('aa{enter}').type('bb{enter}').type('cc{enter}')cy.get('[data-testid="article-publish"]').click()cy.contains('h1', articleTitle)})
})

这篇关于E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1097918。

相关文章

如何使用 Python 读取 Excel 数据

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》：本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读
阅读更多...
Python Transformers库(NLP处理库)案例代码讲解

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模
阅读更多...
解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》：本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基
阅读更多...
Python使用getopt处理命令行参数示例解析(最佳实践)

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数？getopt模块基础实际应用示例与其他参数处理方式的比较常见问http
阅读更多...
C 语言中enum枚举的定义和使用小结

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum（枚举）是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚
阅读更多...
redis过期key的删除策略介绍

redis过期key的删除策略介绍

《redis过期key的删除策略介绍》：本文主要介绍redis过期key的删除策略,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录第一种策略：被动删除第二种策略：定期删除第三种策略：强制删除关于big key的清理UNLINK命令FLUSHALL/FLUSHDB命
阅读更多...
使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取
阅读更多...
使用Python实现图像LBP特征提取的操作方法

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB
阅读更多...
Maven的使用和配置国内源的保姆级教程

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H
阅读更多...
Python中__init__方法使用的深度解析

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程（OOP）体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2