Playwright是一个现代框架,可简化 Web 应用程序端到端 (E2E) 测试的创建和维护。 e2e 测试解决方案的前景,老实说,已经有丰富的工具和框架,但是 Playwright 加入了一些独特的功能(跨平台、跨浏览器、跨语言)和强大的维护者(微软)。

这篇博文介绍了将 Playwright 与 Docker 结合使用的秘诀和实践,特别关注:

• 使用官方 Playwright Docker 镜像(附带一些额外提示)

• 构建并运行自定义 Playwright Docker 映像

• 如何在 CI/CD 管道中集成 Playwright Docker 镜像

文章分享了通过使用 Playwright、Docker 和 GithubActions 对Adyen 示例集成实施 E2E 测试获得的一些经验教训

编剧测试用例

首先让我们看一个简单的测试来了解它是如何编写和执行的。

const { test, expect } = require('@playwright/test');  

test('Card', async ({ page, baseURL }) => {     
   // check page title
   await page.goto('/');     
   await expect(page).toHaveTitle(/Checkout Demo/);  
   // click on button  
   await page.locator('text="Card"').click();    

进入全屏模式 退出全屏模式

该测试可以用各种语言编写,并使用npx playwright test从命令行运行。

使用 Playwright Docker 镜像

Playwright 在Docker Hub上提供了一个图像,其中包括节点、所有必要的依赖项和浏览器。在预配置的环境中运行测试非常方便,无需额外设置。

在项目的根目录运行 Playwright 映像。假设测试代码在tests目录中(否则相应地更改脚本):

# run in the root of your Playwright project
docker run -v $PWD:/tests -w /tests --rm -it mcr.microsoft.com/playwright:v1.16.2-focal /bin/bash

进入全屏模式 退出全屏模式

请注意 Ubuntu 20.04 (Focal Fossa) 的图像标签焦点:虽然还有其他选项(即 Ubuntu 18.04 Bionic Beaver),但这在 Mac 和 Github Actions 上运行良好。

上述命令在托管 Playwright 环境的容器内启动**交互式 bash 会话:执行命令以添加应用程序的依赖项、下载浏览器并启动测试执行。

• npm install:在本地 node_modules 文件夹中安装应用程序的所有依赖项。

• npx playwright install:安装支持的浏览器。

• npx playwright test:运行所有测试。

# you are now inside the container (bash)
root@f4cfe077964d:/e2e# npm install

root@f4cfe077964d:/e2e# npx playwright install

Downloading Playwright build of chromium v939194 - 138.4 Mb [====================] 100% 0.0s
Playwright build of chromium v939194 downloaded to /ms-playwright/chromium-939194
Downloading Playwright build of firefox v1304 - 73.6 Mb [====================] 100% 0.0s
Playwright build of firefox v1304 downloaded to /ms-playwright/firefox-1304
Downloading Playwright build of webkit v1578 - 58.7 Mb [====================] 100% 0.0s
Playwright build of webkit v1578 downloaded to /ms-playwright/webkit-1578

root@a818ca0fe10a:/e2e# npx playwright test

进入全屏模式 退出全屏模式

一些提示

让我们看一些有用的自定义。

配置目标URL

要测试的应用程序的 URL 定义在playwright.config.js中。硬编码绝不是一个好主意,而是旨在保持针对不同环境(即本地主机或临时服务器)进行测试的灵活性,例如读取环境变量:

use: {
  // bad idea
  // baseURL: 'http://localhost:8080',
  // good idea
  baseURL: process.env.URL || 'http://localhost:8080',

进入全屏模式 退出全屏模式

现在可以直接在运行时定义 URL 值:

root@a818ca0fe10a:/e2e# URL=http://myapp.com npx playwright test

进入全屏模式 退出全屏模式

安装选定的扩展

如果测试必须仅在选定的浏览器上运行,则无需安装所有扩展:

root@a818ca0fe10a:/e2e# npx playwright install chromium

进入全屏模式 退出全屏模式

运行选定的测试

指定单个测试(或子集):

# test named dropin or starting with dropin
root@a818ca0fe10a:/e2e# npx playwright test dropin

进入全屏模式 退出全屏模式

测试本地主机

很可能正在开发的应用程序(在您的 IDE 中)在 localhost 上运行,但是当您想要运行 Playwright Docker 容器来测试它时,这会变得很棘手。

root@a818ca0fe10a:/e2e# curl -I http://localhost:8080
curl: (7) Failed to connect to localhost port 8080: Connection refused

进入全屏模式 退出全屏模式

哇!? localhost 无法访问,原因是Docker Networking:容器内部的 localhost 无法解析到主机(除非您在 Linux 上使用--network=host参数运行)。

第一个解决方法是使用始终可用的内置host.docker.internal地址。

root@a818ca0fe10a:/e2e# curl -I http://host.docker.internal:8080
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5345
Server: Werkzeug/2.0.2 Python/3.8.2
Date: Tue, 22 Mar 2022 16:24:46 GMT

进入全屏模式 退出全屏模式

另一个(稍微费力)的解决方法是将主机(您的机器)的 IP 地址映射到新定义的主机名(例如,我们称之为docker)。

# get IP
ipconfig getifaddr en0
xxx.xxx.xxx.xxx
# docker run adding host `docker`
docker run -v $PWD:/tests --add-host=docker:xxx.xxx.xxx.xxx -w /tests --rm -it mcr.microsoft.com/playwright:v1.16.2-focal /bin/bash
# host `docker` resolves to host
root@a818ca0fe10a:/e2e# curl -I http://docker:8080
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5345
Server: Werkzeug/2.0.2 Python/3.8.2
Date: Tue, 22 Mar 2022 16:24:46 GMT

进入全屏模式 退出全屏模式

开发 Adyen 集成时的重要说明:必须在 Allowed-Origin 列表中指定任何选择的 URL,以确保客户端请求得到授权

创建您自己的自定义 Playwright Docker 映像

另一种选择是创建一个自定义的 Playwright Docker 镜像来“烘焙”配置、依赖项和测试。

FROM mcr.microsoft.com/playwright:v1.16.2-focal

# copy project (including tests)
COPY . /e2e

WORKDIR /e2e

# Install dependencies
RUN npm install
# Install browsers
RUN npx playwright install

# Run playwright test
CMD [ "npx", "playwright", "test", "--reporter=list" ]

进入全屏模式 退出全屏模式

测试套件可以运行 Docker 映像并传递任何环境变量(即应用程序的 URL)。

docker build -t custom-playwright .
docker run -it --rm -e URL=http://myapp.com --name customplaywright custom-playwright
Running 5 tests using 2 workers
✓  [chromium] › card.spec.js:5:1 › Card (3s)
  ✓  [chromium] › card2.spec.js:5:1 › Card2 (3s)
  ✓  [chromium] › dropin.spec.js:5:1 › Dropin SEPA (2s)
  ✓  [chromium] › ideal.spec.js:4:1 › iDEAL (2s)
  ✓  [chromium] › webhook.spec.js:5:1 › Webhook Notification (198ms)

进入全屏模式 退出全屏模式

CI/CD 中的剧作家 E2E

如果您只在本地运行测试,那么构建自定义 Docker 映像几乎没有意义,但是,如果您想在 CI/CD 管道中包含 E2E 测试,那么它就会变得令人兴奋。满足Adyen 示例集成!

付款结帐示例

示例集成是使用 Adyen 平台进行付款结账的工作示例。这是一个简单而有效的开源应用程序,展示了支付方式是如何出现和执行的。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1HWheinV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/rks4i9dkzhqhqbc5fz3v.png)

鉴于 Adyen 平台支持的各种语言和框架,我们维护了超过 12 个在 UI 和功能方面相似但后端不同的示例。因此,Playwright 测试的容器化对我们来说非常有价值,因为它允许定义一个单个测试套件来验证多个应用程序(在每个 git 推送和/或拉取请求上)。

我们有效地创建了一个运行测试应用程序和被测试应用程序的环境。在自动化测试结束时,环境不再存在。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xsnaLRoJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/su90745mq9jy67k5mjcc.png)

让我们看看其中一个应用程序的 GithubActions工作流文件:

• 先签出源码,构建Docker镜像并在8080上运行

• 拉取并运行针对应用程序侦听端口8080的测试套件 Docker 映像

name: E2E (Playwright)

on:
  push:
  pull_request:
    branches: [ main ]

jobs:
  checkout:
    runs-on: ubuntu-latest
    steps:
      # checkout application code
      - name: Checkout project
        uses: actions/checkout@v2
      # build application Docker image
      - name: **Step 1: build image (application)**
        run: docker build -t test-image:latest .
      # run application Docker image
      - name: **Step 2: start container (application)**
        run: docker run --rm -d --name test-image -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -test-image:latest
      - name: **Step 3: run Testing Suite container**
        # run testing suite Docker image
        run: docker run --rm --name adyen-testing-suite --network host ghcr.io/adyen-examples/adyen-testing-suite:latest

进入全屏模式 退出全屏模式

结论

我希望这篇文章有助于阐明 Playwright with Docker,它尚未被广泛(尚未)使用或记录。这里有价值的收获是,使用 Docker,可以设计在开发环境和 CI/CD 引擎之间可移植的自定义 E2E 工作流。

如果您喜欢这篇文章,请关注me和Adyen Developers以获取更多文章和教程。祝测试愉快!

---

参考文献

Github上的 Adyen 集成示例

Adyen 测试套件Github

Docker 上的剧作家页