VSCodeでデバックができるPlaywrightの自動ソース生成(所要時間5分)

## Playwrightとは
Webサイトの自動テストツールです。Microsoft製のツールでブラウザの操作からソースを自動生成する機能があります。

Node.jsのプロジェクトをローカルに環境を作るのでPCを汚すことが少なくとも少ないと思っています。
(不要の場合はプロジェクトフォルダを削除で解決。npxでインストールするブラウザのプラグインは$HOME/.npm/_npxや他の場所に保存されていないのではと思っています)

![Playwrightのソース生成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/2275bf41-f53b-2bfd-70f6-60faf90145e3.png)

## 前提条件
・Node.jsがパソコンに入っていること。
入っていれば5分で実用できます。
(Macの場合のインストール方法は[こちら](https://qiita.com/ryouta33/items/193b43a524f11c045ed3))

## PlaywrightのTest Runner版
### 環境構築とProject作成(2分程度)

```sh
% cd project
% mkdir playwright
% cd playwright
# playwrightのプロジェクトを作成するツールのインストール
% npm install create-playwright@1.17.133
# playwrightのプロジェクトを作成する。
% npm init playwright@1.17.133
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

# node_modulesはnodeでダウンロードしたライブラリがあり、
# 自動テストの実行はこのフォルダーのファイルが必要になる。
% ls
node_modules		package.json		playwright.config.ts	test-results		tests-examples
package-lock.json	playwright-report	tests

% cd tests
# テストファイルは、xxx.spec.ts形式で保存する必要がある。
% ls
example.spec.ts		playwright.spec.ts	yuubin.spec.ts
```

### PlaywrightのTest Runner版の実行方法
#### Step1 ソースを自動生成(ブラウザ操作するだけ)

```sh
# コード生成のブラウザとツールを起動する。
% npx playwright codegen
```

起動後の状態
![Test Runnerを選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/659769a5-685e-28a1-4594-70df0f53e27d.png)

URL変更からブラウザ操作でソースを記録する。
![Playwrightのソース生成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/c4898e78-a482-0675-c051-d4ff7922d3de.png)

#### Step2 プロジェクトの所定の場所にコピーしたソースを保存する。
```sh
% cd playwright/tests
# xxx.spec.tsのファイル名規則の必要あり。
% vi playwright.spec.ts 
import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();
  
  // コピーしたソースに追記する。
  await page.pause();
});
```

#### Step3 コンソールからデバックモードで実行する。

```sh
% cd playwright

# テストフォルダの特定のファイルをテストする
% npx playwright test playwright.spec.ts --project=chromium --debug
```

起動したツールの実行ボタンを押す。
![PlaywrightのTest Runnerのソースを実行する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/438081fc-3fd4-3f28-afc3-307da2e6628b.png)

ブラウザが自動で動きpauseの行で止まる。
![pauseで止まる(Test Runner).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/64842ad5-a0b2-ea14-66c1-25dae061e607.png)

#### Step4 VSCodeのプラグインからデバックモードで実行する。
(VSCodeを使用しない場合はスキップ)
VSCodeのインストールは[ここから](https://code.visualstudio.com/download)

![プロジェクトを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/928be100-f66c-c486-9376-ca850acc79f6.png)

![prightwrightプロジェクトを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/3f1976ed-5482-8f59-2589-376352753072.png)

VSCodeの拡張機能の「Playwright Test for VSCode」をインストールする。
![VSCodeのPlaywrightのプラグイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/16620fb9-720a-c8bd-a6bb-bab5529b2e0c.png)

VSCodeでPlaywrightのデバック実行をする。
![VSCodeのデバッグ実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/574ff1f9-31ce-e94e-82d6-11b5040f89ac.png)

ブレークポイントで処理が止まりブラウザの状態を確認できる。
![Playwrightのブレークポイントで止める.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/7db8f187-7c77-6cd3-1a29-1b62603d8ca8.png)

実行時の変数の値も確認できる。
![変数にカーソルを合わせて値を確認できる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/ff167af5-8cbd-4e42-b036-6e761b32a96c.png)

#### Step5 ソースを改良してキャプチャーを取ることができる。

```ts:playwright_next_step.spec.ts
import { test } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // await page.waitForTimeout(1000); // 1秒待つ
  // URLを待つ(リダイレクトなど)
  // await page.waitForURL('https://playwright.dev/');

  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();

  // スクリーンショット(追加)
  await page.screenshot({
    path: './screenshot/' + getDateTimeString(new Date()) + '_waitFor.png',
    fullPage: true,
  });

  await page.pause();
});

// タイムスタンプ
function getDateTimeString(date: Date) : String {
  const locales: Intl.LocalesArgument = 'ja-JP';
  var dateTimeString = date.toLocaleDateString(locales, {
    year: 'numeric', month: '2-digit', day: '2-digit'
  }).replace(/\//g, '');

  dateTimeString += '_' + date.toLocaleTimeString(locales, {
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  }).replace(/:/g, '');

  return dateTimeString;
}
```

実行時にキャプチャーが保存される
![実行時にキャプチャーが保存される.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/c26b79a1-7407-9bd8-fa53-d5b5caf6d654.png)


#### その他実行コマンド

```sh
# UIモードでテスト
% npx playwright test --ui

# テストフォルダの特定のファイルをバックグラウンドでテストする。
% npx playwright test playwright.spec.ts --project=chromium

# バッググラウンドで、並行実行の数を5でtestフォルダ全てのテストを実行する。
% npx playwright test --workers=5 --project=chromium
```

## PlaywrightのLibrary版(おまけ)
ブラウザのタブ操作など細かい制御ができます。

### 環境構築とProject作成(1分程度)

```sh
% cd project
% mkdir node_playwright
% cd node_playwright
# playwrightをインストールする。
% npm install playwright@1.45.3
# 型情報をインストールする。
% npm install @types/node@22.1.0
# playwrightの拡張機能をインストールする。
% npx playwright install
```

### PlaywrightのLibrary版の実行方法
#### Step1 ソースを自動生成(ブラウザ操作するだけ)

```sh
# コード生成のブラウザとツールを起動する。
% npx playwright codegen
```

起動後の状態
![Libraryを選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/d430decb-5254-5d16-7fdd-590bbeab15e4.png)

#### Step2 プロジェクトの所定の場所に編集したソースを保存する。
```sh
% cd node_playwright
# mjsのファイルで保存する必要あり。
% vi playwright_next_step.mjs 
```

```js:playwright_next_step.mjs 
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://playwright.dev/');
  // await page.waitForTimeout(1000); // 1秒待つ
  // URLを待つ(リダイレクトなど)
  // await page.waitForURL('https://playwright.dev/');

  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();

  // スクリーンショット(追加)
  await page.screenshot({
    path: './screenshot/' + getDateTimeString(new Date()) + '_waitFor.png',
    fullPage: true,
  });

  await page.pause();

  // ---------------------
  await context.close();
  await browser.close();
})();

// タイムスタンプ
function getDateTimeString(date) {
  const locales = 'ja-JP';
  var dateTimeString = date.toLocaleDateString(locales, {
    year: 'numeric', month: '2-digit', day: '2-digit'
  }).replace(/\//g, '');

  dateTimeString += '_' + date.toLocaleTimeString(locales, {
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  }).replace(/:/g, '');

  return dateTimeString;
}
```

#### Step3 コンソールからデバックモードで実行する。

```sh
% cd playwright
# mjsファイルをnodeで実行する。
% node playwright_next_step.mjs
```

起動したツールの実行ボタンを押すとテストを実行する。
![PlaywrightをNodeで実行する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/1ae27950-5329-89df-dc0c-1dd189a56260.png)

実行時にキャプチャーが保存される
![実行時にキャプチャが保存あれる(Library).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/7032980b-7a57-03a7-1c94-80ec0aa590a2.png)