やあ、 今日は、テスト用のコードを生成する方法を学びます。 まず、アプリケーションを実行する必要があるため、端末に と入力すると、アドレス でアプリケーションが起動して実行されます。 npm run dev http://localhost:5173 ここで、Playwright コード ジェネレーターを実行する必要があります。これを行うには、ターミナルで別のタブを開き、 と入力する必要があります。このコマンドは、新しいブラウザーと Playwright インスペクターを開きます。 npx playwright codegen これで、ブラウザーに空のタブが表示され、Playwright インスペクターが新しいページに表示され、ブラウザーで行う操作を聞く準備が整いました。ブラウザーのアドレス バーに移動して Playwright Inspector で何かが変更されていることがわかります。検査官はページの変更に気づき、このステップをテスト本文に追加しました。 http://localhost:5173, これで、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(); }); ご覧のとおり、生成されたコードは優れていますが、完全ではありません。このツールを肩に当てて使用し、毎回結果を確認して、テストの価値を確認してください。 コードをコピーしてテスト ファイルに貼り付け、内容を改善します。 まず、テスト名を から に変更し、goto 値を から に変更します。これは、ベース ルートがホームページに対応しているためです。 test should win the player "X" 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 この記事の結果は 見つけることができます ここで
