ทำ Automation หน้าเว็บด้วย Puppeteer

NottDev
2 min readJun 20, 2020

--

เคยคิดอยากให้มีช่วยตัวช่วยที่สามารถเทสอะไรบางอย่างที่หน้าเว็บไซต์ให้เรา..บ้างไหม? ถ้าคุณกำลังมองหาตัวช่วยนั้น 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 หัวข้อดังนี้

  1. Setup Project
  2. การ Screenshots หน้าเว็บไซต์
  3. การ Login เข้าเว็บไซต์
  4. การค้นหา Content ในหน้าเว็บไซต์
  5. ฟังก์ชั่นที่ใช้งานบ่อย

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

ผลลัพธ์ที่ได้

screenshot on login page

การ Login เข้าเว็บไซต์

เราจะให้โปรแกรมกรอก Username และ Password เพื่อ login เข้าเว็บไซต์ Github แล้วจากนั้นให้ screenshot หน้าแรก ตัวอย่างโค้ดด้านล่าง

จากนั้นลองรันโปรแกรมด้วยคำสั่ง

$ node index.js

ผลลัพธ์ที่ได้

screenshot on home page

การค้นหา Content ในหน้าเว็บไซต์

เราจะให้โปรแกรมค้นหารายชื่อ Repository ทั้งหมดของเราในเว็บไซต์ Github แล้วจากนั้นให้ console.log ออกมา ตัวอย่างโค้ดด้านล่าง

จากนั้นลองรันโปรแกรมด้วยคำสั่ง

$ node index.js

ผลลัพธ์ที่ได้

console log for name of all repositories

ฟังก์ชั่นที่ใช้งานบ่อย

  • 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

--

--

NottDev
NottDev

Written by NottDev

Your only limit is your mind.

No responses yet