Playwright Web-First Assertions

May 13, 2022

2818

Assert ถือว่าเป็นส่วนหลักของการทำเทสเลย เพราะเป็นส่วนที่ใช้ตรวจสอบผลการเทสของเราว่าผ่าน หรือไม่ผ่านนั่นเอง โดย Library อื่นๆมักจะเป็นการใช้งาน Assert library ที่เขียนมาแบบ Generic หรือสำหรับใช้งานได้ทั่วไปหลากหลายแบบเช่น Unit test, E2E, Mobile หรือ กระทั่ง API แต่ในอีกมุมนึง ก็ทำให้เวลาตรวจสอบค่าบางกรณีทำได้ยากขึ้น หรือต้องเขียนโค้ดยาวขึ้นด้วย

ปัญหาการใช้ Assert แบบ Generic

ตัวอย่างการตรวจสอบ Todo list ว่ามี Text ที่เราเพิ่มเข้าไปใน list ไหม

test('should allow to add todo items', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  // Create 1st todo.
  await page.locator('.new-todo').fill('buy some cheese');
  await page.locator('.new-todo').press('Enter');

  // Make sure the list only has one todo item.
  const todoItems = await page.locator('.view label').innerText();
  expect(todoItems).toContain('buy some cheese');
});

จากตัวอย่างจะเห็นว่า เราต้องดึงค่า Text มาเก็บไว้ก่อน แล้วค่อยนำไป ตรวจสอบด้วย library expect ครับ หรือเราจะลดรูปได้ออกมาเป็น

expect(await page.locator('.view label').innerText())
  .toContain('buy some cheese');

Web-First Assertions

Playwright ได้ใช้ Jest expect library มาเป็นพื้นฐาน และทำการเพิ่มคำสั่งที่เฉพาะเจาะจง ในการตรวจสอบผลการเทสเว็บ ให้สะดวกมากขึ้น โดยเรียกว่า Web-First Assertions นั่นเอง

test('should allow to add todo items', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  // Create 1st todo.
  await page.locator('.new-todo').fill('buy some cheese');
  await page.locator('.new-todo').press('Enter');

  // Make sure the list only has one todo item.
  await expect(page.locator('.view label')).toHaveText('buy some cheese');
});

จากตัวอย่าง จะเห็นว่าแทนที่จะดึง Text แล้วค่อยไปตรวจสอบด้วยคำสั่ง toContain เราสามารถใช้งาน คำสั่ง toHaveText ได้เลย โดยจะทำงานแบบ async function แทน

ข้อแตกต่างคือ expect แบบ web first จะมีระบบ auto wait ให้อัตโนมัติด้วยทำให้ หาก element ที่เราสั่งตรวจสอบณตอนนั้นแสดงค่าไม่ตรงกับที่ expect Playwright จะมีการ wait ให้และวนเช็คจนกว่าจะ match หรือ timeout นั่นเอง