Web サイトをテストする方法: SIRV と Playwright を使用したテスト駆動開発 (TDD)

私は結婚式のため、そして旅行中の食べ物を翻訳するための食べ物翻訳ウェブサイトなど、いくつかのウェブサイトに取り組んできました。私が発見した楽しいことの 1 つは、これらの Web サイトをテストして、すべてが機能していることを確認する方法です。

テスト駆動開発 (TDD) とは何ですか?

SIRV と Playwright と呼ばれる、私が見つけた (というよりも教えてもらった) 2 つのツールは、Web サイトの運営とサイトの一部のテストに役立ちます。いくつかのテストを実行し、状況を改善する方法を見つけたら、それらのテストに基づいて更新や変更を加えることができます。これはテスト駆動開発と呼ばれ、テストによってアプリケーション内のギャップが明らかになり、テストに基づいて変更を加えます。

通常、これらのギャップはテストの不合格という形で発生します。たとえば、Web サイトにフォームがあり、食事制限の下で句読点の入力に失敗する場合は、句読点を使用できるようにフォーム入力を変更できます。これにより、アプリケーションがユーザーにとってより良いものになり、実行した元のテストに基づいた新機能が追加されました。

では、アプリケーションのテストはどうやって書くのでしょうか?

SIRVと劇作家とは何ですか？

SIRV は静的サイトサーバーです。これは、静的資産へのリクエストを処理するために最適化されたミドルウェアです。したがって、SIRV は静的サイトがある場合に最適に機能します。

一方、Playwright は Web アプリケーションのテスト方法です。これらを一緒に使用すると、Playwright がテストの作成と実行に使用するツールになることを意味します。 SIRV は、アプリケーションの実行を確認し、どのテストが成功したか失敗したかを確認できるインターフェイスです。

テストの作成

コードをテストするには、テストを作成する必要があります。この例では、Web ページに特定の単語または見出しがあるかどうかを確認するテストを作成しています。これを行うためのテストの作成には、GitHub Copilot を使用しました。 Playwright のドキュメントは、テストを書くための正しい出発点を与えてくれました。

Playwright をテスト作成に使用するには、Playwright をインポートする必要があります。ここがテスト作成の開始点です:

import { test, Expect } from '@playwright/test';

私たちの結婚式用に Web サイトを構築しました。ページ上で「Mish and Max」という見出しが検出されるかどうかをテストしたいと思いました。これをテストするために使用したコードは次のとおりです:

拡張子 .spec.test を持つ新しいファイルをプロジェクトに追加します。必ず保存し、変更を加えるたびに保存してください。テストを作成したので、実行しましょう。

テストに SIRV と Playwright を使用する

まず、これを機能させるには Node が必要です。 Node.js ドキュメントのガイドに従って、Windows、MacO、または Linux 用の Node をインストールします。

コードをテストする準備ができたら、VS Code または選択したエディターでターミナルを開きます。私は VS Code を使用しているため、ここでのデモでは VS Code を使用します。 [表示] > [表示] を選択してターミナルを開きます。メニュー バーからターミナルを選択するか、Ctrl + ` キーボード ショートカットを押します。

ターミナルを入手したら、実行する必要のあるコマンドがいくつかあります:

npm install @playwright/test - テスト ライブラリをインストールすることで Playwright テストをセットアップします。

npx playwright install - Chrome、FireFox、Safari などのテスト バージョンをダウンロードします。

npx sirv-cli 。 - これにより、テストのために SIRV のローカル バージョンが実行されます。

これで SIRV と Playwright のセットアップが完了し、準備が整ったので、テストを実行できます。 VS Code (または選択したエディタ) で新しいターミナルを開き、次のコマンドを実行します:

npx playwright test --ui これによりテストが実行され、新しいウィンドウが開き、テストを実行して実行中のテストを確認できます。

実行中の上記のすべてのコマンドは次のとおりです:

Playwright ターミナル テスト ウィンドウ:

テストの読み取りと修正

上記のテストでは、実行時に失敗することがわかります。この問題が発生する理由を調査すると、修正方法がわかります。 「エラー」タブを見ると、どのようなエラーが発生したかを確認できます:

この例では、次のようになります:

予期される文字列:「Contact Mish and Max」
受信した文字列:「連絡先」

言い換えれば、「ミッシュとマックスに連絡してください」を受け取ることを期待していましたが、代わりに「連絡してください」と表示されます。 *.html ファイルを見ると、2 つの 來快速修復此錯誤。現在我們可以再次執行測試：

這次，我們看到了✔️並且測試通過了？ .

編寫測試和編寫程式碼

現在您知道如何使用 SIRV 和 Playwright 編寫和運行測試，您可以繼續編寫更複雜的測試。例如，在上面的同一個聯絡表單上，我使用 GitHub Copilot 的幫助編寫了一個測試，以檢查是否可以填寫並提交聯絡表單：

我可以執行此測試，並逐步完成測試的每個部分，在 UI 中查看網站上進行的更改：

親自嘗試一下，讓我知道您正在編寫哪些測試，以及本指南是否有幫助。

以上がWeb サイトをテストする方法: SIRV と Playwright を使用したテスト駆動開発 (TDD)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。