Coding Gun

End-To-End Testing ด้วย Playwright

Playwright คือ automated end-to-end testing framework ที่พัฒนาโดย Microsoft ซึ่ง Playwright ถือว่าเป็นเครื่องมือที่เข้ามาแก้ปัญหาและปิดข้อจำกัดของทั้ง Selenium และ Cypress

ทำไมต้องเป็น Playwright

Playwright ต่างจาก Selenium และ Cypress ตรงที่

Playwright vs Selenium
เปรียบเทียบความง่ายในการติดต้ังของ Playwright และ Selenium

ถ้าเราเขียน Playwright Code ด้วย JavaScript จะเริ่มต้นได้ง่ายมาก เพราะ playwright module จะมี Test runner มาให้อยู่แล้ว แต่ถ้าใช้ภาษาอื่นๆคุณต้องติดตั้ง Test runner เพิ่มอีก 1 ตัว

Playwright vs Cypress

ถ้าจะเปรียบเทียบ Automated Testing tools ที่เป็นทางเลือกสำหรับ tester รุ่นใหม่ก็จะเป็น Playwright(ออกมาในปี 2020) และ Cypress(ออกมาในปี 2017) แต่เนื่องจาก 2 ตัวนี้มีโครงสร้างของ Architecture ที่แตกต่างกัน ทำให้มีการทำงานที่แตกต่างกัน ซึ่งข้อแตกต่างของ Playwright และ Cypress มีดังนี้

ติดตั้ง Playwright

เข้าสู่ขั้นตอนการติดตั้ง อย่างที่เห็นในรูปด้านบนการติดตั้งจะแบ่งออกเป็น 2 ส่วนด้วยกันคือ

  1. เขียน Test Script ด้วย JavaScript
  2. เขียน Test Script ด้วยภาษาอื่นๆ

1. เขียน Test Script ด้วย JavaScript หรือ Typescript

ถ้าเราต้องการเขียน Test Script ด้วย JavaScript สิ่งที่เราต้องติดตั้งมีเพียงแค่ playwright module เท่านั้น เพราะในนั้นจะมี Test Runner มาให้อยู่แล้ว

$ npm init playwright@latest

หลังจาก run คำสั่ง npm init แล้วเราจะต้องเลือก packages ต่างๆที่จะติดต้ังลงไปโดยที่ต้องตอบคำถามต่างๆ ดังนี้

Need to install the following packages:
create-playwright@1.17.131
Ok to proceed? (y) 

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ 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) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

หลังจากนั้นเราเข้าไปใน folder tests จะมีตัวอย่าง test script มาให้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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 page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

ในตัวอย่างนี้จะเป็นการทดสอบใน 2 กรณีคือ

  1. เข้าไปที่ https://playwright.dev/ และดูว่า Title ของ page ต้องมีคำว่า Playwright
  2. กดปุ่ม Get started แล้วหลังจากนั้นจะมี tag H1 ที่มีคำว่า Installation

เริ่มทำการทดสอบ

หลังจากที่เราเขียน Test Script ของเราเสร็จเรียบร้อยแล้ว ถึงเวลาที่เราจะนำ Test Script ไป run ด้วยคำสั่ง

$ npx playwright test

ผลลัพธ์ที่ได้จะออกมาเป็น 6 tests โดยใช้ 4 workers

Running 6 tests using 4 workers
  6 passed (13.5s)

Playwright จะกำหนดจำนวน Workers ไว้เป็น 50% ของจำนวน CPU Cores ดังนั้นถ้ามี 8 cores เราจะได้ 4 workers เป็นค่าสูงสุดแต่ถ้าเราต้องการกำหนดจำนวน workers สามารถใส่จำนวน workers เข้าไปตอน run test ได้

$ npx playwright test --workers 4

และที่ออกมาเป็น 6 cases เนื่องจากในไฟล์ playwright.config.ts กำหนด projects(browsers และขนาดของหน้าจอ) ไว้ 3 projects

projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    }
]

เราสามารถเลือกทดสอบเฉพาะ project ที่ต้องการด้วยคำสั่ง

$ npx playwright test --project=chromium

ผลลัพธ์จะออกมาเหลือแค่ 2 cases เพราะ run เฉพาะบน Chromium เท่านั้น

Running 2 tests using 2 workers
  2 passed (1.5s)

หลังจากนั้นเปิดดู report ด้วยคำสั่ง

$ npx playwright show-report

Playwright report
ตัวอย่าง report ของ playwright

Debuging ด้วย Playwright UI

ถ้าระหว่างที่เราทำการทดสอบเกิด test fail ขึ้นมาซึ่งอาจเกิดจากปัญหาด้าน network หรือ javascript error ระหว่างทางเราสามารถเข้าไปดูการทำงานผ่านทาง UI ได้ด้วยคำสั่ง

