ในยุคดิจิทัลที่ทุกอย่างขับเคลื่อนด้วยเว็บไซต์ การทำงานซ้ำๆ บนเว็บเบราว์เซอร์ เช่น การกรอกฟอร์ม, การดึงข้อมูล, หรือการทดสอบการทำงานของฟีเจอร์ต่างๆ ถือเป็นเรื่องที่สิ้นเปลืองเวลาและมีโอกาสเกิดข้อผิดพลาดได้ง่าย เครื่องมือที่เรียกว่า “Browser Automation” จึงถือกำเนิดขึ้นมาเพื่อแก้ปัญหานี้ และหนึ่งในเครื่องมือที่ทันสมัย และทรงพลังที่สุดในปัจจุบันคือ Playwright
Playwright คือเฟรมเวิร์ก (Framework) แบบ Open-source ที่พัฒนาโดย Microsoft ออกแบบมาเพื่อควบคุมเว็บเบราว์เซอร์โดยอัตโนมัติผ่านการเขียนโค้ด ลองจินตนาการว่าคุณสามารถเขียนสคริปต์เพื่อสั่งให้ “หุ่นยนต์” เปิดเบราว์เซอร์, เข้าชมเว็บไซต์, คลิกปุ่ม, กรอกข้อมูล, และตรวจสอบผลลัพธ์ได้เองทั้งหมด นั่นคือสิ่งที่ Playwright ทำได้ และทำได้ดีมากด้วย
หัวใจสำคัญของ Playwright คือความสามารถในการทำงานข้ามเบราว์เซอร์ (Cross-browser) ได้อย่างราบรื่น คุณสามารถเขียนโค้ดเพียงชุดเดียวแล้วสั่งให้มันทำงานบน Chromium (แกนหลักของ Google Chrome และ Microsoft Edge), Firefox, และ WebKit (แกนหลักของ Apple Safari) ได้ทันที
เพื่อให้เห็นภาพการทำงานของ Playwright เราจะมาดูตัวอย่างการนำไปใช้งานกับเว็บไซต์สมมติชื่อ https://ttt-website.com/ ซึ่งมีฟีเจอร์ต่างๆ ดังนี้:
• หน้าแรก (Homepage) ที่มีบทความล่าสุด
• หน้าล็อกอิน (Login)
• หน้าค้นหา (Search)
• หน้าโปรไฟล์ผู้ใช้ (Profile) ที่สามารถอัปโหลดรูปภาพได้
• หน้าสินค้า และบริการ (Products) ที่แสดงผลต่างกันบนเดสก์ท็อป และมือถือ
เป้าหมาย: เราต้องการดึงหัวข้อข่าว 5 อันดับแรกจากหน้าแรกของ ttt-website.com ทุกๆ ชั่วโมง
การทำงานของ Playwright:
• เปิดเบราว์เซอร์: สคริปต์จะสั่งให้ Playwright เปิดเบราว์เซอร์ Chromium ในโหมด headless (ทำงานเบื้องหลังโดยไม่มีหน้าจอ) เพื่อไม่ให้รบกวนการทำงานและใช้ทรัพยากรน้อยลง
• เข้าสู่หน้าเว็บ: page.goto(“https://ttt-website.com/”)
• รอให้เนื้อหาพร้อม: Playwright จะรอโดยอัตโนมัติจนกว่าส่วนของ “บทความล่าสุด” จะโหลดเสร็จ
• ค้นหาและดึงข้อมูล: ใช้ page.locator() เพื่อค้นหา Element ของหัวข้อข่าวทั้งหมด แล้ววน Loop เพื่อดึงข้อความ (text) ออกมาเก็บไว้ใน List
• ปิดเบราว์เซอร์: เมื่อทำงานเสร็จ เบราว์เซอร์จะถูกปิดลงอย่างสมบูรณ์
# ตัวอย่างโค้ด
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(“https://ttt-website.com/”)
# ค้นหาหัวข้อข่าวทั้งหมดที่มี CSS class ‘article-title’
headlines = page.locator(“.article-title”).all_inner_texts()
print(“5 หัวข้อข่าวล่าสุด:”)
for title in headlines[:5]:
print(f”- {title}”)
browser.close()
เป้าหมาย: ทดสอบว่าผู้ใช้สามารถล็อกอินเข้าสู่ระบบได้สำเร็จ และเมื่อล็อกอินแล้วจะเห็นชื่อผู้ใช้ของตัวเองแสดงบนหน้าจอ
การทำงานของ Playwright:
เปิดหน้าล็อกอิน :
page.goto(“https://ttt-website.com/login”)
• page.fill(“#username”, “myuser”)
• page.fill(“#password”, “mypassword”)
คลิกปุ่มล็อกอิน และรอ: with page.expect_navigation(): page.click(“#login-button”) คำสั่งนี้จะคลิกปุ่มและรอให้หน้าเว็บเปลี่ยนไปหน้าใหม่โดยอัตโนมัติ ซึ่งเป็นการรอที่แม่นยำมาก
• ตรวจสอบว่า URL เปลี่ยนไปเป็น /profile หรือไม่
• ใช้ expect(page.locator(“#user-greeting”)).to_have_text(“สวัสดี, myuser”) เพื่อยืนยันว่าข้อความต้อนรับแสดงชื่อผู้ใช้ที่ถูกต้อง
เป้าหมาย: ตรวจสอบว่าหน้าสินค้าบน ttt-website.com แสดงผลแบบ Mobile-friendly บน iPhone 13 หรือไม่
การทำงานของ Playwright:
• Playwright ทำให้เรื่องนี้ง่ายอย่างไม่น่าเชื่อด้วยการใช้ “Device Descriptors”
• สร้าง Context ของเบราว์เซอร์แบบจำลอง : แทนที่จะสร้างหน้าเว็บปกติ เราจะสร้างมันขึ้นมาใหม่โดยระบุอุปกรณ์ที่ต้องการจำลอง
# สร้าง context ที่จำลอง iPhone 16
iphone_16 = p.devices[‘iPhone 16’]
context = browser.new_context(**iphone_16)
page = context.new_page()
• เข้าสู่หน้าสินค้า: page.goto(“https://ttt-website.com/products”)
• ถ่ายภาพหน้าจอ: page.screenshot(path=”mobile-products-view.png”)
• ตรวจสอบ: เราสามารถนำภาพ Screenshot ที่ได้ไปเปรียบเทียบกับภาพต้นแบบ (Snapshot Testing) หรือใช้ Locator ตรวจสอบว่า Element ที่ควรจะเห็นบนมือถือ (เช่น ปุ่มเมนู Hamburger) แสดงขึ้นมาหรือไม่
เป้าหมาย : ทดสอบหน้าโปรไฟล์โดยไม่ต้องรอการอัปโหลดรูปภาพจริงๆ ซึ่งอาจจะช้า และไม่แน่นอน
การทำงานของ Playwright:
เราสามารถ “ดักจับ” การเชื่อมต่อ Network ที่หน้าเว็บพยายามจะส่งออกไปได้
• สร้าง Route เพื่อดักจับ URL: เราจะบอก Playwright ว่า “ถ้ามีการส่ง Request แบบ POST ไปที่ URL /api/upload ให้ดักจับไว้”
# ดักจับ request ที่จะไป /api/upload
def handle_route(route):
# สร้าง Response ปลอมๆ ว่าอัปโหลดสำเร็จ
route.fulfill(
status=200,
content_type=”application/json”,
body='{“status”: “success”, “message”: “อัปโหลดรูปภาพสำเร็จ!”}’
)
page.route(“**/api/upload”, handle_route)
• จำลองการอัปโหลด : สั่งให้สคริปต์ทำงานตามขั้นตอนการอัปโหลดรูปภาพตามปกติ
• ผลลัพธ์: เมื่อผู้ใช้กดปุ่มอัปโหลด แทนที่เบราว์เซอร์จะส่งไฟล์ไปที่เซิร์ฟเวอร์จริงๆ Playwright จะเข้ามาขวางและส่ง Response ปลอมๆ ที่เราสร้างไว้กลับไปให้ Frontend ทันที ทำให้เราสามารถทดสอบได้ว่าหน้าเว็บแสดงข้อความ “อัปโหลดสำเร็จ” อย่างถูกต้องหรือไม่ โดยไม่ต้องสนใจ Backend เลย
• Cross-browser : เขียนโค้ดครั้งเดียว รันได้บน Chromium, Firefox, WebKit ทดสอบหน้าเว็บว่าปุ่มต่างๆ ทำงานเหมือนกันทั้งบน Chrome, Firefox, และ Safari
• Auto-waiting : รอให้ Element พร้อมใช้งานโดยอัตโนมัติ ไม่ต้องใช้ time.sleep() รอให้ปุ่ม “เพิ่มลงตะกร้า” ปรากฏขึ้นมาก่อนที่จะกดคลิก
• Network Interception : ดักจับ, แก้ไข, หรือบล็อก Network Requests บล็อกสคริปต์โฆษณาเพื่อทดสอบความเร็วในการโหลดหน้าเว็บ หรือสร้างข้อมูลสินค้าปลอมๆ เพื่อทดสอบหน้าแสดงผล
• Device Emulation : จำลองอุปกรณ์มือถือ, Geolocation, Timezone ทดสอบหน้า Checkout บนหน้าจอ Samsung Galaxy และจำลองตำแหน่ง GPS ว่าอยู่ที่กรุงเทพฯ หรือ ขอนแก่น
• Trace Viewer : เครื่องมือดีบักที่บันทึกทุกขั้นตอนการทำงานเป็นไทม์ไลน์ เมื่อเทสล็อกอินล้มเหลว สามารถย้อนดูได้ว่าตอนกรอกรหัสผ่านเกิดอะไรขึ้น และ Network ตอบกลับมาว่าอย่างไร
• Screenshot & Video : บันทึกภาพนิ่งหรือวิดีโอการทำงานทั้งหมด บันทึกวิดีโอการทำงานของสคริปต์ทั้งหมดเพื่อนำไปวิเคราะห์ หรือถ่ายภาพหน้าจออัตโนมัติเมื่อเกิด Error
Playwright ไม่ได้เป็นเพียงเครื่องมือสำหรับนักทดสอบซอฟต์แวร์ แต่ยังเป็นเครื่องมือที่ทรงพลังสำหรับนักพัฒนา, Data Scientist, หรือใครก็ตามที่ต้องการทำงานกับเว็บไซต์อย่างเป็นระบบและอัตโนมัติ ด้วยความสามารถที่ครบครันและความเสถียรที่สูง ทำให้ Playwright เป็นหนึ่งในเครื่องมือแห่งอนาคตที่น่าจับตามองอย่างยิ่ง
สถานการณ์: ผู้ใช้ต้องล็อกอินที่ https://ttt-website.com/login ซึ่งมีฟอร์มล็อกอินและ CAPTCHA รูปภาพ
from playwright.sync_api import sync_playwright
from PIL import Image, ImageEnhance
import pytesseract
import logging
logging.basicConfig(level=logging.INFO, format=’%(asctime)s [%(levelname)s] – %(message)s’)
logger = logging.getLogger(__name__)
def login_ttt_website():
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
context = browser.new_context(user_agent=”Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/125.0.0.0″)
page = context.new_page()
logger.info(“Navigating to login page…”)
page.goto(“https://ttt-website.com/login”, timeout=60000)
page.wait_for_load_state(‘domcontentloaded’)
logger.info(“Filling login form…”)
page.fill(“#username”, “user123”)
page.fill(“#password”, “Pass@123”)
logger.info(“Capturing CAPTCHA image…”)
captcha_path = “/tmp/captcha.png”
page.locator(“#captcha-image”).screenshot(path=captcha_path)
logger.info(“Processing CAPTCHA…”)
img = Image.open(captcha_path).convert(“L”)
img = ImageEnhance.Contrast(img).enhance(2.0)
captcha_text = pytesseract.image_to_string(img, config=’–psm 8 -c tessedit_char_whitelist=0123456789′).strip()
logger.info(f”CAPTCHA text: {captcha_text}”)
page.fill(“#captcha-input”, captcha_text)
logger.info(“Submitting form…”)
with page.expect_navigation(timeout=15000):
page.click(“#login-button”)
if “dashboard” not in page.url:
logger.error(“Login failed!”)
page.screenshot(path=”/tmp/login_error.png”)
raise Exception(“Login failed”)
logger.info(“Login successful!”)
cookies = context.cookies()
with open(“/tmp/cookies.json”, “w”) as f:
json.dump(cookies, f)
browser.close()
if __name__ == “__main__”:
login_ttt_website()
• Playwright เปิด Chromium แบบ headless และนำทางไปยังหน้า https://ttt-website.com/login
• กรอกชื่อผู้ใช้ และรหัสผ่านในฟอร์ม
• จับภาพ CAPTCHA และใช้ Tesseract OCR อ่านข้อความ
• กรอกข้อความ CAPTCHA และส่งฟอร์ม
• ตรวจสอบการล็อกอินโดยดู URL หากสำเร็จจะบันทึกคุกกี้ลงในไฟล์ cookies.json
• จัดการหน้าเว็บที่มี JavaScript และ CAPTCHA ได้อย่างราบรื่น
• บันทึกคุกกี้สำหรับการใช้งานต่อในเซสชันอื่น (เช่น การสั่งซื้อ)
สถานการณ์ : ต้องการทดสอบว่าหน้าแสดงสินค้า https://ttt-website.com/products โหลดสินค้าครบถ้วนและปุ่ม “Add to Cart” ทำงานถูกต้อง
โค้ดตัวอย่าง :
from playwright.sync_api import sync_playwright
import logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
def test_products_page():
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
logger.info(“Navigating to products page…”)
page.goto(“https://ttt-website.com/products”)
page.wait_for_selector(“.product-item”, timeout=10000)
logger.info(“Checking product items…”)
products = page.locator(“.product-item”).count()
assert products >= 10, f”Expected at least 10 products, found {products}”
logger.info(“Testing Add to Cart button…”)
page.locator(“.product-item:first-child .add-to-cart”).click()
cart_count = page.locator(“#cart-count”).inner_text()
assert cart_count == “1”, f”Expected cart count to be 1, found {cart_count}”
logger.info(“Test passed!”)
browser.close()
if __name__ == “__main__”:
test_products_page()
• นำทางไปยังหน้า https://ttt-website.com/products
• รอจนกว่าสินค้าจะโหลด (wait_for_selector)
• นับจำนวนสินค้า และตรวจสอบว่ามีอย่างน้อย 10 รายการ
• คลิกปุ่ม “Add to Cart” และตรวจสอบจำนวนในตะกร้าสินค้า
• ทดสอบ UI แบบอัตโนมัติเพื่อยืนยันการทำงานของหน้าเว็บ
• รองรับการทดสอบแบบ cross-browser หากเปลี่ยนเป็น Firefox หรือ WebKit
Playwright เป็นเครื่องมือควบคุมเบราว์เซอร์อัตโนมัติที่มีประสิทธิภาพสูง ซึ่งสามารถนำมาใช้ในหลากหลายบริบท ตั้งแต่การทดสอบแอปพลิเคชันเว็บไปจนถึงการทำงานอัตโนมัติ เช่น การดึงข้อมูลหรือการจัดการหน้าเว็บที่มีการป้องกัน อย่างไรก็ตาม การใช้ Playwright ในฐานะ Bot หรือเพื่อ แฮ็กเว็บไซต์ เป็นหัวข้อที่ต้องพิจารณาทั้งในแง่เทคนิค และจริยธรรม ด้านล่างนี้คือการนิยามการใช้งาน Playwright ในสองบริบทนี้ โดยไม่ซ้ำกับเนื้อหาบทความก่อนหน้าและมุ่งเน้นไปที่มุมมองใหม่ที่เกี่ยวข้องกับการใช้งานในลักษณะ Bot หรือการแฮ็ก
Bot ในบริบทนี้หมายถึงโปรแกรมอัตโนมัติที่จำลองพฤติกรรมของมนุษย์ในการโต้ตอบกับหน้าเว็บ โดยใช้ Playwright เพื่อควบคุมเบราว์เซอร์ในการดำเนินการ เช่น การดึงข้อมูล (web scraping), การกรอกฟอร์ม, การสมัครสมาชิก, หรือการจัดการบัญชีอัตโนมัติ การใช้งาน Playwright เป็น Bot เน้นที่การทำงานซ้ำ ๆ ที่มนุษย์อาจเสียเวลาในการทำด้วยตนเอง โดยมักใช้ในบริบทที่ถูกต้องตามกฎหมายและได้รับอนุญาตจากเจ้าของเว็บไซต์
การนำ Playwright มาใช้เป็น Bot :
การจำลองพฤติกรรมมนุษย์ :
• Playwright สามารถเลียนแบบการกระทำของผู้ใช้ เช่น การคลิก, การพิมพ์, การเลื่อนหน้า หรือการรอหน้าเว็บโหลด ทำให้ Bot ดูเหมือนมนุษย์จริง ๆ ซึ่งช่วยหลบเลี่ยงระบบป้องกันบอทพื้นฐาน
• ตัวอย่างกับ https://ttt-website.com/: สร้าง Bot เพื่อสมัครสมาชิกใหม่บนหน้า https://ttt-website.com/register โดยกรอกฟอร์มชื่อ, อีเมล, และรหัสผ่านอัตโนมัติทุกวันสำหรับบัญชีทดสอบ
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
page.goto(“https://ttt-website.com/register”)
page.fill(“#name”, “Test User”)
page.fill(“#email”, f”test{int(time.time())}@example.com”)
page.fill(“#password”, “Test@123”)
page.click(“#submit”)
browser.close()
• Playwright สามารถจัดการกับหน้าเว็บที่มี JavaScript หรือการป้องกันบอท เช่น CAPTCHA หรือ Cloudflare โดยการรัน JavaScript และจับภาพหน้าจอ
• ตัวอย่าง: Bot ดึงข้อมูลราคาสินค้าจาก https://ttt-website.com/products ซึ่งมี Cloudflare protection โดย Playwright จะผ่านการตรวจสอบอัตโนมัติและดึงข้อมูลจากหน้าเว็บที่โหลดเสร็จ
• Bot สามารถรันตามตารางเวลา (cron job) เพื่อดำเนินการซ้ำ ๆ เช่น การตรวจสอบสต็อกสินค้าหรือการโพสต์เนื้อหา
• ตัวอย่าง: Bot อัปเดตข้อมูลโปรโมชันจาก https://ttt-website.com/promotions ทุกชั่วโมงและบันทึกลงฐานข้อมูล
• การใช้ Bot ต้องได้รับอนุญาตจากเจ้าของเว็บไซต์ และปฏิบัติตาม Terms of Service (ToS) เพื่อหลีกเลี่ยงการละเมิด
• การรัน Bot บ่อยเกินไปอาจสร้างภาระให้เซิร์ฟเวอร์ ควรจำกัดอัตราการร้องขอ (rate limiting) เช่น รอ 5-10 วินาทีระหว่างการร้องขอ
• การใช้ Bot เพื่อสมัครบัญชีจำนวนมากหรือดึงข้อมูลในปริมาณมากโดยไม่ได้รับอนุญาตอาจถือเป็นการละเมิดกฎหมาย เช่น พ.ร.บ. คอมพิวเตอร์ในประเทศไทย
Playwright เป็นเครื่องมือที่ทรงพลังสำหรับการสร้าง Bot ที่ทำงานอัตโนมัติบนเว็บไซต์ เช่น การดึงข้อมูล, การจัดการฟอร์ม, หรือการทดสอบหน้าเว็บอย่าง https://ttt-website.com/ เมื่อใช้อย่างถูกต้องและได้รับอนุญาต Playwright ช่วยประหยัดเวลา และเพิ่มประสิทธิภาพได้อย่างมาก อย่างไรก็ตาม การใช้ Playwright เพื่อแฮ็กเว็บไซต์ โดยไม่ได้รับอนุญาตถือเป็นการกระทำที่ผิดจริยธรรม และผิดกฎหมาย ซึ่งอาจนำไปสู่ผลกระทบร้ายแรงทั้งต่อผู้ใช้และเจ้าของเว็บไซต์ การใช้งาน Playwright ควรอยู่ในกรอบของความรับผิดชอบ และเคารพต่อกฎหมายและจรรยาบรรณของนักพัฒนา
หากต้องการคำแนะนำเพิ่มเติมเกี่ยวกับการใช้ Playwright อย่างถูกต้องหรือการพัฒนา Bot สำหรับ ttt-website.com, กรุณาแจ้ง!
TEAM SUPPORTED : BANGKOK | KHONKAEN | NAKHON RATCHASIMA (KHAO YAI)
TEL : 095-197-2699 | EMAIL: info@siamwebsite.me
© 2016-2025 All rights reserved | SIAMWEBSITE | AFRA APACHE (THAILAND) CO.,LTD