热血前端勇闯自动化测试 Playwright + TypeScript入门安装运行


前言

问:前端做好好的为什么要来卷测试呢?
答:因为所有主线流程测试可能不会完全兼顾得到,所以为了能更(yu)好(kuai)的工(mo)作(yu),所以内心就产生了一个邪恶的想法😈假如我提测前把所有的主流程跑一边呢? so 请看下文


提示:以下是本篇文章正文内容,系好安全带 准备发车!

一、Playwright是什么?

Playwright 是一个由 Microsoft 开发的开源 Node.js 库,用于自动化浏览器操作。它提供了一组 API,允许你在 Chromium、Firefox 和 WebKit(Safari)浏览器中执行各种自动化任务,包括模拟用户输入、截图、页面导航等。

Playwright 提供了比传统的浏览器自动化工具更强大的功能,包括对多浏览器的支持、截图和录制、模拟设备等。你可以使用 Playwright 编写自动化测试、截图、爬虫等应用。

支持多浏览器: 支持 Chromium、Firefox 和 WebKit(Safari)浏览器。
截图和录制: 提供方便的方法来截取页面截图,并支持录制页面操作。
模拟设备: 可以模拟各种设备,如手机、平板电脑,以确保你的应用在不同设备上都能正常运行。
浏览器上下文: 允许你在同一浏览器实例中创建多个独立的浏览器上下文,每个上下文都有自己的 Cookie 和缓存。
多页面支持: 可以在同一浏览器中同时操作多个页面。
事件监听: 提供了丰富的事件监听机制,可以监听页面的各种事件。
自动等待: 具有自动等待功能,能够智能地等待异步操作完成,而不需要手动添加 sleep 或等待。
与各种测试框架集成: 可以与 Jest、Mocha、Playwright Test 等测试框架集成。

二、使用步骤

1. installing Playwright

  • 代码如下(npm示例): npm init playwright@latest
  • 接着会出现几个选项让你选择这里可以根据大家的需求自行选择(附赠一份我的选择)
  • 在这里插入图片描述

2. 如何运行测试用例

提示:默认项目中会带有两条测试用例

  1. 使用vscode打开项目 vscode如何下载
  2. 在终端运行 npx playwright test
    测试默认会在 chromium、firefox 和 webkit 上运行。
  3. 如果想单独的运行特定的测试文件npx playwright test xxxx.spec.ts在这里插入图片描述
    更多运行方式 官网
    以上是命令行运行用例方式

现在这年头谁还用命令行啊🤔️🤔️🤔️


  1. 从vscode的影响应用商店搜索PlayWright Test for VSCode下载在这里插入图片描述

  2. VSCode快捷键
    mac: cmd+p
    win:ctrl+p
    输入>Install Playwright
    在这里插入图片描述

  3. 根据需求自行勾选☑️ 点击OK

  4. 点击某个测试用例文件具体的case左侧会出现绿色的三角形点击即可运行
    在这里插入图片描述

3. 如何查看测试报告

  1. 运行完测试用例后会生成一个html打开就能看到了

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值