Playwright でテスト コードを生成する方法

やあ、

今日は、テスト用のコードを生成する方法を学びます。

まず、アプリケーションを実行する必要があるため、端末にnpm run devと入力すると、アドレスhttp://localhost:5173でアプリケーションが起動して実行されます。

ここで、Playwright コード ジェネレーターを実行する必要があります。これを行うには、ターミナルで別のタブを開き、 npx playwright codegenと入力する必要があります。このコマンドは、新しいブラウザーと Playwright インスペクターを開きます。

これで、ブラウザーに空のタブが表示され、Playwright インスペクターが新しいページに表示され、ブラウザーで行う操作を聞く準備が整いました。ブラウザーのアドレス バーに移動してhttp://localhost:5173, Playwright Inspector で何かが変更されていることがわかります。検査官はページの変更に気づき、このステップをテスト本文に追加しました。

これで、1 つの正方形をクリックして、2 人のプレイヤー間のゲームをシミュレートできます。インスペクターがこれらすべてのステップを記録し、テストの本体を作成することに気付くでしょう。これらのアクションの結果はこれです

test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

ご覧のとおり、生成されたコードは優れていますが、完全ではありません。このツールを肩に当てて使用し、毎回結果を確認して、テストの価値を確認してください。

コードをコピーしてテスト ファイルに貼り付け、内容を改善します。

まず、テスト名をtestからshould win the player "X"に変更し、goto 値をhttp://localhost:5173/から/に変更します。これは、ベース ルートがホームページに対応しているためです。

次に、最初のクリックをリファクタリングすることは、おそらくテストを改善するための良いリファクタリングであるためawait page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click();最後に、アサーションを追加します。この場合、テスト名がshould win the player "X"場合、最良のアサーションは次のようなものです

const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

したがって、コードは勝者のテキストを含む段落を取得しようとし、値にX値が含まれているかどうかを確認します。最終結果は次のとおりです。

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

これで、テストを実行して結果を確認できます。結果は緑色になるはずです。

わかりました、コード生成からすべてだと思います。

この記事では、手順を記録し、それらをテスト用のコードに変換する方法を学びました。前に言ったように、責任を持ってこのツールを使用し、生成されたコードを毎回確認してください。

それだけです、人々。

またね👋

ps この記事の結果はここで見つけることができます