Zenn
Open4

E2Eテストフレームワーク【Playwright】に入門してみる。

Playwright
MSKMSK

Next.jsプロジェクトでPlaywrightを使ってみる

まずは適当にNext.jsプロジェクトを用意して

terminal
npx create-next-app@latest nextjs-playwright-example --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm

続いて、Playwrightのインストール

terminal
npm init playwright@latest

後は公式リファレンスを参照しながらテストの生成をし実行する。

公式サイト

https://playwright.dev/docs/intro

MSKMSK

Docker環境でplaywrightのVRTをしたいが、構築につまづいてしまった。（´-`）.｡oO

来週迄になんとか出来るか頑張ってみよう。

MSKMSK
Dockerfile.e2e
FROM mcr.microsoft.com/playwright:v1.42.1-jammy

WORKDIR /e2e
docker-compose.yml
version: '3.8'
services:
  app:
    container_name: next-app
    build:
      context: .
    tty: true
    environment:
    - WATCHPACK_POLLING=true
    volumes:
    - ./next-app:/app
    ports:
    - '3000:3000'
    - '5555:5555'
    restart: always
    networks:
      - app_network
    command: sh -c "npm run dev"
    depends_on:
      - db
  e2e:
    container_name: playwright
    build:
      context: ./e2e
      dockerfile: ./Dockerfile.e2e
    volumes:
      - ./e2e/playwright:/e2e
    ipc: host
    ports:
      - '9323:9323'
    networks:
      - app_network
  db:
    image: postgres:16-alpine
    container_name: "${CONTAINER_NAME}"
    environment:
      POSTGRES_HOST_AUTH_METHOD: trust
      POSTGRES_USER: "${POSTGRES_USER}"
      POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
      POSTGRES_DB: app_db
    ports:
      - 5432:5432
    restart: always
    volumes:
      - ./postgres/db:/var/lib/postgresql/data/
    networks:
      - app_network

networks:
  app_network:
    driver: bridge