Day: July 8, 2018

Puppeteer เป็น Node library ที่มีชุดของ API สำหรับการควบคุม Google Chrome หรือ Chromium ผ่าน DevTool protocol ทำงานในรูปแบบ headless โดย default แต่สามารถกำหนดให้ทำงานแบบ full (non-headless) Chrome ได้  ที่สำคัญไม่ต้องทำงานผ่าน Web Driver อีกต่อไป

puppeteer สามารถทำงานได้ทุกอย่างที่สามารถทำได้โดย manual บน browser เช่น

• สร้าง screenshots และ PDFs ของ page
• Automate form submission
• UI testing
• keyboard input

การติดตั้ง Puppeteer

การติดตั้ง Puppeteer เพื่อใช้งานใน project สามารถทำได้ผ่านทาง NPM โดยใช้คำสั่ง

npm i puppeteer

เมื่อทำการติดตั้ง Puppeteer จะทำการ downloads Chromium version ล่าสุดซึ่งสามารถทำงานร่วมกับ api ได้อย่างสมบูรณ์ (ประมาณ 170 Mb สำหรับ Mac, 282 Mb สำหรับ Linux และ 280 Mb สำหรับ Windows) ถ้าไม่ต้องการ download Chromium ในระหว่างการติดตั้ง สามารถยกเลิกได้โดยการกำหนดค่า “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD”  environment variables

การใช้งาน Puppeteer

Puppeteer API ให้ความสามารถในการสร้าง instance ของ  browser, เปิด webpage และบันทึก screenshot โดยสร้าง file ชื่อ example.js และเขียน code ดังนี้

เรียกใช้งาน script  บน command line โดยใช้คำสั่ง

node example.js

Puppeteer กำหนด default ขนาดของ page ที่ 800 x 600px  และสามารถเปลี่ยน page size โดยใช้ page.setViewport() ซึ่งสามารถศึกษาเพิ่มเติมการใช้งาน Puppeteer API ได้ที่ https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

ผลของการ run script  จะทำการบันทึก screenshot ของ https://example.com ไปที่ file “example.png”

จะเห็นว่าในระหว่างการ run script ไม่ได้ปรากฎ browser ขึ้นมาให้เห็น เนื่องจากโดยค่า default จะทำงานเป็น headless mode แต่สามารถเปลี่ยนการทำงานได้โดยกำหนด headless = false หากต้องการดูการทำงาน

const browser = await puppeteer.launch({
	             headless: true
	         });  // default is true

 

อ้างอิง

https://github.com/GoogleChrome/puppeteer/

จากบทความ Visual test automation ที่ได้กล่าวถึง Appraise ที่ใช้สำหรับทำการทดสอบการแสดงผลแบบอัตโนมัติในเบื้องต้น ตั้งแต่การติดตั้ง ตัวอย่าง test page, test fixture การเรียกใช้งานการทดสอบ และผลการทดสอบ บทความนี้จะมาลงรายละเอียดในการสร้าง test page

Creating test pages

Appraise สามารถกำหนดรูปแบบข้อกำหนดการทดสอบสำหรับการทดสอบส่วนแสดงผลได้ไม่ยุ่งยาก โดย Appraise จะทำการอ่านข้อมูลนำเข้า และ ผลลัพธ์ที่คาดหวัง จาก file ที่เขียนในรูปแบบ Markdown แล้วส่งต่อให้กับระบบทำการทดสอบ จากนั้นจะบันทึกภาพการแสดงผลที่เกิดขึ้น เปรียบเทียบภาพการแสดงผลที่ได้จริงกับผลลัพธ์ที่คาดหวัง โดยมีสิ่งที่จำเป็นที่จะต้องกำหนดสำหรับการทดสอบ 3 ส่วน คือ

1. input
2. expect output
3. fixture

Input (parameters ของ example)

input parameters อยู่ในรูปแบบ text JSON หรือ YAML  ในการกำนด input parameters สำหรับแต่ละการทดสอบหรือ example จะต้องกำหนด block ของ example และกำหนดชื่อให้กับ example ในส่วนเริ่มต้น block ในรูปแบบ example=”ชื่อ”

จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” ถูกกำหนดรูปแบบเป็น YAML ซึ่ง Appraise จะรู้ว่าจะนำข้อมูลไปได้อย่างไร ในแต่ละ test page สามารถมี eaxmple ได้มากกว่าหนึ่ง example โดยที่แต่ละ example จะต้องมีชื่อที่ไม่ซ้ำกัน ซึ่งจำเป็นในการใช้สำหรับเปรียบเทียบกับผลลัพธ์ที่คาดหวังด้วย

Expect output

ecpect output – ผลลัพธ์ที่คาดหวัง ซึ่งอยู่ในรูปแบบ file รูปภาพ .png  การกำหนดผลลัพธ์ที่คาดหวังใน test page ทำได้โดยระบุ


ซึ่งจะอยู่ส่วนใดๆใน test page ก็ได้ ไม่ว่าจะอยู่ก่อน example input ก็ได้ โดยที่ความเชื่อมโยงระหว่าง input กับ expect output ก็คือชื่อของ example ที่กำหนดใน []

ในการสร้าง test page อาจจะไม่ต้องกำหนด expect output ก่อนก็ได้เช่นกัน เมื่อทำการ run test ครั้งแรก ผลที่ออกมาจะ failed เนื่องจากไม่ได้ระบุ expect output แต่สามารถที่จะบันทึกผลที่ได้จากการ run test ใช้เป็น expect output สำหรับการ run test ครั้งต่อไปได้

Fixture

fixture คือส่วนของ code ที่ Apprise ใช้ในการเชื่อมต่อกับระบบที่จะทดสอบ รวมทั้งกำหนดการใช้งานและการประมวลผล input ในการทดสอบ โดยทั่วไป examples ที่เชื่อมโยงกันจะใช้ fixture เดียวกัน

การกำหนด fixture ทำโดยการระบุ fixture =”ชื่อ fixture” ในส่วนของ header ของ example block

จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” มีการกำหนด fixture คือ “hello.js”

จากตัวอย่าง fixture ด้านบน เป็น fixture ที่มีการสร้าง output page ออกมาโดยตรงโดยไม่ได้เชื่อมต่อกับระบบใดๆ ซึ่งในการใช้งานจริง จะต้องเชื่อมต่อกับระบบหรือส่วนที่จะทำการทดสอบจริงที่ทำการ render ผลลัพธ์ออกมา

• input parameters จาก test example ส่งผ่านมายัง fixture ผ่านทาง argument ตัวแรก
• fixture return object ซึ่งมี properties 2 ตัวคือ contentType และ content อย่างไรก็ตาม fixture ยังสามารถ return ข้อมูลแบบอื่นได้เช่นกัน เช่น remote URL หรือ file ใน temporary folder ก็ได้เช่นกัน
• contentType จาก fixture ด้านบนคือ text/html  ซึ่งสามารถเป็น contenType อื่นใดก็ได้ที่ browser สามารถ render ได้ รวมทั้ง SVG, PDF หรือ image

 

อ้างอิง 

https://github.com/AppraiseQA/appraise
https://github.com/AppraiseQA/appraise/blob/master/examples/creating-test-pages.md