Home News Visual Comparison Testing ด้วย Playwright

Visual Comparison Testing ด้วย Playwright

July 28, 2022

2784

นอกเหนือจาก Functional Test อีกหนึ่งการเทสที่ QA จำเป็นต้องทำคือ การตรวจสอบความถูกต้องของการแสดงผล ซึ่งขั้นตอนนี้ค่อนข้างใช้เวลา เพราะต้องคอยมาเทียบแต่ละ Step กับ Mock up ว่าตรงกันหรือเปล่า โดย Playwright เองมี Feature ในการทดสอบ Visual Comparison แบบอัตโนมัติ ทำให้เราสามารถลดเวลาและขั้นตอนการทดสอบได้อีกด้วย

Screenshot Comparison

เริ่มจากพื้นฐานที่สุดคือการเทียบ Screenshot ที่เราเก็บไว้เทียบกับหน้าเว็บไซท์ เรามาดูตัวอย่างโค้ดกันก่อนเลย

import { test, expect } from '@playwright/test';

test('example page screenshot', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot('landing.png');
});

ถ้าเรารันเทสครั้งแรก เทสจะ fail เพราะจะยังไม่มี Screenshot landing.png ที่ใช้สำหรับเปรียบเทียบ แต่ Playwright จะทำการสร้าง screenshot ให้อัตโนมัติอยู่ใต้ folder <test suite name>-screenshots และเมื่อรันเทสอีกครั้งเทสจะผ่าน เพราะมี file สำหรับมาเปรียบเทียบแล้วนั่นเอง

กรณีที่มีการอัพเดทหน้า UI เมื่อรันเทสเคสข้อนี้ ก็จะมีการ Log fail พร้อม compare screenshot ให้เราใช้ดูส่วนที่ไม่ตรงกันได้เลยตามภาพด้านล่าง

การอัพเดท Screenshot

กรณีที่เราตรวจสอบแล้วว่าการอัพเดท UI ถูกต้อง และต้องการอัพเดท Screenshot ที่เรามีอยู่ สามารถทำได้ง่ายๆด้วยการรีรันเทส โดยเพิ่ม option –update-snapshots เข้าไป ก็จะเป็นการสั่งให้ Playwright ทำการเก็บ screenshot ใหม่อัตโนมัตินั่นเอง

npx playwright test --update-snapshots

นอกจาก Compare Screenshot จาก Page แล้ว Playwright ยังสามารถเปรียบเทียบแบบอื่นๆได้อีกด้วย

Full page Screenshot เปรียบเทียบทั้งเพจ แทนที่จะเป็นเฉพาะที่แสดงผลอยู่

test('example full page screenshot', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot('landing-full-page.png', { fullPage: true });
});

Element Screenshot เปรียบเทียบเฉพาะ Element ที่เรากำหนด ทำให้เราตีกรอบการตรวจสอบได้ง่ายขึ้น

test('example element screenshot', async({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(await page.locator('div.main-wrapper').screenshot()).toMatchSnapshot('main-wrapper.png');
});

Text compare เปรียบเทียบ text ที่แสดงอยู่ โดยลดขั้นตอนการไปดึง text มาทีละ field

test('example test text snaptshot', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

ดาวน์โหลดตัวอย่าง Source code ได้ที่ Githhub