Playwright 설치 오류 해결: failed to create browser context, $HOME 환경 변수, gstack setup failed

Error: Failed to launch chromium because executable doesn't exist

browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium-1124/chrome-linux/chrome

Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium-1124/chrome-linux/chrome

- name: Set Playwright Browsers Path
  run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/ms-playwright" >> $GITHUB_ENV

- name: Check Playwright Browsers Path
  run: echo "Playwright Browsers Path ---> ${{ env.PLAYWRIGHT_BROWSERS_PATH }}"

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

Error: browserType.launch:
╔══════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just updated to 1.40.0. ║
║ Please update docker image or install new browsers:                   ║
║                                                                       ║
║   npx playwright install                                              ║
║                                                                       ║
║ <3 Playwright Team                                                    ║
╚══════════════════════════════════════════════════╝

node_modules/
  playwright/          # 버전 1.40.0
  playwright-core/     # 버전 1.38.0  ← 버전 불일치!

{
  "dependencies": {
    "playwright": "1.40.0",
    "playwright-core": "1.40.0"
  }
}

npm ls playwright-core
# 출력 예시:
# my-project@1.0.0
# └── @playwright/test@1.38.0
#     └── playwright-core@1.38.0

Error: Failed to launch chromium because executable doesn't exist at ...
╔═ Tip: Run playwright install --with-deps to install missing browsers and dependencies. ╗
║ Missing libraries:                                                                     ║
║   libgtk-3.so.0: not found                                                            ║
║   libnss3.so: not found                                                                ║
║   libnspr4.so: not found                                                               ║
╚════════════════════════════════════════════════════════════════════════════════════════╝

- name: Install Playwright with system deps
  run: npx playwright install --with-deps

- name: Install Chromium only
  run: npx playwright install --with-deps chromium

Error: browserType.launch: Browser closed unexpectedly!
TROUBLESHOOTING: https://playwright.dev/docs/troubleshooting

  at BrowserType.launch (node_modules/playwright-core/lib/server/browserType.js:90:13)

- name: Cache Playwright browsers
  uses: actions/cache@v4
  id: playwright-cache
  with:
    path: ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-playwright-

- name: Install Playwright Browsers
  if: steps.playwright-cache.outputs.cache-hit != 'true'
  run: npx playwright install --with-deps

name: CI - E2E Test with Playwright

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 30

    steps:
      # 1. 코드 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v4

      # 2. Node.js 설정
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      # 3. 의존성 설치
      - name: Install dependencies
        run: npm ci

      # 4. Playwright 브라우저 캐시 확인
      - name: Cache Playwright browsers
        uses: actions/cache@v4
        id: playwright-cache
        with:
          path: ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-playwright-

      # 5. Playwright 설치 경로 환경 변수 설정
      - name: Set Playwright browsers path
        run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/ms-playwright" >> $GITHUB_ENV

      # 6. 캐시 MISS일 때만 브라우저 설치
      - name: Install Playwright Browsers
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: npx playwright install --with-deps chromium

      # 7. 설치 경로 검증
      - name: Verify Playwright installation
        run: |
          echo "Playwright version: $(npx playwright --version)"
          echo "Browsers path: $PLAYWRIGHT_BROWSERS_PATH"
          ls -la $PLAYWRIGHT_BROWSERS_PATH || echo "Path not found"

      # 8. E2E 테스트 실행
      - name: Run Playwright tests
        run: npx playwright test
        env:
          CI: true

      # 9. 테스트 실패 시 리포트 업로드 (선택사항)
      - name: Upload Playwright report
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7

- name: Install system dependencies (even if browser cache hit)
  run: npx playwright install-deps chromium
  
- name: Install Playwright Browsers (if no cache)
  if: steps.playwright-cache.outputs.cache-hit != 'true'
  run: npx playwright install chromium

# Playwright 공식 이미지 사용 (브라우저가 미리 설치되어 있음)
FROM mcr.microsoft.com/playwright:v1.40.0-jammy

WORKDIR /app

# 의존성 설치
COPY package*.json ./
RUN npm ci

# 소스 코드 복사
COPY . .

# 테스트 실행
CMD ["npx", "playwright", "test"]

# docker-compose.yml
version: '3.8'

services:
  playwright-test:
    image: mcr.microsoft.com/playwright:v1.40.0-jammy
    volumes:
      - .:/app
      - /app/node_modules
    working_dir: /app
    command: npx playwright test
    environment:
      - CI=true

docker-compose run --rm playwright-test

FROM node:20-slim

# Playwright가 필요한 시스템 패키지 설치
RUN apt-get update && apt-get install -y \
    libglib2.0-0 \
    libnss3 \
    libnspr4 \
    libatk1.0-0 \
    libatk-bridge2.0-0 \
    libcups2 \
    libdrm2 \
    libdbus-1-3 \
    libxcb1 \
    libxkbcommon0 \
    libx11-6 \
    libxcomposite1 \
    libxdamage1 \
    libxext6 \
    libxfixes3 \
    libxrandr2 \
    libgbm1 \
    libpango-1.0-0 \
    libcairo2 \
    libasound2 \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /app
COPY package*.json ./
RUN npm ci
RUN npx playwright install chromium

COPY . .
CMD ["npx", "playwright", "test"]

PWDEBUG=1 npx playwright test

# 특정 테스트만 디버깅
PWDEBUG=1 npx playwright test --grep "로그인 테스트"

# headless 대신 실제 브라우저 창을 띄워서 실행
npx playwright test --headed

# 천천히 실행 (각 액션 사이에 500ms 대기)
npx playwright test --headed --slow-mo=500

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // 테스트 실패 시 스크린샷 캡처
    screenshot: 'only-on-failure',
    // 테스트 실패 시 비디오 녹화
    video: 'retain-on-failure',
    // 테스트 실패 시 trace 저장 (재현 가능)
    trace: 'on-first-retry',
  },
  retries: process.env.CI ? 2 : 0,
});

# HTML 리포트 생성 (브라우저에서 열 수 있는 UI)
npx playwright test --reporter=html

# 리포트 열기
npx playwright show-report

# 잘못된 예
- run: npm ci
- run: npx playwright test  # 브라우저가 없어서 실패!

# 올바른 예
- run: npm ci
- run: npx playwright install --with-deps chromium
- run: npx playwright test

# 잘못된 예 — root로 설치하면 /root/.cache에 저장됨
sudo npx playwright install

# 이후 일반 사용자로 실행하면 /home/runner/.cache에서 찾으므로 실패
npx playwright test

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      # deploy job도 Playwright가 필요하다면 여기서도 설치
      - run: npx playwright install --with-deps chromium

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,  // CI에서 test.only 사용 금지
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

- name: Run Playwright tests
  run: npx playwright test
  env:
    BASE_URL: ${{ secrets.TEST_BASE_URL }}
    API_KEY: ${{ secrets.TEST_API_KEY }}

Error: Failed to launch chromium because executable doesn't exist

browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium-1124/chrome-linux/chrome

- name: Set Playwright Browsers Path
  run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/ms-playwright" >> $GITHUB_ENV

- name: Check Playwright Browsers Path
  run: echo "Playwright Browsers Path ---> ${{ env.PLAYWRIGHT_BROWSERS_PATH }}"

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium