ติดตั้งและเริ่มต้น Playwright

Playwright ไม่ได้เป็นแค่ตัว “กด browser” แต่มันคือ test runner + browser automation + tooling ครบชุด

เหตุผลที่หลายทีมเลือก Playwright:

• มี auto-waiting ช่วยลดการเขียน wait แบบเดาสุ่ม
• รองรับหลาย browser ในเครื่องมือเดียว
• มี reporter, trace viewer, screenshot และ debugging tools มาให้พร้อม
• syntax อ่านง่าย และเหมาะกับทั้งผู้เริ่มต้นและทีมที่ทำ CI จริงจัง

ถ้าคุณเคยใช้ Selenium หรือ Cypress มาก่อน สิ่งที่ Playwright ทำให้ทีมง่ายขึ้นบ่อย ๆ คือเรื่องความเสถียรและ DX ระหว่างเขียน test

เหมาะกับคนที่ยังไม่มีโปรเจกต์ Playwright เลย

mkdir my-playwright-project
cd my-playwright-project
npm init playwright@latest

ระหว่างติดตั้ง คำสั่ง npm init playwright@latest จะถามหลายคำถาม เช่น:

เหตุผลของคำแนะนำชุดนี้:

• TypeScript ช่วยให้ autocomplete และ refactor ง่ายขึ้น
• tests เป็นชื่อมาตรฐานที่คนในทีมมักคาดไว้
• ยังไม่ต้องเพิ่ม GitHub Actions ถ้าคุณกำลังโฟกัสที่การรันบนเครื่องก่อน
• ควรติดตั้ง browser engines ตั้งแต่แรก เพื่อไม่ให้มาสะดุดตอน run test

หลังติดตั้งเสร็จ Playwright จะดาวน์โหลด browser engines อย่าง Chromium, Firefox และ WebKit ให้อัตโนมัติ

ติดตั้งในโปรเจกต์ที่มีอยู่แล้ว

npm install -D @playwright/test
npx playwright install

ถ้าโปรเจกต์มี web app อยู่แล้ว วิธีนี้มักเหมาะกว่า เพราะคุณแค่เติม test stack เข้าไป ไม่ได้สร้าง template ใหม่ทั้งโปรเจกต์

อย่าเพิ่งข้าม เพราะไฟล์เริ่มต้นพวกนี้จะอยู่กับคุณตลอดคอร์ส

my-playwright-project/
├── node_modules/
├── tests/
│   └── example.spec.ts
├── tests-examples/
│   └── demo-todo-app.spec.ts
├── playwright.config.ts
├── package.json
└── package-lock.json

ข้อแนะนำสำหรับมือใหม่:

• อย่ารีบลบ example.spec.ts จนกว่าจะรันผ่านครั้งแรก
• tests-examples/ มีไว้ให้ดูแนวทาง ไม่จำเป็นต้องเก็บไว้ถ้าเริ่มรำคาญ
• playwright.config.ts คือไฟล์ที่คุณจะกลับมาแก้บ่อยที่สุด

ตอนเริ่มต้นยังไม่ต้องจำทุกค่า แต่ควรรู้ว่าค่าไหนเปลี่ยนพฤติกรรมการรัน test

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  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'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

ค่าที่ควรรู้ก่อน:

• testDir บอกว่า Playwright จะไปหา test ไฟล์ที่ไหน
• retries สำคัญมากใน CI เพราะช่วย rerun เมื่อ fail ชั่วคราว
• baseURL ทำให้คุณเขียน page.goto('/') ได้ง่ายขึ้น
• projects ใช้กำหนด browser หรือ device ที่ต้องการรัน
• trace ช่วยให้ debug test fail ได้ง่ายขึ้นมาก

ถ้าเพิ่งเริ่ม ใช้หลักง่าย ๆ คือ:

• ตั้ง baseURL ให้ตรงกับแอปที่คุณจะทดสอบ
• เปิด reporter: 'html' ไว้ก่อน
• อย่ารีบเพิ่ม browser/project เยอะเกินไปในวันแรก

แค่ 4 คำสั่งนี้ก็พาเริ่มทำงานได้ค่อนข้างครบแล้ว

รัน test ทั้งหมด:

npx playwright test

รันเฉพาะไฟล์:

npx playwright test tests/example.spec.ts

รันด้วย UI mode:

npx playwright test --ui

ดู HTML report:

npx playwright show-report

แนวทางใช้ในชีวิตจริง:

• ระหว่างพัฒนาใช้ --ui หรือรันเฉพาะไฟล์ จะเร็วกว่า
• ก่อน push หรือก่อนสรุปงาน ค่อยรันทั้ง suite
• ถ้า fail แล้วงง ให้เปิด report หรือ trace แทนการเดาสาเหตุ

ไม่จำเป็นต้องใช้ แต่ช่วยให้เริ่มต้นและ debug สะดวกขึ้นมาก

ติดตั้ง extension ชื่อ Playwright Test for VS Code จาก Microsoft:

• รัน test จาก editor ได้เลย
• ดู test results แบบ real-time
• debug ด้วย breakpoints
• pick locator จากหน้าเว็บจริง

extension นี้มีประโยชน์มากตอน:

• อยาก rerun แค่ test เดียว
• อยากใช้ breakpoints
• อยากดู locator หรือ error ใกล้กับ code เลย