Playwright Testing Framework の紹介

最近、フロントエンドのエコシステムで新しい 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 init playwright@latestと入力します (私は npm を使用していますが、yarn または pnpm を使用する場合はdocsを参照してください)。さて、インストールはいくつかの質問をします:

1. エンドツーエンドのテストをどこに置くか?デフォルトのオプションはtestsですが、私はe2eフォルダーを使用することを好みます。
2. GitHub Actions ワークフローを追加しますか?デフォルトのオプションはfalseです。このデモでは、今のところこのオプションを false のままにします。
3. Playwright ブラウザーをインストールしますか (「npx playwright install」で手動で実行できます)?デフォルトのオプションはtrueで、この値を使用しました

4. 
   

インストールが終了するまで待つ必要があります。インストールが完了したら...おめでとうございます。Playwright を使用する準備が整いました。

初見

リポジトリに作成されたインストール 3 つの新しいファイル:

• playwright.config.ts

• e2e/example.spec.ts

• tests-examples/demo-todo-app.spec.ts

  
  

一番簡単な最後のものから始めましょう😊 このファイルには、Playwright でテストを作成する方法の例のリストが含まれています。劇作家チームによって作成されたアプリケーション (単純な To Do アプリ) を使用し、ページを操作する方法を示します。

2つ目も引き続き。このファイルは playwright の Web サイトにあるいくつかのテストの簡単な例ですが、ここではテストのプレースホルダーとしてのみ提供しています。

そして今、最も重要な最初のもの。 Playwright はplaywright.config.tsファイルを使用してその構成を理解します。その中には、test フォルダーに関する構成、expect 関数で使用されるタイムアウト、Playwright がテストを実行するために使用するブラウザーの構成などがあります。

最初のテストを実行する

Playwright の動作を確認する時が来ました。ターミナルを再度開き、次のコマンドnpx playwright testを実行します。結果はこのようなものです

このレポートの Playwright は、その実行結果を表示し、すべてがうまくいったかどうかを確認できます。レポートには、構成で指定された各ブラウザー (この場合は Chromium、Firefox、および Webkit) の結果が表示されます。

最初のテストを書く

それでは、Playwright で最初のテストを作成してみましょう。これを行う前に、テストを開始する前にアプリケーションを実行できるように Playwright を構成する必要があります。そのためには、 playwright.config.tsを開いて、次の構成を追加する必要があります。

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

NB コマンドnpm run devを実行しているポートを確認してください。vite によって公開されているのと同じポートを使用する必要があります。

そして今、あなたの最初のテストの時間です。ファイル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"); });

わかりました、一緒にこのテストを見てみましょう。まず、 test機能を使ってテストであることを Playwright に示すことができます。すべてのテスト フレームワークと同様に、テスト関数の最初のパラメーターはテストの名前です。 2 番目のパラメーターは、アプリケーションをテストする関数です。 Playwright を使用すると、このような場合のテストは常に非同期になるため、この関数は常に非同期関数になります。この例の最初のコマンドは、アプリケーションのホームページに移動するよう Playwright に指示するコマンドです。ご覧のとおり、このコマンドはすでに非同期です。テストでこのページに移動できる場合、ページのタイトルが「Tic Tac Toe」であるかどうかをテストします。はい、初歩的なことですが、最初の一歩を踏み出す良い例です。

ここで、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このリンクでこの投稿の結果を見つけることができます