前端测试——端对端测试框架 Playwright 总结

2023-12-25 20:40:02

在进行前端测试前,我们需要明确我们需要怎样的前端测试。

前端测试类型总结

前端应用测试分为几种常见类型:

端到端(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 上方就会出现相应的元素,可以复制过来做我们期望的操作

在这里插入图片描述

最后就是一些期望代码的编写,这些地方只能根据业务的需求去编写代码了。

在这里插入图片描述

容器化

通常我们会把 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 是其中一个不错的框架。支持录制代码、生成截屏报告等功能,简单易用。

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

行动吧,在路上总比一直观望的要好,未来的你肯定会感谢现在拼搏的自己!如果想学习提升找不到资料,没人答疑解惑时,请及时加入群: 731789136,里面有各种测试开发资料和技术可以一起交流哦。

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!?

文章来源:https://blog.csdn.net/NHB234567/article/details/135207820
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。