Playwright Locator และ Filter v1.32

ขออัพเดทรวม Locator ต่างๆของ Playwright รวมถึงการใช้งาน Filter และ built in locators ในบทความเดียวเลย สำหรับใช้เป็นแหล่งอ้างอิงในการใช้งาน Playwright Locator นั่นเอง

Playwright Build in Locators

ตั้งแต่ Playwright version 1.27 ได้มีการเพิ่มคำสั่งในการค้นหา Locator ที่เฉพาะเจาะจงมากขึ้น เพื่อให้การอ่าน และแก้ไขทำได้ง่ายขึ้น ซึ่งแต่ละแบบช่วยให้เรากำหนด Locator ที่มีประสิทธิภาพมากขึ้นจากเดิมนั่นเอง

เปรียบเทียบ Locator แบบเดิม และแบบ Built In

Locator แบบเก่า

page.locator("data-testid=login-form >> css=button.submit").click();

Built In Locator

page.getByTestId("login-form").getByRole("button", { name: "Sign in" }).click()

รวมคำสั่ง Playwright Build in Locators

Locate by role

ใช้คำสั่ง page.getByRole() สำหรับค้นหา Locator ตาม

• role – หน้าที่ของ Web Element นั้นๆเช่น button, link, label, header ดูรายการที่รองรับได้ที่ ARIA role

• accessible name – การแสดงผลบนหน้าจอ เช่น ชื่อ ปุ่ม หรือ link

ตัวอย่าง

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('button', { name: /submit/i }).click();

Locate by label

เหมาะกับการใช้หา Form Element ต่างๆ ใช้คำสั่ง page.getByLabel() สำหรับค้นหา Locator ตาม

• Label – ดึง Element ที่อยู่ใต้ Label ที่กำหนด

ตัวอย่าง

await page.getByLabel('Password').fill('secret');

Locate by placeholder

ใช้คำสั่ง page.getByPlaceholder() สำหรับค้นหา Locator ตาม

• Placeholder – ค้นหาตาม placeholder ของ input

await page.getByPlaceholder("[email protected]")
  .fill("[email protected]");

Locate by text

ใช้คำสั่ง page.getByText() สำหรับค้นหา Locator ตาม

• Text – Text ที่แสดงใต้ Element นั้นๆ รองรับการค้นหาแบบ partial text, exact text และ Regular expression

// Partial text
await expect(page.getByText('Welcome')).toBeVisible();

// Exact text
await expect(page.getByText('Welcome, John', { exact: true })).toBeVisible();

// Regular expression
await expect(page.getByText(/welcome, [A-Za-z]+$/i)).toBeVisible();

Locate by alt text

ใช้คำสั่ง page.getByAltText() สำหรับค้นหา Locator ตาม

• Alt – Image element AltText

await page.getByAltText('playwright logo').click();

Locate by title

ใช้คำสั่ง page.getByTitle() สำหรับค้นหา Locator ตาม

• Title – Title attribute

await expect(page.getByTitle('Issues count')).toHaveText('25 issues');

Locate by test id

ใช้คำสั่ง page.getByTestId() สำหรับค้นหา Locator ตาม

• data-testid – HTML attribute เฉพาะที่ใช้สำหรับการเทส

await page.getByTestId('directions').click();

Filtering Locator

ในหลายๆครั้ง built in locator ยังใช้ระบุเฉพาะเจาะจงได้ไม่พอ ซึ่งเราสามารถนำ Filter มาใช้ในการคัดกรอง Locator ที่ต้องการได้ โดยสามารถใช้ filter หลักๆได้ 2 แบบคือ filter ด้วย text (hasText) และ filter ด้วย locator (has)

// filter ด้วย text
await expect(page
    .getByRole('listitem')
    .filter({ has: page.getByText('Product 2') }))
    .toHaveCount(1);

// filter ด้วย locator has
await page
    .getByRole('listitem')
    .filter({ has: page.getByRole('heading', { name: 'Product 2' })})
    .getByRole('button', { name: 'Add to cart' })
    .click();

เลือกใช้ Locator แบบไหนดี

จริงๆไม่ได้มีแนวทางตายตัว แต่ทาง Playwright ก็มีข้อแนะนำเป็น 2 แนวหลักๆคือ

แบบที่ 1-testid

โดยใช้งาน data-testid เป็นหลัก ซึ่งจำเป็นจะต้องให้ทาง Developer ช่วยในการใส่ testid ให้กับทาง QA ด้วย

ข้อดี Locator ดูแล และแก้ไขได้ง่าย

ข้อเสีย Developer ต้องช่วยในการเพิ่ม testid และ testid ไม่ได้ทดสอบการแสดงผลบนหน้าจอจริงๆ เช่น ปุ่ม Sumbit อาจถูกแก้ข้อความเป็น ‘ตกลง’ ซึ่งเทสก็ยังรันได้ปกติ

แบบที่ 2 Facing Locators

เน้นการใช้ facing locators หรือ locator ที่เน้นตามการแสดงผลบนหน้าจอ เป็นการใช้ locator ประเภท getByRole, getByText, getByLabel

ข้อดี เป็นการทดสอบตามการใช้งาน หรือการแสดงผลที่ user ใช้งานจริง

ข้อเสีย ไม่เหมาะกับ Web ที่มีการเปลี่ยนภาษาได้หลากหลาย และ Locator จะเปลี่ยนเมื่อมีการแก้ไขชื่อ ต่างๆบนหน้าจอ

สนใจเรียนรู้แบบเจาะลึก

Playwright Web Automated Test

เรียนรู้การทดสอบ Web Application ด้วย

Playwright และ TypeScript