$ npx playwright test --ui

เราจะได้ UI ที่คล้ายๆกับ Chrome Development Tools ดังรูป

Playwright UI
Debugging ด้วย Playwright UI

2. เขียน Test Script ด้วยภาษาอื่นๆ

นอกจาก Javascript และ Typescript แล้ว Playwright ยัง support ภาษาอื่นๆอีก เช่น Python, Java และ Dotnet

การติดตั้งของภาษาอื่นๆจะแตกต่างจาก JavaScript และ Typescript ตรงที่เราต้องติดตั้ง Test runner เพิ่ม

Playwright Locators

Locators คือวิธีการค้นหา Elements ใน UI ที่เราต้องการทดสอบ ถือว่าเป็นหนึ่งในองค์ประกอบหลักของการใช้งาน automated test เพราะถ้า Locators ใช้งานง่าย แก้ไขง่าย ก็จะทำให้ปัญหาในการทำงานน้อยลง ซึ่งใน Playwright จะมี Locators ดังนี้

Locator by Label

เราจะใช้ method getByLabel สำหรับดึงเอา input ที่อยู่ถัดจาก Label นี้ เช่น HTML เป็น Form หน้าตาแบบนี้

<div>
    <label for="firstname">First name</label>
    <input type="text" id=firstname />
</div>

เราจะใช้ Locator แบบนี้

const firstname = page.getByLabel('First name');

Locator by Role

เราสามารถใช้ role ในการค้นหา Element ได้ เช่นต้องการค้นหาปุ่ม เราจะ method getByRole เพื่อค้นหาปุ่มก่อน หลังจากนั้นค่อยระบุ attribute ของปุ่มลงไป เช่น ชื่อว่า register

const btnRegister = page.getByRole('button', { name: 'register'});

register เป็น Case-in sensitive นั่นคือจะเป็นตัวใหญ่หรือเล็กก็ได้

ซึ่งการเลือก role เราสามารถเลือกได้หลายแบบมากๆ ให้กด Ctrl + Click ที่ method getByRole เราจะพบว่ามี role ให้เราเลือกมากมาย เช่น alert, checkbox, heading, link,img และอื่นๆ

Locator by Text

เราสามารถใช้ข้อความในการระบุตำแหน่งของ Element ที่ต้องการได้ เช่น เราต้องการคำว่า Start Playwright Now เราจะใช้ method getByText แบบนี้

const txt = page.getByText('Start Playwright Now')

Generic Locator

คือ Locator ที่เหมือนกับ Automated Testing Tool อื่นๆคือเราจะใช้ CSS และ Xpath ในการค้นหา Element

Locator by Class

ถ้าเราต้องการค้นหาปุ่ม Search ที่มี CSS class เป็น order-search เราจะใช้คำสั่ง

const btnSearch = page.locator('.order-search')

Locator by XPath

หรือถ้าเราต้องการ Locator ด้วย XPath เราจะเขียนแบบนี้

const btnSearch = page.locator('xpath=////*[@id="navbar"]/a[4]/img')

ซึ่งปกติเราจะไม่ได้เขียน XPath เองแต่เข้าไปที่ Inspect Elements แล้วคลิกขวาที่ Element ที่ต้องการ หลังจากนั้นเลือก Copy > Copy XPath

หรือถ้าต้องการตัวช่วยในการระบุ Locator เราสามารถใช้ Playwright Codegen มาช่วยระบุ Locator ให้เราได้

Playwright Codegen

นอกจากการเขียน script ขึ้นมาเองแล้วเรายังสามารถ ใช้่ Playwright Codegen สำหรับการ Generate Test script ออกมาให้เรา โดยที่ใช้คำสั่ง playwright codegen และระบุ URL เข้าไปแบบนี้

$ npx playwright codegen demo.playwright.dev/todomvc

Generate tests ด้วย Playwright Codegen
Generate tests ด้วย Playwright Codegen

ด้วย Playwright Codegen เราสามารถที่จะ

Playwright กับ VS Code

เราสามารถใช้งาน Playwright บน VS code ได้ด้วยการติดตั้ง extensions ชื่อ Playwright Test for VSCode

Playwright VSCode plugins
ติดตั้ง Playwright Test for VSCode

หลังจากนั้นเราจะสามารถ ติดตั้ง playwright browsers ได้ โดยกด Ctrl + Shift + P แล้วพิมพิ์คำว่า install playwright ดังรูป

Playwright install browsers

นอกจากนี้คุณยังสามารถทำการ Debug playwright ได้

Playwright show error message
เราจะเห็นว่ามี Error อะไรบน VS Code

Playwright Debugging
Debugging ได้บน VS Code เลย

อ่านบทความอื่นๆเกี่ยวกับ Playwright ต่อได้ที่

Phanupong Permpimol
Follow me