🎭
【WSL】Playwrightのインストールと操作について 🎭
はじめに
Playwrightのインストールから簡単な操作方法について記述します。
これからPlaywrightを学習する方向けの記事となります。
環境
- WSL (Ubuntu)
プロジェクト作成
はじめにPlaywright用にプロジェクトを作成します。ここでは hello_playwright
というプロジェクトを作成ます。
$ mkdir hello_playwright
次にプロジェクトルートに移動してインストールを行います。
$ cd hello_playwright
インストール
以下のコマンドを実行して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('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
Runボタンをクリックすると、ログイン処理が開始されます。
実行後、実行結果が表示されます。
お疲れ様でした。これでハンズオンは終了です。
Discussion