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。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Linux join命令的使用及说明

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出
阅读更多...
Linux jq命令的使用解读

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.
阅读更多...
Linux kill正在执行的后台任务 kill进程组使用详解

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本，并kill2.1 进程查看2.2 遇到的
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
Redis 基本数据类型和使用详解

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash
阅读更多...
Redis中Hash从使用过程到原理说明

Redis中Hash从使用过程到原理说明

《Redis中Hash从使用过程到原理说明》RedisHash结构用于存储字段-值对,适合对象数据,支持HSET、HGET等命令,采用ziplist或hashtable编码,通过渐进式rehash优化... 目录一、开篇：Hash就像超市的货架二、Hash的基本使用1. 常用命令示例2. Java操作示例三
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2