Playwright on Dockerをセットアップする(2022)

jestでの利用が非推奨になっていた

関連記事：
DockerのPlaywrightにGoogle Chrome(とEdge)を追加する
Docker Playwrightのスリム化を考える
ChromeでPlaywright codegenを行う方法

------------------- ↓ 前書はここから ↓-------------------

E2EについてはSeleniumばっかり扱っていたので、
Playwrightはちょっとご無沙汰。
久々に実行してみると、
すっかり動かなくなっていた。

(^_^;) なんでやねん

Jest経由で設置していたのだが、
どうやらテストランナーがPlaywright本体に移り、
インストール方法なども変わっていた。

「 We recommend the official Playwright test-runner (@playwright/test)」

It's more flexible, lightweight, optimized for Playwright, and has TypeScript support out of the box. This doesn't mean, that we stop with maintaining this package.
https://github.com/playwright-community/jest-playwright

メンテは続けるけど本家使ってねてところか。

(￣ー￣) もう一回最初からやってみるか。

ということで再度セットアップから整理してみることにした。
決して焼き直し記事ではない。断じて！

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

---

------------------- ↓ 本題はここから ↓-------------------

プロジェクト作成

Playwright側にテンプレートがあるので、
それを使ってプロジェクトを作成する

npm init playwright@latest pw-project
 Initializing project in 'pw-project'
 ✔ Do you want to use TypeScript or JavaScript? · TypeScript
 ✔ Where to put your end-to-end tests? · tests
 ✔ Add a GitHub Actions workflow? (Y/n) · false
 ✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via sudo npx playwright install-deps')? (y/N) · false
npx playwright test

Dockerfile作成

docker経由で使うので、
ビルドのためのDockerfileを作る。

touch Dockerfile

./Dockerfile

# Prebuilt MS image
FROM mcr.microsoft.com/playwright:focal

ENV PWUSER pwuser

# Install aws-lambda-ric build dependencies
#RUN echo 'nameserver 1.1.1.1' | tee /etc/resolv.conf
RUN apt-get update && apt-get install -y sudo bash-completion less nano wget curl\
 && usermod -aG sudo $PWUSER\
 && echo '%sudo ALL=(ALL) NOPASSWD:ALL' | tee -a /etc/sudoers\
 && npm i -g npm\
 && npx playwright install msedge

USER $PWUSER

WORKDIR /home/$PWUSER/app
RUN sudo chown -R $PWUSER:$PWUSER /home/$PWUSER/app
COPY --chown=$PWUSER:$PWUSER . .

RUN npm init -y\
 && npm i -D playwright @playwright/test dotenv

# ENTRYPOINT ["node", "./sample.js"]

touch Dockerfile
touch .env
npm init -y
npm i -D playwright @playwright/test dotenv

docker-compose.yml作成

コマンド長くなるのでdocker-composeも使えるようにする

./docker-compose.yml

version: "3"
services:
  pw:
    container_name: pw
    image: pw:1.0
    build:
      context: .
      dockerfile: ./Dockerfile
    # tty: true
    user: 1000:1000
    dns:
      - 1.1.1.1
      - 8.8.8.8
    volumes:
      - ./:/home/pwuser/app/
    working_dir: /home/pwuser/app
    entrypoint: npx playwright test

Playwright起動

docker-compose run --rm pw 

 Running 75 tests using 1 worker
  Slow test file: [firefox] › example.spec.ts (36s)
  Slow test file: [webkit] › example.spec.ts (30s)
  Slow test file: [chromium] › example.spec.ts (23s)
  Consider splitting slow test files to speed up parallel execution

  75 passed (2m)

 To open last HTML report run:

  npx playwright show-report

(･∀･) テストかんりょー

firefox, webkit, chromiumでテストされているのがわかる

------------------- ↓ 後書きはここから ↓-------------------

Edgeを使う

IEのサポートがあと3ヶ月で終わる今日この頃(令和4年3月18日現在)
IEに変わるWindows標準としてMSEdgeとなるが、
テストでも必須になるだろう。
そこで先のテストにedgeを追加する。

上記、Dockerfile上ではインストールされているので、
テストランナーにegdeを追加する

playwright.config.ts

    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
+    {
+      name: 'Microsoft Edge',
+      use: {
+        channel: 'msedge',
+      },
+    },