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する"を選択する。

https://nodejs.org/en

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e829ea97-8fb6-34a0-05c9-fc46bd98d871.png)

## install playwright

command promptでnpmでinstallする

```
npm init playwright@latest
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/33a7eb61-68c7-8ce9-d0c0-092aaef7cff4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/c3db1d61-6d83-13ec-5168-7f5db8926913.png)


実行後、以下のファイルが作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/4d1bb241-bb67-9461-967d-f231d147f80b.png)

## 実行

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

```
npx playwright test --ui
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/56b71e8a-ad4f-a802-aaa7-ce7d69cc810e.png)


# 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は適時変更のこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/0a5d6cda-101a-05b4-d697-93653e9872ce.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/ac41ae9f-c76d-4511-85a0-457f0142b81c.png)



参考

https://qiita.com/TMDM/items/396a7bb5d570fc43a776


# playwright chrome recorde

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/912d9daa-662d-d21e-6230-3e36039d41ec.png)