Playwright UI

📄

Select a script or create a new one

Select a run to view logs

No run selected.

▶

Playwright UI — คู่มือการใช้งาน

เครื่องมือสำหรับรัน Playwright script และดูผลลัพธ์ผ่านหน้าเว็บ

ภาพรวมระบบ

📄

Scripts

เขียน แก้ไข และจัดการไฟล์สคริปต์ · เลือก mode การรัน · กด Run เพื่อเริ่มทันที

⚡

Runs

ดูประวัติการรันทั้งหมด · ดู log แบบ real-time · Kill process · ลบ log ที่ไม่ต้องการ

📊

Reports

เปิด HTML Report ของ Playwright Test ที่สร้างหลังรันเสร็จ · ดูใน iframe หรือ new tab

ขั้นตอนการใช้งาน

ไปที่ tab Scripts แล้วกด + New Script

ตั้งชื่อไฟล์ ต้องลงท้ายด้วย .js, .ts หรือ .mjs

เลือก Mode — Node สำหรับสคริปต์ทั่วไป, Test สำหรับ Playwright Test

เขียนโค้ด แล้วกด Save จากนั้นกด ▶ Run

ดู log แบบ real-time ที่ tab Runs · กด ■ Kill หากต้องการหยุด

ดู Report ที่ tab Reports (เฉพาะ mode Test ที่รันเสร็จสำเร็จ)

Node vs Test Mode

	Node Mode	Test Mode
รันด้วย	`node script.js`	`npx playwright test`
ใช้สำหรับ	Automation, Scraping, งาน one-off	การทดสอบที่มี expect/assert
HTML Report	ไม่มี	สร้างอัตโนมัติ
import จาก	`playwright`	`@playwright/test`

ตัวอย่างโค้ด

Node เปิดเว็บและถ่าย Screenshot

// screenshot.js
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();

await page.goto('https://example.com');
console.log('Title:', await page.title());
await page.screenshot({ path: 'screenshot.png' });

await browser.close();
console.log('บันทึก screenshot แล้ว');

💡 ไฟล์ screenshot.png จะอยู่ในโฟลเดอร์ของ run นั้น ใน /data/playwright/runs/

Node ดึงข้อมูลจากเว็บ (Scraping)

// scrape.js
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com');

const items = await page.$$eval(
  '.titleline > a',
  els => els.slice(0, 5).map(el => ({
    title: el.textContent,
    url: el.href,
  }))
);

items.forEach((item, i) =>
  console.log(`${i+1}. ${item.title}`)
);

await browser.close();

Node กรอกฟอร์มและ Login

// login.js
import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com/login');

await page.fill('#email', 'user@example.com');
await page.fill('#password', 'secret');
await page.click('button[type=submit]');

// รอหน้าโหลดหลัง login
await page.waitForURL('**/dashboard');
console.log('Login สำเร็จ:', page.url());

await browser.close();

Test Playwright Test พร้อม HTML Report

// check-page.spec.js
import { test, expect } from '@playwright/test';

test('หน้าแรกโหลดได้', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('มีข้อความ Hello World', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(
    page.locator('h1')
  ).toContainText('Example Domain');
});

💡 ใช้ mode Test เมื่อรัน — จะสร้าง HTML Report ให้อัตโนมัติ ดูได้ที่ tab Reports

เคล็ดลับ

⌨️

Tab key ในหน้า editor = เยื้องโค้ด 2 spaces

🔄

กด Run จาก tab Scripts จะ save อัตโนมัติก่อนรัน แล้วสลับไป tab Runs ทันที

📁

ไฟล์ทั้งหมดอยู่ที่ /data/playwright/scripts/ บน server — แก้ผ่าน UI หรือ SSH ก็ได้

🛑

กด ■ Kill ใน Runs เพื่อหยุด process ที่รันอยู่ ส่ง SIGTERM ให้ process

🌐

Browser ที่พร้อมใช้: chromium, firefox, webkit — เปลี่ยนได้ในโค้ด

📸

Screenshot และไฟล์ output จะถูกบันทึกใน /data/playwright/runs/run-xxx/