Playwright の GitHub reporter を試してみた
はじめに
Playwright のドキュメントを眺めていたところ、テスト結果の出力形式がいくつかあり、その中に GitHub 用の設定があることを知りました。実際に試してみたところけっこう便利そうだったので使い方をまとめておこうと思います。
環境構築は省きますが、もし試してみたい！という方がいればこちらを参考に環境構築してください。
GitHub reporter を使うとこうなる
失敗したテストコードにアノテーションしてくれるようになります。
ただ1点、Playwright ではテストが失敗した時に自動でリトライしてくれる機能があるのですが、
テストが失敗した時にリトライした分も含めてアノテーションされます。
そのため、自動リトライを2回に設定した状態でテストが失敗した場合、計3回実行されるのでアノテーションも3つになります。
重複をなくす方法をご存知の方がいれば教えていただけると助かります🙏
GitHub reporter を試してみる
reporter を指定する方法は2種類あります。
- コマンドラインオプション
-
playwright.config.tsのreporterオプション
今回は playwright.config.ts で設定することにしました。
reporter に github を指定することで、GitHub reporter を使用できます。
初期設定から変更していなければ、html になっていると思います。
const config: PlaywrightTestConfig = {
...
- reporter: 'html',
+ reporter: process.env.CI ? 'github' : 'list',
...
};
設定は以上です。
GitHub reporter の動作確認
今回は下記のシンプルなカウンターアプリをテストします。
import { useState } from "react"
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => setCount((c) => c + 1)
return (
<div style={{textAlign: 'center'}}>
<h1>Counterサンプル</h1>
<p data-testid="count">{count}</p>
<button data-testid="increment" onClick={increment}>countUp</button>
</div>
)
}
export default Counter
テストコードもシンプルです。
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('カウントアップボタンをクリックすると、カウントが増加すること', async ({ page }) => {
await page.locator('data-testid=increment').click();
await expect(page.locator('data-testid=count')).toContainText('1');
});
reporter のパワーが発揮されるのはテストが失敗した時なので、
わざとテストが失敗するように修正します。
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('カウントアップボタンをクリックすると、カウントが増加すること', async ({ page }) => {
await page.locator('data-testid=increment').click();
- await expect(page.locator('data-testid=count')).toContainText('1');
+ await expect(page.locator('data-testid=count')).toContainText('2');
});
この状態で push します。
すると、テストが失敗した箇所にアノテーションされるようになっていると思います🎉
終わりに
GitHub reporter を使うとこうなるでも触れましたが、現状はアノテーションが重複してしまうので、なんらかの方法で解消したいなーと思っています。
Playwright には自作の reporter を使う方法もあるので、これを使って解消できないか検討中です。
参考
Discussion