เคยคิดอยากให้มีช่วยตัวช่วยที่สามารถเทสอะไรบางอย่างที่หน้าเว็บไซต์ให้เรา..บ้างไหม? ถ้าคุณกำลังมองหาตัวช่วยนั้น Puppeteer คือคำตอบของคุณ!!
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
จากนิยามได้ว่า Puppeteer เป็นไลบรารี่ของ NodeJs ที่มี API ช่วยให้สามารถควบคุม Chrome หรือ Chromium ได้ ผ่านโปรโตคอล DevTools ของ Chrome เช่น inspect, debug เป็นต้น โดยค่าตั้งต้นจะรันโดยไม่แสดงหน้าต่างของ Chrome มาให้เราเห็น(headless) แต่ก็สามารถตั้งค่าให้เปิดหน้าต่าง Chrome ขึ้นมาให้เห็นได้ด้วยเช่นกัน(non-headless)
สรุปแบบเข้าใจง่ายๆ ก็คือ
“ Puppeteer เป็น NodeJs Library ตัวหนึ่งที่ถูกพัฒนาโดยทีม Google ที่สามารถเรียกใช้งาน DevTools ของ Chrome ได้”
Chrome คือ โปรแกรมเว็บเบราเซอร์ (Web Browser) ที่ใช้สำหรับเปิดเว็บไซต์โดยมี Google เป็นผู้พัฒนา
Chromium (โครเมี่ยม) คือ โครงการเบราว์เซอร์โอเพนซอร์ส โปรแกรม Chromium ถูกพัฒนาโดย Google มีเป้าหมายเพื่อสร้างวิธีที่ปลอดภัยและเร็วขึ้นและมีเสถียรภาพมากขึ้น
เนื้อหาในบทความนี้จะประกอบไปด้วย 5 หัวข้อดังนี้
- Setup Project
- การ Screenshots หน้าเว็บไซต์
- การ Login เข้าเว็บไซต์
- การค้นหา Content ในหน้าเว็บไซต์
- ฟังก์ชั่นที่ใช้งานบ่อย
Setup Project
- เริ่มจากการสร้าง directory ของโปรเจค
$ mkdir nodejs-puppeteer$ cd nodejs-puppeteer
- กำหนดรายละเอียดของ Project
$ yarn init- ติดตั้ง puppeteer ด้วยคำสั่ง
$ yarn add puppeteerเสร็จเรียบร้อยสำหรับการ setup project
การ Screenshot หน้าเว็บไซต์
เราจะใช้ฟังก์ชั่น screenshot เพื่อ capture หน้าเว็บไซต์ Github ตัวอย่างโค้ดด้านล่าง
จากนั้นลองรันโปรแกรมด้วยคำสั่ง
$ node index.jsผลลัพธ์ที่ได้
การ Login เข้าเว็บไซต์
เราจะให้โปรแกรมกรอก Username และ Password เพื่อ login เข้าเว็บไซต์ Github แล้วจากนั้นให้ screenshot หน้าแรก ตัวอย่างโค้ดด้านล่าง
จากนั้นลองรันโปรแกรมด้วยคำสั่ง
$ node index.jsผลลัพธ์ที่ได้
การค้นหา Content ในหน้าเว็บไซต์
เราจะให้โปรแกรมค้นหารายชื่อ Repository ทั้งหมดของเราในเว็บไซต์ Github แล้วจากนั้นให้ console.log ออกมา ตัวอย่างโค้ดด้านล่าง
จากนั้นลองรันโปรแกรมด้วยคำสั่ง
$ node index.jsผลลัพธ์ที่ได้
ฟังก์ชั่นที่ใช้งานบ่อย
- puppeteer.launch — ฟังก์ชั่นเปิด Browser
- browser.newPage — ฟังก์ชั่นเปิด page
- page.goto —ฟังก์ชั่นเข้าเว็บไซต์
- page.click — ฟังก์ชั่นคลิ๊ก
- page.waitForNavigation — ฟังก์ชั่นสำหรับรอจนกว่าเปิดหน้าใหม่สำเร็จ
waitForNavigation มี 2 options1. timeout ค่าตั้งต้น 30 วินาที (หน่วย ms)
2. waitUntil มี 4 แบบ
- load รอจนกระทั่งหน้าใหม่ได้โหลดขึ้นมา
- domcontentloaded รอจนกระทั่ง HTML document ถูกโหลดเสร็จ
- networkidle0 รอจนกระทั่งไม่มีการเชื่อมต่อเครื่อข่ายใดแล้วเป็นเวลาอย่างน้อย 500 ms
- networkidle2 รอจนกระทั่งการเชื่อมต่อเครื่อข่ายไม่เกิน 2 เป็นเวลาอย่างน้อย 500 ms
เมื่อ HTML document ถูกโหลดสู่เว็บเบราว์เซอร์ มันจะกลายเป็น document object.
- page.waitFor — ฟังก์ชั่นหน่วงเวลา (หน่วยเป็น ms)
- page.evaluate — ฟังก์ชั่นการประเมินผลในหน้าเบราว์เซอร์
- page.$eval — ฟังก์ชั่นดึงข้อมูลหนึ่ง element
- page.$$eval — ฟังก์ชั่นดึงข้อมูลหลาย element
สรุปคือ Puppeteer ก็เหมือน Bot ที่เราสามารถเขียนโปรแกรมควบคุมและสั่งงานให้ทำตามที่เราต้องการได้ ซึ่งก็สามารถทำได้เหมือนที่มนุษย์ทำได้เลย เราสามารถเอา Pupeteer มาประยุกต์ใช้ได้อีกเยอะแยะมากมายครับ สุดท้ายนี้ก็หวังว่าบทความนี้จะมีประโยชน์แก่ผู้ที่กำลังสนใจเรื่องนี้อยู่และเป็นประโยชน์แก่ผู้อ่านไม่มากก็น้อยน่ะครับ :)
References
(ข้อมูลอาจมีข้อผิดพลาด ถ้าจะเอาบทความนี้ไปอ้างอิงที่อื่นให้ตรวจสอบให้ดีก่อนนะครับ ขอบคุณครับ)
สำหรับวันนี้ ต้องขอลาไปก่อน สวัสดีครับ NottDev :) — Enjoy Coding
