🐾

【WSL】Playwrightのインストール手順と基本的な使い方 🎭

に公開
Playwright
E2E
自動テスト
tech

はじめに

本記事では、Playwrightのインストールから、簡単な操作確認までをハンズオン形式で紹介します。
これからPlaywrightを学習したい方向けの記事です。

「自動テストは難しそう」と感じるかもしれませんが、まずは触って動かしてみるところから始めてみましょう。

環境

今回の環境は以下のとおりです。

  • WSL (Ubuntu)

プロジェクト作成

はじめに、Playwright用のプロジェクトを作成します。
ここでは hello_playwright という名前のプロジェクトを作成します。

$ mkdir hello_playwright

次に、プロジェクトルートへ移動します。

$ cd hello_playwright

Playwrightのインストール

https://playwright.dev/docs/intro

以下のコマンドを実行し、Playwrightをインストールします。

$ npm init playwright@latest

コマンド実行後、いくつか質問が表示されます。
今回は以下の設定にします。

メッセージにも表示されますが、OSに依存するライブラリは手動でインストールできます。
以下のコマンドを実行してください。

$ sudo npx playwright install-deps

これにより、Playwrightを動かすために必要なライブラリがインストールされます。

不要ファイルを削除

初期状態で作成されるサンプルファイルは、今回は使用しないため削除します。

  • testsフォルダの example.spec.ts
  • tests-examplesフォルダ

ファイルを追加

testsフォルダに github.spec.ts を追加します。

これで事前準備は完了です。

コード生成（Playwright Inspector）

Playwrightには、操作を記録してコードを自動生成する Inspector 機能があります。
今回はこれを使って、GitHubのログイン操作を記録してみます。

以下のコマンドを実行します。

$ npx playwright codegen https://github.com/login

ブラウザとInspectorが起動します。

ブラウザ上で、GitHubのログイン画面に
IDとパスワードを入力すると、Inspector側にコードが自動生成されます。

サインインボタンを押下後、生成されたコードをコピーし、github.spec.ts に貼り付けます。
※ コードは必要に応じて調整してください。

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

test('sign in', async ({ page }) => {
  await page.goto('https://github.com/login');
  await page.getByLabel('Username or email address').fill('youraddress@example.com');
  await page.getByLabel('Password').click();
  await page.getByLabel('Password').fill('xxxxxxxx');
  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
});

※ 実際のアカウント情報は、コードに直接書かないよう注意してください。

これで、GitHubにログインするテストコードが作成できました。

テスト実行

次に、テストを実行してみましょう。

以下のコマンドを実行します。
--ui オプションを付けると、UIモードで起動します。

$ npx playwright test --ui

UI画面が表示されたら、Run ボタンをクリックします。

ログイン処理が実行され、結果が画面に表示されます。

さいごに

今回は、Playwrightのインストールから簡単な操作確認までを行いました。

最初は分からないことが多くても、

  • コードを生成して
  • 実行して
  • 動きを確認する

という流れを体験することで、Playwrightの全体像が見えてきます。

まずは「動かせた」という成功体験を大切にして、少しずつ慣れていきましょう。

Discussion