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 案例基本使用相关推荐

【人工智能周末直播专场】机器学习趣味大赏+强化学习全景介绍
直播主题1:机器学习趣味大赏机器学习正朝着哪些方面发展?将怎样影响你的工作和生活? 又能与你的工作和生活碰撞出怎样的火花? 人工智能正在揭去科幻的面纱,即将作为"新基建"飞入寻常 ...
e2e test 端到端的测试
在进行学习的时候,遇到了一个新的知识点.总想来记录一下,学到老,活到老. e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样. ...
SAP Spartacus Accessibility E2E 端到端测试
原文 Spartacus 中的可访问性有自己的一套端到端测试,这些测试位于 projects/storefrontapp-e2e-cypress/cypress/integration/accessi ...
端到端测试（e2e测试）
端到端测试:end to end测试,又称为e2e测试,可以看做一个自动化的测试脚本,其目的是模拟用户行为,通过自动的访问一个真实浏览器环境下的页面,对于页面上的任意操作,断言浏览器中发生特定的行为.
端到端的测试（e2e）
端到端的测试(e2e) 端到端测试类似于系统测试,测试级的"宏大"的端点,涉及整个应用系统环境在一个现实世界使用时的模拟情形的所有测试.例如与数据库对话,用网络通讯,或与外部硬件. ...
unit单元测试和e2e端到端测试的区别
前端实现自动化就要借助到unit和e2e端到端测试了一.unit测试站在程序员的角度测试 unit测试是把代码看成是一个个的组件.从而实现每一个组件的单独测试,测试内容主要是组件内每一个函数的返回 ...
Vuex 4源码学习笔记 - 通过Vuex源码学习E2E测试（十一）
在上一篇笔记中:Vuex 4源码学习笔记 - 做好changelog更新日志很重要(十) 我们学到了通过conventional-changelog来生成项目的Changelog更新日志,通过更新日志 ...
[C/C++后端开发学习] 9 服务端百万并发测试
服务端百万并发测试服务端并发的概念常见单机服务模型并发测试方法 socket数量的限制(描述符数量的限制) 客户端测试代码测试结果改进代码提升测试并发量单线程多端口同时监听修改代码: 测 ...
脚手架vue-cli系列五：基于Nightwatch的端到端测试环境
不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试 ...

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

E2E 测试介绍

E2E

E2E 测试优点

E2E 测试缺点

流行的端到端测试框架

安装 Cypress

Cypress 基本使用

添加一个测试文件

编写第一个测试代码

编写一个真实测试

切换浏览器

在 Vue 应用中使用 Cypress

案例搭建

配置 Cypress

配置 IDE 代码智能提示

修改 DOM 命令等待时间

测试用户登录功能

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

编写测试用例

测试发布文章

给元素添加 data-testid

编写测试用例

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

最新文章

热门文章