阅读 173

新一代自动化测试工具 —— playwright

一、playwright 的概述

playwright 是由微软公司 2020 年初发布的新一代自动化测试工具,playwright 基于 jeste2e 测试框架,其在 jest 的基础上集成了仅用一个 API 即可自动执行 Chromium、Firefox、WebKit 等主流浏览器自动化操作,从而实现便捷化自动化测试。

二、playwright 的环境介绍

playwright 支持以 chromiumfirefoxwebkit 为内核的浏览器进行自动化测试。

浏览器内核对应关系为:

浏览器内核
Chrome统称为 Chromium 内核或 Chrome 内核,以前是 Webkit 内核,现在是 Blink 内核
FirefoxGecko 内核,俗称 Firefox 内核
SafariWebkit 内核
Opera最初是自己的 Presto 内核,后来是 Webkit,现在是 Blink 内核
IETrident 内核,也是俗称的IE内核
360浏览器、猎豹浏览器IE + Chrome 双内核
搜狗、遨游、QQ浏览器Trident(兼容模式)+ Webkit(高速模式)
百度浏览器、世界之窗IE 内核
2345浏览器以前是 IE 内核,现在也是 IE + Chrome 双内核

综上可以看出,其能支持市面上的大部分浏览器。

通过执行以下指令可以将网站运行在不同的浏览器上。

指令格式:npx playwright [browser] [website]

指令示例:npx playwright cr wikipedia.org

该指令指代在以 chromium 为内核的浏览器运行 wikipedia.org

环境指令
chromiumcr
firefoxff
webkitwk

环境要求:

环境支持版本
nodejs>= 12
Windows
Windows Subsystem for Linux (WSL)
macOSRequires 10.14 (Mojave) or above
LinuxOnly Ubuntu 18.04 and Ubuntu 20.04 are officially supported

三、playwright 的使用介绍

在一个项目中使用 playwright,需要有三个步骤,首先是进行安装、然后是进行指令的录制,再然后的集成在项目的 husky 或者流水线中,从而实现自动化测试。

3.1 playwright 的安装

在项目的根目录下执行以下指令进行安装。

npm 的安装方法为:

$ npm i -D playwright
复制代码

yarn 的安装方法为:

$ yarn add -D playwright
复制代码

然后执行

$ npx playwright install
复制代码

3.2 playwright 的浏览器指令录制

在项目的根目录下执行以下指令进行录制。

指令格式:npx playwright codegen [website]

指令示例:npx playwright codegen wikipedia.org

使用示例:

在终端输入 npx playwright codegen wikipedia.org ,可以得到如下:

屏幕录制2021-07-21-上午11.23.30.gif

如示例所示,输入完指令后,我们可以从右上角的面板中得到所有关于本次用户操作的指令,在右上角的 target 可以对指令进行转换。

image.png 、 我们点击 javascript 可以获得一个可以被执行的文件,将其中的代码拷贝到一个新建的 index.js 文件中,执行 node index.js 可以看到自动化执行操作。

3.3 playwright 实现自动化测试

说了这么多,playwright 如何集成在我们的项目之中呢?

目前针对开放物流有三个应用的方案

  1. 本地提交代码时通过钩子拦截,并将测试文件逐个运行。
  2. 上传代码后集成 CI 进行测试。

3.3.1 在本地实现测试

将上方的 playwright-test 复制到 js 文件中。

在项目根目录下执行 npm run test 或者 npx playwright test,其会自动执行 [filename].spec.js[filename].test.js 的测试文件进行 e2e 测试,并自动输出测试报告。

image.png

3.3.2 在 ci 实现测试

⌛️ 该方案尚未实践完成

编写 gitlab-ci.yml 文件

build:
  stage: build
  image: mcr.microsoft.com/playwright:focal
  cache:
    paths: 
      - node_modules
  script:
    - /etc/init.d/dbus start
    - node -v & npm -v
    - npm install --force
    - npx playwright install chrome
    - npm run test
复制代码

经试验,在官方提供的镜像下,会报 waitForNavigation 的错误。

需要官方解决,已提 issued

文章分类
前端
文章标签