Section 04 · Module 08 · Lesson 02 · ~15–20 นาที

Trace Viewer Deep Dive

เวลาเรียน: 15–20 นาที ต้องรู้มาก่อน: Lesson 01 (Reports) รูปแบบ: อ่าน + Code Lab + แบบฝึก

จบบทนี้แล้วคุณจะ...

อธิบายว่า Trace เก็บข้อมูลอะไรบ้าง
ตั้งค่า trace recording (on, retain-on-failure, on-first-retry)
เปิดและใช้ Trace Viewer วิเคราะห์ปัญหา
ใช้ traces ใน CI เพื่อ debug test ที่ fail บน server

1 · Trace คืออะไร?

Trace คือ "กล่องดำ" ของ test — บันทึกทุกสิ่งที่เกิดขึ้นระหว่าง test ทำงาน:

Actions — ทุก click, fill, navigate พร้อม timestamp
Screenshots — ภาพหน้าจอก่อนและหลังแต่ละ action
Network — ทุก HTTP request/response (รวม headers, body)
Console — ทุก console.log, error, warning
Source — test code ที่รันพร้อม highlight บรรทัดปัจจุบัน

เทียบได้กับ DevTools แต่ย้อนเวลากลับไปดูได้

2 · ตั้งค่า Trace

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

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

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

ค่า	พฤติกรรม	เหมาะกับ
`'off'`	ไม่บันทึก	production test ที่เสถียรมาก
`'on'`	บันทึกทุก test	debug ช่วง development
`'retain-on-failure'`	บันทึกทุกตัว เก็บเฉพาะ fail	ค่าแนะนำสำหรับทีม
`'on-first-retry'`	บันทึกเฉพาะ retry ครั้งแรก	CI ที่มี retry

แนะนำ: ใช้ 'retain-on-failure' เป็น default — ไม่เปลืองพื้นที่แต่มี trace พร้อมเมื่อต้องการ

3 · เปิด Trace Viewer

# เปิด trace จาก file
npx playwright show-trace test-results/auth-login/trace.zip

# หรือเปิดจาก HTML report — click ที่ test ที่ fail แล้วกด "Traces"
npx playwright show-report

Trace Viewer จะเปิดใน browser พร้อม UI ที่มี:

Timeline — แถบเวลาด้านบน เลื่อนไปแต่ละ action ได้
Actions panel — รายการ actions ทั้งหมดทางซ้าย
Screenshot — ภาพหน้าจอตรงกลาง (ก่อน/หลัง action)
Network tab — request/response ของ action ที่เลือก
Console tab — console messages ณ เวลานั้น
Source tab — test code ที่กำลังรัน

4 · วิธีใช้ Trace Viewer วิเคราะห์ปัญหา

ขั้นตอนที่ 1: ดู Action ที่ Fail

เปิด trace → ดูรายการ actions ทางซ้าย → หา action ที่มีสัญลักษณ์ error (แดง)

ขั้นตอนที่ 2: ดู Screenshot ก่อน/หลัง

click ที่ action → ดู "Before" screenshot (หน้าจอก่อนทำ action) และ "After" screenshot → มักเห็นปัญหาทันที เช่น:

element ไม่ปรากฏ
ข้อความผิด
modal บังอยู่

ขั้นตอนที่ 3: ตรวจ Network

click "Network" tab → ดูว่า API call ส่งไปถูก URL ไหม? response status เป็นอะไร? body มีข้อมูลถูกต้องไหม?

ขั้นตอนที่ 4: ตรวจ Console

click "Console" tab → ดู JavaScript errors ที่อาจทำให้ UI ไม่ทำงาน

5 · Trace ใน CI

// playwright.config.ts สำหรับ CI
import { defineConfig } from '@playwright/test';

export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
  },
});

ใน GitHub Actions — upload trace เป็น artifact:

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-traces
    path: test-results/
    retention-days: 7

จากนั้นดาวน์โหลด artifact → เปิดด้วย:

npx playwright show-trace path/to/trace.zip

หรือใช้ online viewer: https://trace.playwright.dev — ลาก trace.zip ไปวางได้เลย

6 · Trace Configuration ระดับ Test

// เปิด trace เฉพาะ test ที่ต้องการ debug
test('complex checkout flow', async ({ page, context }) => {
  // เริ่ม trace
  await context.tracing.start({ screenshots: true, snapshots: true });

  await page.goto('/checkout');
  // ... test steps ...

  // หยุด trace และ save
  await context.tracing.stop({ path: 'traces/checkout.zip' });
});

แบบฝึกหัด: วิเคราะห์สาเหตุ Test Failure จาก Trace

สถานการณ์: test นี้ fail:

test('user adds item to cart', async ({ page }) => {
  await page.goto('/products');
  await page.locator('[data-testid="product-1"]').click();
  await page.locator('.add-to-cart').click();
  await expect(page.locator('.cart-count')).toHaveText('1');
});

ข้อมูลจาก Trace Viewer:

Action	Screenshot (Before)	Screenshot (After)	Network	Console
goto /products	—	สินค้า 3 รายการ	GET /api/products → 200	—
click product-1	หน้า list	หน้า product detail	GET /api/products/1 → 200	—
click .add-to-cart	หน้า detail + ปุ่ม	ปุ่มเปลี่ยนเป็น "กำลังเพิ่ม..."	POST /api/cart → 401 Unauthorized	Error: "User not authenticated"
expect cart-count = '1'	.cart-count = '0'	TIMEOUT	—	—

คำถาม:

สาเหตุหลักของ failure คืออะไร?
ข้อมูลจาก tab ไหนที่ช่วยวิเคราะห์ได้มากที่สุด?
จะแก้ test นี้อย่างไร?

ดูคำตอบแนะนำ

สรุปคำตอบ

สาเหตุหลัก POST /api/cart ได้ 401 Unauthorized แปลว่า user ยังไม่ได้ login ก่อนกด add to cart ดังนั้นสินค้าไม่ได้ถูกเพิ่มเข้า cart จริง
Tab ที่ช่วยวิเคราะห์มากที่สุด
- Network tab — เห็นชัดว่า request POST /api/cart ได้ 401
- Console tab — เห็น error "User not authenticated" ช่วยยืนยันสาเหตุ
- Screenshot — เห็นว่าปุ่มเปลี่ยนเป็น "กำลังเพิ่ม..." แต่ไม่กลับสู่สถานะปกติ แปลว่า request ล้มเหลว
วิธีแก้ เพิ่ม login step ก่อน test หรือใช้ storageState จาก authenticated session

test.beforeEach(async ({ page }) => {
  // login ก่อนทุก test
  await page.goto('/login');
  await page.locator('#email').fill('[email protected]');
  await page.locator('#password').fill('password');
  await page.locator('button[type="submit"]').click();
  await page.waitForURL('/products');
});

สิ่งที่ต้องจำ

Trace = กล่องดำ ที่บันทึก actions, screenshots, network, console ทั้งหมด
'retain-on-failure' คือค่าแนะนำ — มี trace พร้อมใช้เมื่อ test fail
Trace Viewer มี timeline, screenshot ก่อน/หลัง, network, console — ครบในที่เดียว
ใน CI ให้ upload traces เป็น artifact แล้วดาวน์โหลดมาวิเคราะห์
https://trace.playwright.dev เปิด trace ออนไลน์ได้ ไม่ต้องติดตั้งอะไร

← บทเรียนก่อนหน้า บทเรียนถัดไป →