Visual testing คือ เทคนิคการทำ automated process การยืนยันความถูกต้องของ การเปลี่ยนแปลงหน้า UI เช่น มีการอัพเดทหน้า Home page จาก version 1.1 เป็น 1.2 มีการเปลี่ยนแปลง ชื่อเมนูต่างๆนั่นเอง

Percy.io เป็นบริการ one-stop service สำหรับ visual testing

โดย Percy.io จะมีระบบในการจัดเก็บ UI screenshot ในแต่ละ page และช่วยในเรื่องการตรวจสอบการเปลี่ยนแปลงต่างๆ ไปจนถึงระบบในการ Approve / Comment การเปลี่ยนแปลงที่พบ โดยการเปรียบเทียบจะใช้การเปรียบเทียบกับ baselines data

Baselines Data คืออะไร

Visual testing จำเป็นต้องใช้ baseline data ในการตรวจสอบความเปลี่ยนแปลงที่เกิดขึ้น โดย Baseline data จะถูกสร้างจาก UI screenshot ที่ได้รับการ approve จากการ review ในแต่ละรอบนั่นเอง

ขั้นตอนการติดตั้ง Percy ใน project

  • Install robotframework-puppeteer
    pip install robotframework-PuppeteerLibrary
  • Install robotframework-puppeteer-percy
    pip install robotframework-puppeteer-percy
  • ลงทะเบียน Percy.io account
  • สร้างโปรเจค Percy application โดยจะใช้สำหรับจัดเก็บ UI screenshot และ รีวิว test result นั่นเอง
  • Copy PERCY_TOKEN เอาไว้ เราจะใช้เวลารันเทสครับ

เริ่มเขียน Test Script กัน

เริ่มจากให้สร้างไฟล์ robot script ชื่อ puppeteer-percy-demo.robot

จากตัวอย่าง Script จะมี 2 ส่วนหลักๆในการใช้งาน Percy

  1. เราจำเป็นจะต้อง import PuppeteerPercy Library
  2. เรียกใช้งาน Keyword Percy Snapshot เพื่อทำการ capture รูปและส่งไปยัง Percy โดยระบุ ชื่อรูป หรือชื่อเพจ

Set Percy Token ด้วยคำสั่ง:

รัน Percy test ด้วยคำสั่ง:

หลังจากรันเสร็จ ให้เปิด Percy build link เพื่อตรวจสอบผล

ซึ่งคุณสามารถใส่ Comment / Approve หรือ Reject ได้เพื่อแจ้งไปยัง Development ทีมอีกทีนึงนั่นเอง

Pricing

Percy ให้ใช้งานฟรี 5,000 screenshots /month
สำหรับกรณีที่ต้องการใช้มากกว่านั้น ก็จำเป็นต้องซื้อ Package ดูราคาได้ตาม link