前端测试类型总结
前端应用测试分为几种常见类型:
- 端到端(e2e) :一个辅助机器人,表现得像一个用户,在应用程序周围点击,并验证其功能是否正确。常见的测试框架是 Playwright 。
- 单元:验证单独的、孤立的部分按预期工作。常见的测试框架是 Jest。
- 静态:在你写代码的时候捕捉错别字和类型错误。常见的是使用 Typescript 检查
每种前端测试都有其适用场景:
- 端到端测试:验证业务页面功能的基本可用。
- 单元测试:验证组件的复杂场景应用。
- 静态测试:大部分前端代码中都尝试可以引入,提高代码的可维护性。
端到端(e2e)特点
像一个用户去访问页面,不关心接口和前端组件的代码变化,只关注具体功能实现是否正常。
前端页面和组件变化频繁,但是提供的核心业务功能基本不会变化。因此可以使用端到端测试来确保应用的健壮性。
实践
项目初始化
npm init playwright@latest
package.json
中添加
"scripts": {
"test": "playwright test",
"report": "playwright show-report"
},
# 进行测试
playwright test
# 查看测试报告
playwright show-report
编写测试用例
编写测试用例主要分为两种 ,一种是代码编写,另一种是通过录制点击生成相应的流程代码。我更偏向于先进行录制生成基本代码,再进行代码修改,最后完成整个测试流程
录制代码
使用 Vscode
,下载插件 Playwright Test for VSCode
点击 Record new
将会弹出一个无痕模式的浏览器,在浏览器里输入需要测试的域名进行点击操作。就会自动生成代码了。
例如:输入网址 playwright.dev/docs/writin…
生成代码
编写代码
一般来讲编写测试代码,我们需要确认元素名,这里我推荐在录制情况下点击 Pick locator
在 Vscode
上方就会出现相应的元素,可以复制过来做我们期望的操作
最后就是一些期望代码的编写,这些地方只能根据业务的需求去编写代码了。
expect(locator).toBeChecked() | Checkbox 被选中 |
---|---|
expect(locator).toBeEnabled() | Control is enabled元素可以被使用(点击) |
expect(locator).toBeVisible() | 元素是可见的 |
expect(locator).toContainText() | 元素包含 xxx 文本 |
expect(locator).toHaveAttribute() | 元素含有 xxx 属性 |
expect(locator).toHaveCount() | 元素组的数量是否等于 x |
expect(locator).toHaveText() | 元素匹配 xxx 文本 |
expect(locator).toHaveValue() | 输入框元素的值为 xxx |
expect(page).toHaveTitle() | 页面标题为 xxx |
expect(page).toHaveURL() | 页面当前 url 包含 xxx |
expect(page).toHaveScreenshot() | 页面有快照 |
容器化
通常我们会把 e2e
测试放在持续集成的框架中,这个时候我们需要容器化去执行。因此我们需要将 playwright
容器化,在项目下新建 Dockfile
# Get the base image of Node version 16
FROM node:16
# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
# Set the work directory for the application
WORKDIR /app
# Set the environment path to node_modules/.bin
# ENV PATH /app/node_modules/.bin:$PATH
# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY config/ /app/config/
# Install the dependencies in Node environment
RUN npm install
在当前目录下根据Dockfile
构建一个新镜像
docker build -t playwright-docker .
我们可以用以下命令去跑一次性的测试容器
docker run -it playwright-docker:latest npm run test
同时我们经常需要在测试中传递一些参数,在 docker
中使用 -e
可传递参数
docker run -it -e HOST='111' playwright-docker:latest npm run test
在代码中可以使用 process.env.HOST
获取
export const HOST = process.env.HOST ;
总结
前端测试可以从端对端测试整体应用开始,端对端测试可以提高前端的业务页面健壮性。 playwright
是其中一个不错的框架。支持录制代码、生成截屏报告等功能,简单易用。
行动吧,在路上总比一直观望的要好,未来的你肯定会感谢现在拼搏的自己!如果想学习提升找不到资料,没人答疑解惑时,请及时加入群: 759968159,里面有各种测试开发资料和技术可以一起交流哦。
最后: 下方这份完整的软件测试视频教程已经整理上传完成,需要的朋友们可以自行领取【保证100%免费】
软件测试面试文档
我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。