Playwright のコンポーネントテスト機能（プレビュー版）を触ってみる

Playwright v1.22.0 でコンポーネントテスト機能のプレビュー版が搭載された。

Playwright Test can now test your React, Vue.js or Svelte components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers.

実際のブラウザで React、Vue.js、Svelte のコンポーネントを動かしてテストできるとのこと。

akihisa1210

ドキュメントはこれ。（Version: 1.22 時点のものを参照）

akihisa1210

ドキュメントの "How to get started" では、新しいプロジェクトを作成してコンポーネントテストを試す例が示されている。
コマンドを実行し、インタラクションの中で TypeScript と React を選択すると、@playwright/experimental-ct-react がインストールされた。
サンプルアプリケーション（9

❯ npm init playwright@latest -- --ct
Need to install the following packages:
  create-playwright@latest
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Which framework do you use? (experimental) · react
✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via sudo npx playwright install-deps')? (y/N) · false
Initializing NPM project (npm init -y)…
Wrote to /home/akihisa/ghq/github.com/akihisa1210/sandbox-component-tests/playwright/package.json:

{
  "name": "playwright",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


Installing Playwright Component Testing (npm install --save-dev @playwright/experimental-ct-react)…

added 80 packages, and audited 81 packages in 7s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Downloading browsers (npx playwright install)…
Downloading Chromium 102.0.5005.40 (playwright build v1005) - 129.7 Mb [====================] 100% 0.0s 
Chromium 102.0.5005.40 (playwright build v1005) downloaded to /home/akihisa/.cache/ms-playwright/chromium-1005
Downloading Firefox 99.0.1 (playwright build v1323) - 76.6 Mb [====================] 100% 0.0s 
Firefox 99.0.1 (playwright build v1323) downloaded to /home/akihisa/.cache/ms-playwright/firefox-1323
Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [====================] 100% 0.0s 
Webkit 15.4 (playwright build v1641) downloaded to /home/akihisa/.cache/ms-playwright/webkit-1641
Writing playwright-ct.config.ts.
Writing playwright/index.html.
Writing playwright/index.ts.
Writing package.json.
✔ Success! Created a Playwright Test project at /home/akihisa/ghq/github.com/akihisa1210/sandbox-component-tests/playwright

Inside that directory, you can run several commands:

  npm run test-ct
    Runs the component tests.

  npm run test-ct -- --project=chromium
    Runs the tests only on Desktop Chrome.

  npm run test-ct App.test.ts
    Runs the tests in the specific file.

  npm run test-ct -- --debug
    Runs the tests in debug mode.

We suggest that you begin by typing:

  npm run test-ct

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

akihisa1210

作成されたファイル

❯ tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
├── playwright
└── playwright-ct.config.ts

2 directories, 3 files

playwright ディレクトリの中には index.html と index.ts がある。ドキュメントによると、ここでコンポーネントをレンダリングしてテストらしい。

❯ tree -L 1 ./playwright
./playwright
├── index.html
└── index.ts

0 directories, 2 files

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/playwright/index.ts"></script>
  </body>
</html>

index.ts

// Import styles, initialize component theme here.
// import '../src/common.css';

akihisa1210

ドキュメントの Step.2 に進む。
ドキュメントに従い、src/App.spec.tsx を作った。しかし、./App が存在しないためエラー。
事前に create-react-app をやっておく必要があるかも。

App.spec.tsx

import { test, expect } from "@playwright/experimental-ct-react";
import App from "./App";

test.use({ viewport: { width: 500, height: 500 } });

test("should work", async ({ mount }) => {
  const component = await mount(<App></App>);
  await expect(component).toContainText("Learn React");
});

akihisa1210

npx create-react-app playwright --template typescript で作られたディレクトリの中で npm init playwright@latest -- --ct した。（create-react-app の引数の playwright は React アプリケーションを作成するディレクトリ名）
既存プロジェクトにコンポーネントテストを追加するときもこれでよさそう。

❯ tree -L 1
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── playwright
├── playwright-ct.config.ts
├── public
├── src
└── tsconfig.json

4 directories, 5 files

akihisa1210

src/App.test.tsx はすでに存在するが、これをドキュメントに従って書き換える。

akihisa1210

npm run test-ct でテストが実行される。WebKit と Firefox のテストは（ローカル環境側の原因で）失敗してしまったので、Chromium のテストのみを流す。また、テスト中の画面を見てみたいのでデバッグモードで実行する。

npm run test-ct -- --project=chromium --debug