## 背景
半年前に[[📜Playwrightのプレゼン作るために公式ドキュメントを読み込んで試したメモ]]を書いて、[[📘3年目、3回目のPlaywright記事を書く]] という記事を執筆した。
当時のバージョンは1.27.1だが #2023/04/07 時点での最新は1.32.2。この間にかなりアツイ変更があったので、それらをキャッチアップしてもう一度[[📒Articles]]を書こうと思う。
## 目的
- 現行の[[Playwright]]に関する[[ノート]]を一度最新化する
- 結構古い概念が多くて使えないものも多い
- [[📒Articles]]を書く
## 方針
[[Nuxt2]]と[[Vuetify2]]を利用したサンプルプロジェクトを題材とする。その理由は、[[Playwright]]が[[E2Eテスト]]や[[リグレッションテスト]]に効果的であり、今年はトレンドとなるであろう[[Vue3]]移行のキーとなりえるからだ。
そのためには **まずVue2環境で[[Playwright]]のテストを実行する** 必要がある。もちろん、その後に[[Vue3]]環境での実行も必要だが、[[Vue2]]環境に比べて情報を検索しやすく、真偽性も高いことが予想される。そのため、私は敢えていばらの道を進むため、[[Nuxt2]]と[[Vuetify2]]のプロダクトをベースにすることを決めた。
## 環境
```console
$ npm --version
8.19.2
$ node --version
v18.12.0
```
## プロジェクト作成
https://nuxtjs.org/ja/docs/get-started/installation を参考に。
```console
$ npm init nuxt-app nuxt2-vuetify2-playwright-sandbox
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxt2-vuetify2-playwright-sandbox
? Project name: nuxt2-vuetify2-playwright-sandbox
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
```
## 動作確認
```console
$ cd nuxt2-vuetify2-playwright-sandbox
$ npm run dev
```
localhost:3000にアクセスして画面が表示されることを確認。
## プロジェクトの整理
中身を整理して必要なものを残す。細かい過程は省略するが、最終的に以下[[URL]]のリポジトリができる。
#todo ba83121cca8db09e50bb2508f9c81f8fcc8cbf0f
## [[Playwright]]のインストール
https://playwright.dev/docs/intro より
```console
npm init playwright@latest
```
動作確認。[[UIモード (Playwright)|UIモード]]を使う。
```console
npx playwright test --ui
```
https://github.com/tadashi-aikawa/nuxt2-vuetify2-playwright-sandbox/tree/ebcb0ee8040568b4735a1412d47077a5a1ec0921
## 作成したコンテンツをテストするように作り変え
https://github.com/tadashi-aikawa/nuxt2-vuetify2-playwright-sandbox/tree/d890302657afc115fa0476be261f89d52c8827c9
## ポイント
- アサーション (https://playwright.dev/docs/test-assertions)
- `toHaveText("hoge")`: 完全一致
- `toHaveText(/hoge/)`: 部分一致
- `toBeVisible()`: 表示されているか
- `toBeHidden()`: 表示されていないか
- 操作系
- [[📝Playwrightでv-checkboxのチェックを操作(クリック)できない]]
## トラブル
- [[📝PlaywrightのUIモードで全テストを実行すると20テストケース弱でNuxt2のWebサーバーが落ちる]]