playwrightの環境構築をしてみた

フロント：Next.js（AppRouter）
バックエンド：Express
RDB：PostgreSQL

開発環境：Docker


```bash: ディレクトリ構成
/root
|---next-app(フロントエンド）
|     |---src/app/...
|     |---package.json
|     |---tsconfig.json   etc.
|
|---api(バックエンド)
|     |---src/...
|     |---prisma/...
|     |---package.json
|     |---tsconfig.json   etc.
|
|---compose.yaml
```

```yaml: 元のcompose.yaml
version: "3"
services:
  next:
    build:
      context: ./next-app
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
    volumes:
      - ./next-app:/usr/src/app
      - /usr/src/app/node_modules
    command: npm run dev

  app:
    build: ./api
    ports:
      - "4000:4000"
      - "9229:9229"
    volumes:
      - ./api:/usr/src/app
    depends_on:
      - db
    environment:
      - DATABASE_URL=${DATABASE_URL_DOCKER}

  db:
    image: postgres:latest
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: *****
      POSTGRES_PASSWORD: *****
      POSTGRES_DB: *****
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:
```

## playwriteを導入する
参考：公式ドキュメント
（ https://playwright.dev/docs/intro ）

    - プロジェクトのルートディレクトリにインストール
    ```bash
    npm install @playwright/test
    npx playwright install
    ```

- playwriteの初期化
    ```
    npm init playwright@latest
    ```
    このコマンドが正常に実行されると、プロジェクトのルートディレクトリに以下が自動生成される
    ```
    - tests/ => サンプルテストコードつき
    - tests-examples/
    - node_modules/
    - .gitignore
    - package.json
    - package-lock.json
    - playwrite.config.ts
    ```

- playwrite.config.tsの内容を必要に応じて調整（以下は自動生成後ほぼそのまま）
    ```typescript: playwrite.config.ts
    import { defineConfig, devices } from '@playwright/test';
    
    export default defineConfig({
      testDir: './tests',
      timeout: 30000,
      /* Run tests in files in parallel */
      fullyParallel: true,
      /* Fail the build on CI if you accidentally left test.only in the source code. */
      forbidOnly: !!process.env.CI,
      /* Retry on CI only */
      retries: 2,
      /* Opt out of parallel tests on CI. */
      workers: process.env.CI ? 1 : undefined,
      /* Reporter to use. See https://playwright.dev/docs/test-reporters */
      reporter: 'html',
      /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
      use: {
        /* Base URL to use in actions like `await page.goto('/')`. */
        baseURL: 'http://127.0.0.1:3000',
    
        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
        trace: 'on-first-retry',
      },
    
      /* Configure projects for major browsers */
      projects: [
        {
          name: 'chromium',
          use: { ...devices['Desktop Chrome'] },
        },
    
        {
          name: 'firefox',
          use: { ...devices['Desktop Firefox'] },
        },
    
        {
          name: 'webkit',
          use: { ...devices['Desktop Safari'] },
        },
    
        /* Test against mobile viewports. */
        // {
        //   name: 'Mobile Chrome',
        //   use: { ...devices['Pixel 5'] },
        // },
        // {
        //   name: 'Mobile Safari',
        //   use: { ...devices['iPhone 12'] },
        // },
    
        /* Test against branded browsers. */
        // {
        //   name: 'Microsoft Edge',
        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
        // },
        // {
        //   name: 'Google Chrome',
        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
        // },
      ],
    
      /* Run your local dev server before starting the tests */
      // webServer: {
      //   command: 'npm run start',
      //   url: 'http://127.0.0.1:3000',
      //   reuseExistingServer: !process.env.CI,
      // },
    });
    ```

- 最後にcompose.yamlの編集
    ```yaml: 追記後のcompose.yaml
    version: "3"
    services:
      next:
        build:
          context: ./next-app
          dockerfile: Dockerfile
        ports:
          - "3000:3000"
        environment:
          - PORT=3000
        volumes:
          - ./next-app:/usr/src/app
          - /usr/src/app/node_modules
        command: npm run dev
    
      app:
        build: ./api
        ports:
          - "4000:4000"
          - "9229:9229"
        volumes:
          - ./api:/usr/src/app
        depends_on:
          - db
        environment:
          - DATABASE_URL=${DATABASE_URL_DOCKER}
    
      db:
        image: postgres:latest
        ports:
          - "5432:5432"
        environment:
          POSTGRES_USER: *****
          POSTGRES_PASSWORD: *****
          POSTGRES_DB: *****
        volumes:
          - pgdata:/var/lib/postgresql/data
    
      playwright:
        image: mcr.microsoft.com/playwright:focal
        working_dir: /tests
        volumes:
          - ./next-app:/tests
          - ./tests:/tests
        command: ["npx", "playwright", "test"]
        depends_on:
          - next
    
    volumes:
      pgdata:
    ```

- docker composeを再ビルド
    ```
    docker compose down
    docker compose build
    docker compose up -d
    ```
    または
    ```
    docker compose down
    docker compose up --build
    ```


テストコード作成や実行はまだこれからです。
設定ファイルとかも変える必要とか出てくるんかな
とりあえずテスト準備はこれでOKそう。