プレイライトによる自動化テスト は日々人気を集めており、自動化をマスターするのに役立つツールが数多く提供されています。正しいものを選択するのが最も難しい場合があります。 自動化テスト 、その柔軟性と特に JavaScript での使いやすさから人気を得ている優れたツールです。 UI テストを実行する最速の 1 つであると考えられている劇作家。この記事では、Playwright で を使用して最初のテストを作成するプロセスとコード例について説明します。 Playwright は JavaScript 劇作家のインストール 最初のテスト ケースを書き始める前に、Playwright をインストールする必要があります。これを行うには、IDE 内のターミナルで次のコマンドを実行します。 のインストールもお勧めします (無料で、最初のテストを作成するのに最適です)。 VScode npm install playwright 最初のテストを書く 🍾 テストケース google.com を起動 劇作家を検索 検索後、タイトルの劇作家にチェックを入れる ブラウザを閉じる まず、テストのアーキテクチャを書き始めましょう。 const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); }); すべてのテストの前に必ず 1 回発生します。実際のテストの前にテスト要件を設定するために使用すると非常に便利です。 beforeAll は、 たとえば、API を使用してテスト用のデータを生成したり、テストで使用する変数を初期化したりします。 の考え方は beforeAll と同じです。 afterAll すべてのテストの後に一度だけ発生します。を使用してブラウザーを閉じたり、テストの実行後にデータを消去するためのアクションを実行したりできます。 これらの変数は、後でブラウザーとページを操作するために必要です。 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'); }); 内で Chrome を起動し、google.com に移動しました。 beforeAll テストボディを追加しましょう 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'); }); 私たちの結果⬆️ ページで入力を見つけて、そこにプレイライトを書きます。 、テストする入力に値を入力するために通常使用するメソッドです。 fill await page.fill('id=input', 'Automation testing'); この入力内で Enter キーを押すことをシミュレートします。 await page.press('id=input', 'Enter'); ページが読み込まれるまで待ちます。そのため、ページが完全に読み込まれるまでテストを続行しません。 await page.waitForNavigation(); 最後に、 関数を使用して、検索結果ページのタイトルを取得します。 title const title = await page.title(); アサーションを使用して、タイトルに 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
