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
- เราจำเป็นจะต้อง import PuppeteerPercy Library
- เรียกใช้งาน Keyword Percy Snapshot เพื่อทำการ capture รูปและส่งไปยัง Percy โดยระบุ ชื่อรูป หรือชื่อเพจ
Set Percy Token ด้วยคำสั่ง:
# Windows
$ set PERCY_TOKEN=<your token here>
# Unix
$ export PERCY_TOKEN=<your token here>รัน Percy test ด้วยคำสั่ง:
npx percy exec -- robot puppeteer-percy-demo.robotหลังจากรันเสร็จ ให้เปิด Percy build link เพื่อตรวจสอบผล
ซึ่งคุณสามารถใส่ Comment / Approve หรือ Reject ได้เพื่อแจ้งไปยัง Development ทีมอีกทีนึงนั่นเอง
Pricing
Percy ให้ใช้งานฟรี 5,000 screenshots /month
สำหรับกรณีที่ต้องการใช้มากกว่านั้น ก็จำเป็นต้องซื้อ Package ดูราคาได้ตาม link
