ลองใช้งาน Playwright ในการทำ e2e testing

สวัสดีครับ บทความนี้มาลองเล่น Playwright เพื่อเอามาทำ automate e2e testing ครับ Playwright เป็น e2e testing framework (end to end) ที่พัฒนาโดย Microsoft ตัว API มีความคล้ายกับ Puppeteer (แน่นอนแหละ main contributor ของ puppeteer ย้ายมา playwright)

Fast and reliable end-to-end testing for modern web apps | Playwright

Cross-browser end-to-end testing for modern web appsplaywright.dev

ทำไมถึงเลือก 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

ซึ่งถ้าดูโค๊ดด้านล่างนี้

1
import { test, expect } from '@playwright/test'
2

3
test('has title', async ({ page }) => {
4
  await page.goto('https://playwright.dev/')
5

6
  // Expect a title "to contain" a substring.
7
  await expect(page).toHaveTitle(/Playwright/)
8
})
9

10
test('get started link', async ({ page }) => {
11
  await page.goto('https://playwright.dev/')
12

13
  // Click the get started link.
14
  await page.getByRole('link', { name: 'Get started' }).click()
15

16
  // Expects the URL to contain intro.
17
  await expect(page).toHaveURL(/.\*intro/)
18
})

ตัว Playwright ทำการเปิดหน้าเว็บ ด้วยคำสั่ง

1
page.goto(URL)

ใช้ PageAssertions toHaveTitle เพื่อเช็คว่าเพจที่เราเข้า มี title ตรงกับที่ expect มั้ย

1
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>

ตัวอย่าง codegen เว็บ playwright.dev

สรุป

บทความนี้ก็เป็นเพียงแค่การแนะนำ Playwright สำหรับ e2e testing tool เบื้องต้นเท่านั้น ตัว Playwright ยังมี features / API อีกเพียบ สามารถศึกษาเพิ่มเติมได้จาก Docs ครับ

Happy Coding ❤️

Reference

Installation | Playwright

Introductionplaywright.dev