Home News บันทึกการใช้งาน Applitools กับ Playwright

บันทึกการใช้งาน Applitools กับ Playwright

December 9, 2022

2417

ในการทำเทสแบบ E2E มีหลายๆครั้งมากเลย ที่เกิดการเปลี่ยนแปลง Layout ซึ่งส่งผลต่อการแสดงผล, การปรับเปลี่ยนคำ Title หรือกระทั่งเนื้อหาบนหน้าจอ โดยหลายๆครั้งการอัพเดทเหล่านี้ไม่ได้เกี่ยวข้องกับ Functional test โดยตรง แต่อาจนำไปสู่ปัญหา issue ในส่วนของ UI ได้

เลยอยากลองแนะนำ Applitools เป็น AI Testing Tool (E2E AI Test) ที่จะเข้ามาช่วยตรวจสอบการเปลี่ยนแปลงของหน้า UI ให้ง่ายขึ้นมากๆ ถ้าเทียบกับที่เราต้องไปตรวจสอบในส่วนของการแสดงผลต่างๆด้วย Playwright ทีละส่วนเอง สำหรับ Applitools สามารถตรวจสอบหน้า UI ให้เราทั้งหน้าโดยใช้เพียงคำสั่งเดียว โดยไม่ใช่เป็นแค่การเอารูปมาเทียบกันเฉยๆ

มาทำความรู้จักกับ Applitools กันก่อน

Applitools เป็น AI cloud service มีความสามารถที่จะตรวจสอบหน้า Web / Mobile App ของเราให้อัตโนมัติ โดยเทียบกับ Baseline ที่เราเป็นคนกำหนดเอาไว้ ซึ่งแตกต่างจากการทำ Visual Comparison Testing ของ Playwright ที่ Applitools จะไม่ใช่เป็นการเทียบ Image กับ Baseline แต่ยังมีความสามารถเทียบเฉพาะ layout หน้าจอ, สามารถระบุให้ตรวจสอบเฉพาะบางส่วน และการใช้งาน Visual locators แทน locator ปกติของ Playwright

เริ่มติดตั้ง

ก่อนอื่นให้เพื่อนๆไปสมัครสมาชิก Applitools ก่อนที่ลิงค์นี้ https://applitools.com/ หลังจากสมัครสมาชิกเสร็จแล้วให้ไป copy API Key มาเก็บไว้ก่อนเลย

หลังจากนั้นไปที่ Project Playwright แล้วติดตั้ง library @applitools/eyes-playwright โดยรันคำสั่งข้างล่างนี้ได้เลย

npm install --save-dev @applitools/eyes-playwright

คราวนี้ใน Test Project เราต้องทำการกำหนดแต่ละส่วนตามนี้ครับ

1. ทำการสร้าง Batch ที่ใช้สำหรับเก็บ baseline ของการรันเทส

// Applitools objects to share for all tests
let Batch: BatchInfo;
let Config: Configuration;
let Runner: VisualGridRunner;

let eyes: Eyes; // Test-specific objects

test.beforeAll(async () => {
  Runner = new VisualGridRunner({ testConcurrency: 1 });
  Batch = new BatchInfo({
    name: "Batch: demo-applitools-ai",
  });
  Config = new Configuration();
  Config.setBatch(Batch);
  Config.addBrowser(1024, 768, BrowserType.CHROME);
});

จากในรูป ทำการเพิ่ม beforeAll section โดยโค้ดจะเป็นการสร้าง Runner ของ Applitools และ กำหนดชื่อ Batch ที่ไว้ใช้เก็บ Baseline การรันเทสของเรา

2. สร้าง Eyes Object ขึ้นมาซึ่งจะเป็นตัวหลักเวลาที่เราใช้สั่งให้ Applitools ตรวจสอบหน้า UI

test.beforeEach(async ({ page }) => {
  // Create the Applitools Eyes object connected to the VisualGridRunner and set its configuration.
  eyes = new Eyes(Runner, Config);
  await eyes.open(
    page, // The Playwright page object to "watch"
    "QA Hive AI Demo", // The name of the app under test
    test.info().title, // The name of the test case
    { width: 1024, height: 768 }
  ); // The viewport size for the local browser

  await page.goto("https://demo.playwright.dev/todomvc");
});

3. เพิ่ม step ที่เราต้องการตรวจสอบลงไปใน test case ของเราได้เลย โดยใช้คำสั่ง eyes.check

test("should allow me to add todo items", async ({ page }) => {
  test.setTimeout(120 * 1000);

  // Verify the page loaded correctly.
  await eyes.check("Todo list page", Target.window().fully());

  await page.locator(".new-todo").fill(TODO_ITEMS[0]);
  await page.locator(".new-todo").press("Enter");
  await expect(page.locator(".view label")).toHaveText([TODO_ITEMS[0]]);
});

4. สุดท้ายเป็นการส่งคำสั่งไปบอก Applitools ว่าเราเทสเสร็จแล้วจากคำสั่ง eyes.close

test.afterEach(async () => {
  await eyes.close();
});

เสร็จแล้วก็รันเทสแบบปกติดูครับ โดยก่อนรันต้องทำการกำหนด API Key ของเราผ่าน Environment variable ด้วยนะครับ

export APPLITOOLS_API_KEY=<your-api-key>

พอรันเทสเสร็จเราสามารถเปิดไปดูผลเทสที่ Dashboard ของ Applitools ได้เลย โดยรอบแรกเราต้องกำหนด Baseline ก่อนว่า รูปที่ Applitools capture มานั้นถูกต้องไหม ถ้าถูกก็จะถูกใช้เป็น Baseline นั่นเอง

Features

Match Level – Applitools รองรับการ match หลักๆอยู่ 4 แบบ

STRICT โดย mode นี้จะเป็น default mode จะมีการเปรียบเทียบ Layout, element และ text content
Layout โหมดนี้จะลดความเข้มข้นจาก STRICT ลงมา โดยเน้นการตรวจสอบตำแน่ง Lyaout ของ image และ content
Ignore colors เหมือน STRICT mode แต่จะไม่เทียบสีนั่นเอง
Exact เป็นโหมดที่เทียบ pixel by pixel เลย ทาง Applitools ไม่แนะนำให้ใช้

Region
นอกจากการกำหนด Match Level แล้วเรายังสามารถกำหนดขอบเขตการตรวจสอบได้ด้วย โดยไปกำหนดจาก Baseline หลังจากรันเทสเสร็จแล้วได้เลย

นอกจากนี้ยังมีการเทสแบบ batch เพื่อทดสอบการแสดงผลแบบ responsive, การกำหนด version ของ base line รวมถึงการนำไปทดสอบกับเว็บประเภท localization อีกด้วย ไว้จะมารีวิวอีกครั้งในโอกาศถัดไปครับ

Download ตัวอย่าง Code ได้จาก Github