HTML Reports และ Screenshots

เมื่อ test suite มี 100+ tests:

• terminal output อ่านยาก — scroll หาไม่เจอ
• ไม่เห็น pattern ของ failure
• ไม่มี screenshot ให้ดูว่า UI ตอน fail หน้าตาเป็นยังไง
• แชร์ผลให้ทีมลำบาก

HTML Report แก้ปัญหาทั้งหมดนี้ — interactive, มี screenshots, filter ได้, แชร์ได้

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

เปิด report:

npx playwright show-report

Report จะแสดง:

• สรุป pass/fail/skip
• แต่ละ test มี duration, steps, screenshots
• filter ตาม status, project, file
• click เข้าไปดู detail ของแต่ละ test ได้

ใช้ได้หลาย reporter พร้อมกัน:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    // terminal output ขณะรัน
    ['list'],

    // HTML report สำหรับคนดู
    ['html', { open: 'never', outputFolder: 'playwright-report' }],

    // JSON สำหรับ tool อื่นอ่าน
    ['json', { outputFile: 'test-results/results.json' }],

    // JUnit XML สำหรับ CI (Jenkins, GitLab, etc.)
    ['junit', { outputFile: 'test-results/junit.xml' }]
  ],
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // screenshot เมื่อ test fail
    screenshot: 'only-on-failure',

    // หรือ screenshot ทุก test (ใช้ storage เยอะ)
    // screenshot: 'on',
  },
});

ค่าที่ใช้ได้:

• 'off' — ไม่ถ่าย (default)
• 'on' — ถ่ายทุก test
• 'only-on-failure' — ถ่ายเฉพาะ test ที่ fail (แนะนำ)

Screenshot จะแนบใน HTML report อัตโนมัติ — click ดูได้เลย

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    video: 'retain-on-failure',
  },
});

ค่าที่ใช้ได้:

• 'off' — ไม่อัด (default)
• 'on' — อัดทุก test
• 'retain-on-failure' — อัดทุกตัว แต่เก็บเฉพาะที่ fail (แนะนำ)
• 'on-first-retry' — อัดเฉพาะตอน retry ครั้งแรก

Video จะเป็น .webm อยู่ใน test-results/ folder

test('capture specific state', async ({ page }) => {
  await page.goto('/dashboard');

  // ถ่าย screenshot แบบ manual
  await page.screenshot({ path: 'screenshots/dashboard.png' });

  // ถ่ายเฉพาะ element
  await page.locator('.chart-panel').screenshot({
    path: 'screenshots/chart.png'
  });

  // ถ่ายทั้งหน้า (scroll down ด้วย)
  await page.screenshot({
    path: 'screenshots/full-page.png',
    fullPage: true
  });
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['html', { open: 'never' }],
    ['junit', { outputFile: 'test-results/junit.xml' }]
  ],
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',  // จะเรียนใน lesson ถัดไป
  },
  // เก็บ artifacts ใน folder นี้
  outputDir: 'test-results',
});