手動から自動化へ: Playwright で初めてのテストを書く

プレイライトによる自動化テスト

自動化テストは日々人気を集めており、自動化をマスターするのに役立つツールが数多く提供されています。正しいものを選択するのが最も難しい場合があります。

Playwright は、その柔軟性と特に JavaScript での使いやすさから人気を得ている優れたツールです。 UI テストを実行する最速の 1 つであると考えられている劇作家。この記事では、Playwright でJavaScriptを使用して最初のテストを作成するプロセスとコード例について説明します。

劇作家のインストール

最初のテスト ケースを書き始める前に、Playwright をインストールする必要があります。これを行うには、IDE 内のターミナルで次のコマンドを実行します。 VScodeのインストールもお勧めします (無料で、最初のテストを作成するのに最適です)。

 npm install playwright

最初のテストを書く 🍾

テストケース

1. google.com を起動
2. 劇作家を検索
3. 検索後、タイトルの劇作家にチェックを入れる
4. ブラウザを閉じる

まず、テストのアーキテクチャを書き始めましょう。

 const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); });

beforeAll は、すべてのテストの前に必ず 1 回発生します。実際のテストの前にテスト要件を設定するために使用すると非常に便利です。たとえば、API を使用してテスト用のデータを生成したり、テストで使用する変数を初期化したりします。

afterAllの考え方は beforeAll と同じです。

すべてのテストの後に一度だけ発生します。を使用してブラウザーを閉じたり、テストの実行後にデータを消去するためのアクションを実行したりできます。

これらの変数は、後でブラウザーとページを操作するために必要です。

 let browser; let page;

これは、実際のテストを作成するテスト本体です。

 it('should return result search in google ', async () => { });

beforeAll内にブラウザを開くことを追加しましょう

beforeAll(async () => { browser = await chromium.launch(); // here you can use any other browser if you want page = await browser.newPage(); await page.goto('https://www.google.com'); });

beforeAll内で Chrome を起動し、google.com に移動しました。

テストボディを追加しましょう

it('should return search results', async () => { await page.fill('id=input', 'Automation testing'); // you an search any other text here await page.press('id=input', 'Enter'); await page.waitForNavigation(); const title = await page.title(); expect(title).toContain('Automation testing'); });

私たちの結果⬆️

1. ページで入力を見つけて、そこにプレイライトを書きます。 fill 、テストする入力に値を入力するために通常使用するメソッドです。

 await page.fill('id=input', 'Automation testing');

2. この入力内で Enter キーを押すことをシミュレートします。

 await page.press('id=input', 'Enter');

3. ページが読み込まれるまで待ちます。そのため、ページが完全に読み込まれるまでテストを続行しません。

 await page.waitForNavigation();

4. 最後に、 title関数を使用して、検索結果ページのタイトルを取得します。

 const title = await page.title();

5. アサーションを使用して、タイトルに Playwright (または正しいページにリダイレクトされたことを確認するために検索していた別の文字列) が含まれているかどうかを確認します。

 expect(title).toContain('Automation testing');

afterAll内にブラウザを閉じることを追加しましょう

afterAll(async () => { await browser.close(); });

afterAll内では、すべてのテスト後にブラウザを閉じます

テストの実行

これにより、すべてのテストが実行されます

npx playwright test

特定のテスト ファイルを実行する場合

npx playwright test your-file.js

テストを実行すると、Playwright は HTML レポートも生成します。これはデバッグに非常に役立ちます。テストをいくつかのステップに分割し、失敗したテストを取得した場合、いつでもどこで失敗が発生したかを確認し、より迅速にデバッグできます。

これを実行してレポートを開きます

npx playwright show-report

この記事のリード画像は、HackerNoon のAI Image Generatorによって「コードを書く開発者」というプロンプトを介して生成されました。