Playwright กับการใช้งานการ Wait และ Retry แบบต่างๆ

เนื่องจากในการทำ UI Automated Test นั้น เราจะเจอกับปัญหาที่หน้าเว็บกำลังโหลดข้อมูลบางอย่าง แต่ออโตเมทก็พยายามที่จะทำงานในขั้นตอนถัดไปแล้ว หลายๆครั้งเราก็มักจะเจอปัญหาที่เทสของเรารันไม่ผ่าน มักเพราะหน้าเว็บกำลังโหลดอยู่นั่นเอง โดย Playwright ก็มีแนวทางในการแก้ปัญหาเหล่านี้ ทั้งแบบอัตโนมัติ และแบบที่เป็นคำสั่งให้เราเรียกใช้งาน

Auto-Waiting

ตรงตามชื่อเลย คือ Playwright เป็นคนจัดการให้อัตโนมัติ โดย Auto-Waiting จะทำงานเวลาเราเรียกใช้งานคำสั่งพื้นฐานต่างๆ เช่น click, fill, check รวมถึงคำสั่งต่างๆที่สั่งไปที่ Web element นั่นเอง โดย Playwright จะมีการเช็คสถานะให้อัตโนมัติก่อนจะส่งคำสั่งไปยัง element ที่กำหนดไว้

โดย Auto-Waiting ของ Playwright มีการเช็ค 5 แบบดังนี้ Visible, Stable, Receives Events, Enabled และ Editable ซึ่งแต่ละคำสั่งที่ใช้ก็จะมีการเช็คบาง option แตกต่างกันไป ดูรายละเอียด Official Doc Auto-Waiting

ตัวอย่าง เราสั่ง click ปุ่ม ก่อนที่ Playwright จะ click ก็จะมีการตรวจสอบสถานะของปุ่มต่างๆก่อนดังนี้ Visible, Stable, Receives Events และ Enabled ก่อน โดยถ้าสถานะใดสถานะหนึ่งยังไม่พร้อม Playwright ก็จะวนเช็คให้จนกว่าจะพร้อม แล้วค่อยส่งคำสั่ง click ไปอีกทีนึงนั่นเอง

Assertions

ในการใช้งานการตรวจสอบการแสดงผล รวมถึงสถานะต่างๆ เราสามารถใช้คำสั่งของ Assertion ซึ่งมาพร้อมกับความสามารถ auto retry หรือการวนตรวจสอบซ้ำให้อัตโนมัติ จนกว่าจะ timeout นั่นเอง คำสั่งที่มีจะเป็นการใช้งานคำสั่ง expect เช่น expect(locator).toBeEnabled() เป็นการตรวจสอบว่า ปุ่ม เปิดให้กดได้นั่นเอง หากขณะนั้นปุ่มยัง disable อยู่ Playwright ก็จนวนเช็คให้อัตโนมัติ เช่นเดียวกับ Auto-Waiting จนกว่าจะ timeout นั่นเอง

ดูรายละเอียด Official Doc Assertions

expect.poll และ expect.toPass

หากการตรวจสอบมีความซับซ้อนสูง เราสามารถใช้ 2 คำสั่งนี้มาช่วยในการตรงจสอบ และการทำ Auto Retry เองได้ครับ

expect.poll จะเป็นการจัดกลุ่มคำสั่ง ขึ้นมาเอง และคำสั่งทั้งหมดที่ถูกครอบด้วย poll เมื่อ return ผลแล้วจะต้องตรงกับค่าที่กำหนดไว้ ถ้าไม่ตรงก็จะทำคำสั่งใหม่ จนกว่าจะ timeout นั่นเอง

await expect.poll(async () => {
  const response = await page.request.get('https://api.example.com');
  return response.status();
}, {
  // Custom expect message for reporting, optional.
  message: 'make sure API eventually succeeds',
  // Poll for 10 seconds; defaults to 5 seconds. Pass 0 to disable timeout.
  timeout: 10000,
}).toBe(200);

expect.toPass จะเป็นการตรวจสอบว่าคำสั่งทั้งหมดที่ถูกเรียกใช้งานใต้ toPass ทำงานผ่านทั้งหมดนั่นเอง

await expect(async () => {
  const response = await page.request.get('https://api.example.com');
  expect(response.status()).toBe(200);
}).toPass();
	

ดูรายละเอียดเพิ่มเติมที่ Playwright Official Assertions Doc

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

Playwright Web Automated Test

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

Playwright และ TypeScript