【WSL】Playwrightのインストールと操作について

はじめに

Playwrightのインストールから簡単な操作方法について記述します。
これからPlaywrightを学習する方向けの記事となります。

環境

• WSL (Ubuntu)

プロジェクト作成

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

$ mkdir hello_playwright

次にプロジェクトルートに移動してインストールを行います。

$ cd hello_playwright

インストール

https://playwright.dev/docs/intro

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

$ npm init playwright@latest

インストール時の設定を以下にします。

メッセージに表示されていますが、OSに依存するライブラリは手動でインストールすることができます。

$ sudo npx playwright install-deps

以下のファイルがインストールされます。

不要ファイルを削除

testsフォルダの example.spec.ts と tests-examplesフォルダを削除します。

ファイルを追加

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

これで準備は完了です。

Playwrightのインスペクターでコードを生成し、実際に動かしてみましょう。

githubにログインするコードを書いていきたいと思います。

コード生成

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

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

ブラウザとインスペクターが表示されます。

IDとPasswordを入力すると、インスペクターにコードが生成されます。

サインインボタンを押下後、インスペクターのコードをコピーして、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('[e-mail]');
  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

Runボタンをクリックすると、ログイン処理が開始されます。

実行後、実行結果が表示されます。

お疲れ様でした。これでハンズオンは終了です。