บันทึกการใช้งาน Puppeteer สำหรับการทำ End-to-End Testing

Puppeteer เป็น Node library พัฒนาจาก Google เตรียมชุดของ API สำหรับการควบคุม Google Chrome (Headless และ Non-headless) หรือ Chromium ผ่าน DevTool protocol ที่สำคัญไม่ต้องทำงานผ่าน Web Driver อีกต่อไป ซึ่งถ้าใครใช้งานผ่าน Selenium จะรู้ว่ามันน่าเบื่อมาก ๆ เพราะว่าต้อง update version ตาม Google Chrome !! ข้อดีคือ ลด dependency ต่าง ๆ สำหรับการควบคุมหรือจัดการ Google Chrome แต่ก็ต้องแลกมาด้วยการเรียนรู้เพิ่มเติมนะ นั่นคือต้องเขียนชุดการทดสอบด้วย NodeJS แต่งานสายนี้ก็ต้องเรียนรู้อยู่แล้ว ดังนั้นมาเริ่มใช้งานกัน

เริ่มด้วยการติดตั้ง module Puppeteer เข้า project

[code] $npm i puppeteer [/code]

จากนั้นมาเริ่มเขียนชุดการทดสอบดีกว่า

เริ่มด้วยสิ่งที่ต้องการคือ การค้นหาข้อมูลที่ google

• ต้องการทดสอบในหน้าจอขนาดต่าง ๆ
• โดยค่า default จะเป็น headless mode แต่ใน demo จะกำหนด headless = false เพื่อดูการทำงาน
• ค้นหาข้อมูล สวัสดี Puppeteer (ทำการกรอกคำที่ต้องการและกดปุ่ม Enter)
• ตรวจสอบผลการทำงาน
• ทำการ capture หน้าจอของแต่ละขั้นตอนด้วย (บันทึกเป็น PDF ก็ได้)

โดยที่ code เขียนไม่ง่ายไม่ยาก ดังนี้ (เขียนให้ทำงานได้เฉย ๆ นะ) [gist id="dbd7e7127b93dd69f48bf248fb7bce30" file="google-spec.js"] มาดูการทดสอบกันดูนะ เร็วมากมาย (เครื่องผมมันช้านะ) https://www.youtube.com/watch?v=HSickS5wTD0&width=640&height=480 ตัวอย่างของ code อยู่ที่ Github :: Up1 เพื่อความสนุกสนานมีให้ลองใช้งานผ่าน web browser ด้วยนะที่ Puppeteer Playground โดยที่ Puppeteer เป็นอีกหนึ่งทางเลือกสำหรับการทดสอบ ลองใช้งานกันดูนะ มันสนุก ๆ ในอีกรูปแบบนะ ขอให้สนุกกับการ coding นะครับ