最近、フロントエンドのエコシステムで新しい e2e ツールが登場し、有名になり始めました。その名は劇作家。この短いシリーズでは、これに関する情報と、開始するためのヒントをお伝えしたいと思います。 それは何ですか？ 劇作家とは何かから始めましょう。 Playwright は、e2e テストを処理するためのテスト フレームワークです。 Playwright を使用すると、e2e テストを作成し、Chrome、Firefox、Webkit などのさまざまなブラウザーで実行できます。 Windows、Mac、Linux、CI などの多くのプラットフォームでテストを実行でき、Typescript、Javascript、Java、Phyton、または .Net でテストを記述できます。 公式 を開くと、次の特徴を見つけることができます。 ウェブサイト 任意のブラウザ 任意のプラットフォーム 1 つの API 回復力のある不安定なテストなし トレードオフなし 制限なし 完全分離 高速実行 強力なツール 私の意見では、このツールはこれらすべての特性を反映しています。 TicTacToe アプリケーション この連載でvite+reactで構築したTicTacToeアプリを使いたいと思っています。 見つけることができます。 ここで ご覧のとおり、アプリケーションは簡単ですが、これで Playwright の最初のステップに進むことができます。 プレイライトをインストールする Playwright を使用するための最初のステップはインストールです。これは簡単です。ターミナルを開き、 と入力します (私は npm を使用していますが、yarn または pnpm を使用する場合は を参照してください)。さて、インストールはいくつかの質問をします: npm init playwright@latest docs エンドツーエンドのテストをどこに置くか?デフォルトのオプションは ですが、私は フォルダーを使用することを好みます。 tests e2e GitHub Actions ワークフローを追加しますか?デフォルトのオプションは です。このデモでは、今のところこのオプションを false のままにします。 false Playwright ブラウザーをインストールしますか (「npx playwright install」で手動で実行できます)?デフォルトのオプションは で、この値を使用しました true インストールが終了するまで待つ必要があります。インストールが完了したら...おめでとうございます。Playwright を使用する準備が整いました。 初見 リポジトリに作成されたインストール 3 つの新しいファイル: playwright.config.ts e2e/example.spec.ts tests-examples/demo-todo-app.spec.ts 一番簡単な最後のものから始めましょう😊 このファイルには、Playwright でテストを作成する方法の例のリストが含まれています。劇作家チームによって作成されたアプリケーション (単純な To Do アプリ) を使用し、ページを操作する方法を示します。 2つ目も引き続き。このファイルは playwright の Web サイトにあるいくつかのテストの簡単な例ですが、ここではテストのプレースホルダーとしてのみ提供しています。 そして今、最も重要な最初のもの。 Playwright は ファイルを使用してその構成を理解します。その中には、test フォルダーに関する構成、expect 関数で使用されるタイムアウト、Playwright がテストを実行するために使用するブラウザーの構成などがあります。 playwright.config.ts 最初のテストを実行する Playwright の動作を確認する時が来ました。ターミナルを再度開き、次のコマンド を実行します。結果はこのようなものです npx playwright test このレポートの Playwright は、その実行結果を表示し、すべてがうまくいったかどうかを確認できます。レポートには、構成で指定された各ブラウザー (この場合は Chromium、Firefox、および Webkit) の結果が表示されます。 最初のテストを書く それでは、Playwright で最初のテストを作成してみましょう。これを行う前に、テストを開始する前にアプリケーションを実行できるように Playwright を構成する必要があります。そのためには、 を開いて、次の構成を追加する必要があります。 playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; を実行しているポートを確認してください。vite によって公開されているのと同じポートを使用する必要があります。 NB コマンド npm run dev そして今、あなたの最初のテストの時間です。ファイル を開き、名前を に変更します。次に、ファイル内のすべてを消去し、インポート行 のみを残します。 . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts import { expect, test } from "@playwright/test"; 最初のテストを追加します test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); わかりました、一緒にこのテストを見てみましょう。まず、 機能を使ってテストであることを Playwright に示すことができます。すべてのテスト フレームワークと同様に、テスト関数の最初のパラメーターはテストの名前です。 2 番目のパラメーターは、アプリケーションをテストする関数です。 Playwright を使用すると、このような場合のテストは常に非同期になるため、この関数は常に非同期関数になります。この例の最初のコマンドは、アプリケーションのホームページに移動するよう Playwright に指示するコマンドです。ご覧のとおり、このコマンドはすでに非同期です。テストでこのページに移動できる場合、ページのタイトルが「Tic Tac Toe」であるかどうかをテストします。はい、初歩的なことですが、最初の一歩を踏み出す良い例です。 test ここで、Playwright でテストが実行されるかどうかを確認しますが、その前に、ここに示すように、package.json に新しいスクリプトを追加することで、Playwright とのやり取りを簡素化できます。 .... "scripts": { ... "e2e": "playwright test" }, これで、ターミナルで と入力して出来上がりです。テストは終了しました ✅ npm run e2e package.json に別のスクリプトを追加すると、ブラウザでレポート結果を開くことができます .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" }, これで、ブラウザーでコマンド を実行すると、最初のテストの結果を確認できます。 npm run e2e:report わかりました、今のところすべてだと思います。この投稿では、次のことを学びました。 プレイライトのインストール方法 テストの実行方法 Playwright で最初のテストを作成する方法 次の投稿では、劇作家の世界での旅を続けますが、今のところはそれだけです!またね、皆さん。 バイバイ psこの リンク でこの投稿の結果を見つけることができます
