ReactでPlaywrightでテストを書いてみる

Windows環境でReact Playwrightという環境でテスト書いてみる
参考
https://zenn.dev/azukiazusa/articles/playwright-component-testing

とりあえずTypeScriptでcreate-react-app

npx create-react-app sample-react-playwright --template typescript

npm init playwright@latest -- --ct

proceed でy選択

reactかvueかsvlteの選択をせまられるのでreact選択

以下が作成された

├── playwright
│   ├── index.html
│   └── index.ts
├── playwright-ct.config.ts

簡単なソースを用意　以下はボタン押すとカウンターが増えるサンプル

Counter.tsx

import React, { useState } from "react";
import "./Counter.css";

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p className="hidden md-block">You clicked {count} times</p>
      <p className="md-hidden">{count}</p>
      <button>Click me</button> 
    </div>
  );
};

export default Counter;

テストファイルをsrc直下に配置。以下のように記述する

Counter.spec.tsx

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

test("increments the counter", async ({ mount }) => {
  const component = await mount(<Counter />); // ②

  const button = component.locator('role=button[name="Click me"]'); // ③
  await button.click();

  const paragraph = component.locator("role=paragraph"); // ④
  expect(await paragraph.textContent()).toBe("You clicked 1 times");
});

コンポーネントをmountで定義し、
locatorで要素の取得している。
取得した要素(ボタン)をclickし、
paragrphロールを要素取得し、
expectするというもの。

Counter.css

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md-hidden {
    display: none;
  }
  .md-block {
    display: block;
  }
}

元のsrc/inde.tsxの呼び出しをAppからCounterに変更

ファイル作成結果

実行してみる（このテストは失敗する予定）

npm run test-ct

失敗
clickが実行されていないとのこと

別ターミナルで以下を実行し、レポート見れるようにしておく

npx playwright show-report

エラーレポートが見れる

以下は詳細

テストが成功するように以下のように編集

Counter.tsx

- <button>Click me</button>
+ <button onClick={() => setCount((prev) => prev + 1)}>Click me</button>

もう1回実行

npm run test-ct

パスできている

テストごとにViewportを変更できるみたい

あとブラウザ表示もできる。
playwright-ct.config.tsのuseに　headless=False　を追加

ブラウザすぐ閉じてしまうので、
sleep替わりに以下いれておく。

await new Promise(resolve => setTimeout(resolve, 5000))

実行するとエラーになってしまっていた。

ブラウザを見ると画面サイズの関係か表示がうまく You clicked 1 times が表示できず、1 だけになっている。
ブラウザ見れるとパッとわかってよいですね。
shapshotも取れると思うので今度試してみよ。

テストを通すためにViewportのサイズを変更してみる。
width 320 -> 1000

再実行＞上手く表示され、テストもOKになった。

使いやすくてよいですね。これからちょこちょこ使ってこー。