Playwrightプロジェクトの構築方法とお薦めのESLint設定

# 概要
PlaywrightはE2Eテストを自動化するためのテストツールです。
同様のツールにはSeleniumがあるが、それに比べいくつか魅力的な機能が備えられている。

* テストに必要なブラウザ、ツールを自動インストールしてくれる[^Playwright_1]
* コードジェネレータが標準で付属している
* テストレポートが充実している

本記事では、Playwrightの構築方法と筆者の推奨するESLintの設定を紹介する。

# 環境
nodeJS 20.11.1
@playwright/test 1.50.1
typescript-eslint 8.24.0

# 導入手順
## Playwrightプロジェクトの作成
https://playwright.dev/docs/intro

```
npm init playwright@latest
```

```
// 初回のみ表示される。
Need to install the following packages:
create-playwright@1.17.135
Ok to proceed? (y) y

> npx
> create-playwright

// 各種設定を行う
Initializing project in '.'
√ 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
```

完了すると下記のようにファイルが作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/efcdb30c-1a61-48dc-948a-88439fce8555.png)

この時、Typescriptを選択しても、`tsconfig.json`は作成されない。
後述の`ESLint`を使用する際に必要なため、下記コマンドで作成する。[^ESLint_1]
```
npx tsc --init
```

## Playwright Test for VSCodeをインストールする
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/f9db495b-9bb5-44dd-b1d4-6838549dcd34.png)

インストールが完了すると、サイドバーにTEST EXPLORER（三角フラスコ マーク）が追加され、テスト一覧が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/7104a57d-e88d-462c-a0fe-4abe60c69774.png)

:::note warn
[Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)や[Mocha Test Explorer](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter)などのテスト拡張機能がインストールされている場合、競合してテスト一覧が表示されない場合があるのでワークスペース上で無効化したり、プロファイルを分けておくことを推奨する。
:::

また、インストール後、ガター部に実行ボタンが表示され、クリックで即座実行ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/50e168d5-9010-40cd-a9a0-5636acbdfa41.png)

## ESLintを導入する
導入は必須でないが、`await`のつけ忘れによる予想外の動作を防止するため、`@typescript-eslint/no-floating-promises`を設定することをお薦めする。

https://typescript-eslint.io/getting-started/
```
npm install --save-dev eslint @eslint/js typescript typescript-eslint
```

```typescript:eslint.config.mjs
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
    {
        files: ['tests/**/*.ts'],
        extends: [
            eslint.configs.recommended,
            tseslint.configs.recommendedTypeChecked,
        ],
        rules: {
            // 実際にはrecommendedTypeCheckedに含まれるため不要だが明示のため記載
            "@typescript-eslint/no-floating-promises": "error"
        },
        languageOptions: {
            parserOptions: {
                projectService: true,
                tsconfigRootDir: import.meta.dirname,
            },
        },
    }
);
```

ターミナルからチェックを実行する際は下記のコマンドを実行すればよい。
```
npx eslint
```

また、ESLint拡張機能を入れておくと、コーディング中にエラーを検出してくれる。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

うまくeslintが実行されない場合、コマンドパレットから`ESLint: Restart ESLint Server`を実行する。

# 動作確認
Playwrightプロジェクト作成時に作成された`example.spec.ts`を開き、`getting start link`を実行する。
この時、PlaywrightパネルでShow browserチェックを入れるとブラウザを起動してテストを実行してくれる。

下記の動画では、１回目そのまま実行。２回目awaitを削除して実行を行っている。
awaitを削除した段階で`@typescript-eslint/no-floating-promises`が検出される。
また、実行時testが先に終了してしまい、`Error: expect.toBeVisible: Target page, context or browser has been closed`が発生する。

![playwright-execute.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/0d4ca1aa-a674-4bcb-819f-9dd161bf8f22.gif)


[^Playwright_1]:Seleniumの場合、別途WebDriver（ChromeDriverなど）のインストールが必要となるがPlaywrightは不要になる。
[^ESLint_1]: tsconfig.jsonがなかった場合、`Parsing error: (TSファイル名) was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject.`というエラーがでて、ESLintが動作しない。