Playwright + windows

Outline

PlaywrightはUIテスト自動化を実現する、OSSのソフトである。
Python + Selenium 等で実装する場合、 Selenium , browserのdriverを用意するなど、準備が少し大変である。Playwrightはすべてが1setになっているため、導入が簡単である。

setup

install Node.js for npm

nodejsのinstallerをもちいてinstallする。
install optionで"必要なライブラリーなどはinstallする"を選択する。

その後、command promptを起動し、npmを実行し、動くことを確認する

install playwright

command promptでnpmでinstallする

npm init playwright@latest

実行後、以下のファイルが作成される

実行

作成時にsample codeが既に作成されている。
そのため、ためしに起動する

npx playwright test --ui

ui optionをつけることで、下記のようなGUIが立ち上がる。
ここで、再生ボタンをクリックするとテストが実行される。
optionをつけない場合、UIなしでテスト実行が行われる。

Sample Script ログイン

実際にログインする処理を例にscriptを作成し、実行してみる

シナリオは以下の通り

1. https://keiba.rakuten.co.jp/ にアクセスする
2. 'マイページログイン'をクリックする
3. '楽天会員 ログイン'が表示されていることを確認する
4. 入力フォームにuser id (xxxxx)を入力する
5. '次へ'をクリックする
6. 入力フォームにpassword (zzzzz)を入力する
7. 'ログイン'をクリックする
8. 'マイページトップ'が表示されていることを確認する

// @ts-check
const { test, expect } = require('@playwright/test');

test('get started login', async ({ page }) => {
  // 1. go to top
  await page.goto('https://keiba.rakuten.co.jp/');

  // 2. Click the get started link.
  await page.getByRole('link', { name: 'マイページログイン' }).click();

  // 3. Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: '楽天会員 ログイン' })).toBeVisible();
  
  // 4. input user id
  await page.getByRole('textbox', { name: 'ユーザIDまたはメールアドレス' }).fill('XXXXX');
  
  // 5. click Next
  await page.getByRole('button', { name: '次へ' }).click();
  
  // 6. input user password
  await page.getByRole('textbox', { name: 'パスワード' }).fill('ZZZZZ');
  
  // 7. click Next
  await page.getByRole('button', { name: 'ログイン', exact: true }).click();
  
  // 8. Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'マイページトップ' })).toBeVisible();
  
});

実際の実行結果
※user/passwordは適時変更のこと。

Playwrightで要素を特定するとき、アクセシブルネームを使う。
この情報を取得するとき、chromeのdeveloper toolを使うと確認できる

参考

playwright chrome recorde

実際にコードを書くのは大変だ！
そういった場合、キャプチャ＆リプレイを使うと簡単にコード作成をしてくれる

npx playwright codegen https://keiba.rakuten.co.jp

以下のように、chromeとrecode結果が出力されるコンソールが表示される。
このchrome上で操作すると、その処理がコンソールにscriptとして自動生成される。
Assertの設定も、上記メニューから選択して追加できる。