ลองใช้งาน Playwright ในการทำ e2e testing
สวัสดีครับ บทความนี้มาลองเล่น Playwright เพื่อเอามาทำ automate e2e testing ครับ Playwright เป็น e2e testing framework (end to end) ที่พัฒนาโดย Microsoft ตัว API มีความคล้ายกับ Puppeteer (แน่นอนแหละ main contributor ของ puppeteer ย้ายมา playwright)
ทำไมถึงเลือก Playwright
ด้วยความที่ผมไม่ใช่ Tester อาจจะไม่รู้จักเครื่องมือ หรือ Framework อะไรมากมายนัก มีแค่เคยใช้งานผ่าน ก็พวก Cypress, Puppeteer และเมื่อดู Playwright ตัว API แทบจะเหมือน Puppeteer ทำให้ ไม่มีเหตุผลอะไรที่จะไม่ใช้ Playwright
อีกอย่าง Playwright รองรับ JavaScript / TypeScript ซึ่งเป็นภาษาหลักที่ผมใช้งานอยู่แล้ว รวมถึง Community ก็โอเค แม้จะเทียบไม่ได้กับ Selenium ก็ตาม
ข้อดีของ Playwright
- รันได้ทุก browser (chromium, WebKit และ Firefox)
- รองรับ Cross-platform (Windows, Linux, Mac OS หรือ headless)
- รองรับหลายภาษา เช่น TypeScript, JavaScript, Python, .NET, Java (ในบทความนี้ผมขอใช้ TypeScript นะครับ)
ลองใช้งาน Playwright
ทำการสร้างโปรเจ็ค Playwright โดยการติดตั้งผ่าน npm เลย (ต้องมี Node.js บนเครื่องก่อน)
# ติดตั้งจากโปรเจ็คปัจจุบัน
npm init playwright@latest
# ติดตั้งโดยสร้าง project ใหม่
npm init playwright@latest my-projectจากนั้นก็ตอบคำถามที่ต้องการ เช่น เลือกภาษาอะไร ตั้งชื่อ folder tests อะไร? จะใช้ Github Actions มั้ย เป็นต้น
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · true
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · trueเมื่อได้โปรเจ็คแล้ว ตัวโฟลเดอร์จะมีโครงสร้างดังนี้
.
├── package-lock.json
├── package.json
├── playwright-report
│ └── index.html
├── playwright.config.ts
├── test-results
├── tests
│ └── example.spec.ts
└── tests-examples
└── demo-todo-app.spec.ts
4 directories, 6 filesตัวอย่างไฟล์เทส จะอยู่ในโฟลเดอร์ tests และ tests-examples
tests/example.spec.ts- เป็นตัวอย่าง e2e testing ง่ายๆtests-examples/demo-todo-app.spec.tsเป็นตัวอย่าง การเทส Demo Todo App
แต่ก่อนไปดูข้างในไฟล์ ลอง start sample test ดูก่อน
npx playwright testจะได้ผลลัพธ์ดังนี้
Running 6 tests using 5 workers
6 passed (3.6s)สามารถเปิดดูผลลัพธ์แบบ HTML ได้ด้วยคำสั่ง
npx playwright show-reportจะได้ผลลัพธ์แบบรูปด้านล่างนี้ และแต่ละ test case สามารถกดเข้าไปดูรายละเอียด test steps
รันเทสในโหมด UI
npx playwright test --uiจะเป็นโหมดเทส ที่มี UI ให้เรากด ดูข้อมูล test steps ดู Screenshot ต่างๆ
เขียน Test
หากเราดู example test จะเห็นว่าตัว test syntax ไม่แตกต่างจากการเขียน unit test มีกำหนด test() block และส่วน assertion ก็จะเป็น expect สิ่งที่ต่าง ก็คือ เราอาจจะต้องรู้ API ของ Playwrigh
ซึ่งถ้าดูโค๊ดด้านล่างนี้
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects the URL to contain intro.
await expect(page).toHaveURL(/.*intro/);
});
ตัว Playwright ทำการเปิดหน้าเว็บ ด้วยคำสั่ง
page.goto(URL)ใช้ PageAssertions toHaveTitle เพื่อเช็คว่าเพจที่เราเข้า มี title ตรงกับที่ expect มั้ย
await expect(page).toHaveTitle('')อื่นๆ เพิ่มเติม
config
นอกจากนี้ เราจะเห็นว่ามีไฟล์ playwright.config.ts ที่เป็น config ไฟล์ เราสามารถทำอะไรได้บ้าง?
- กำหนด folder
tests - เลือก browser ที่ต้องการเทสได้
- เลือก test reporter เช่น html, line, JSON หรือ อื่นๆ
Test Generator
หากเราไม่ถนัดการเขียน test เราสามารถ generate ด้วย codegen ได้ โดย script จะทำการเปิดหน้าเว็บที่เราต้องการเทส แล้วก็ record สิ่งที่เราจะเทส เช่น เราเลือกกด click button, input text ตัว Playwright ก็จะทำการ record และ generate ให้เรา เป็นโค๊ด spec.ts
npx playwright codegen URL
# กำหนด device เช่น เปิด iphone
npx playwright codege --device="iPhone 11" <URL>
สรุป
บทความนี้ก็เป็นเพียงแค่การแนะนำ Playwright สำหรับ e2e testing tool เบื้องต้นเท่านั้น ตัว Playwright ยังมี features / API อีกเพียบ สามารถศึกษาเพิ่มเติมได้จาก Docs ครับ
Happy Coding ❤️
Reference
