ในยุคดิจิทัลที่ทุกอย่างขับเคลื่อนด้วยเว็บไซต์ การทำงานซ้ำๆ บนเว็บเบราว์เซอร์ เช่น การกรอกฟอร์ม, การดึงข้อมูล, หรือการทดสอบการทำงานของฟีเจอร์ต่างๆ ถือเป็นเรื่องที่สิ้นเปลืองเวลาและมีโอกาสเกิดข้อผิดพลาดได้ง่าย เครื่องมือที่เรียกว่า "Browser Automation" จึงถือกำเนิดขึ้นมาเพื่อแก้ปัญหานี้ และหนึ่งในเครื่องมือที่ทันสมัย และทรงพลังที่สุดในปัจจุบันคือ Playwright

Playwright คืออะไร?

Playwright คือเฟรมเวิร์ก (Framework) แบบ Open-source ที่พัฒนาโดย Microsoft ออกแบบมาเพื่อควบคุมเว็บเบราว์เซอร์โดยอัตโนมัติผ่านการเขียนโค้ด ลองจินตนาการว่าคุณสามารถเขียนสคริปต์เพื่อสั่งให้ "หุ่นยนต์" เปิดเบราว์เซอร์, เข้าชมเว็บไซต์, คลิกปุ่ม, กรอกข้อมูล, และตรวจสอบผลลัพธ์ได้เองทั้งหมด นั่นคือสิ่งที่ Playwright ทำได้ และทำได้ดีมากด้วย

หัวใจสำคัญของ Playwright คือความสามารถในการทำงานข้ามเบราว์เซอร์ (Cross-browser) ได้อย่างราบรื่น คุณสามารถเขียนโค้ดเพียงชุดเดียวแล้วสั่งให้มันทำงานบน Chromium (แกนหลักของ Google Chrome และ Microsoft Edge), Firefox, และ WebKit (แกนหลักของ Apple Safari) ได้ทันที

Playwright ทำงานอย่างไร? กรณีศึกษา: เว็บไซต์ ttt-website.com

เพื่อให้เห็นภาพการทำงานของ Playwright เราจะมาดูตัวอย่างการนำไปใช้งานกับเว็บไซต์สมมติชื่อ https://ttt-website.com/ ซึ่งมีฟีเจอร์ต่างๆ ดังนี้:

• หน้าแรก (Homepage) ที่มีบทความล่าสุด

• หน้าล็อกอิน (Login)

• หน้าค้นหา (Search)

• หน้าโปรไฟล์ผู้ใช้ (Profile) ที่สามารถอัปโหลดรูปภาพได้

• หน้าสินค้า และบริการ (Products) ที่แสดงผลต่างกันบนเดสก์ท็อป และมือถือ

การดึงข้อมูล (Web Scraping) : เก็บหัวข้อข่าวล่าสุด

เป้าหมาย: เราต้องการดึงหัวข้อข่าว 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()

2. การทดสอบการล็อกอิน (Login E2E Test)

เป้าหมาย: ทดสอบว่าผู้ใช้สามารถล็อกอินเข้าสู่ระบบได้สำเร็จ และเมื่อล็อกอินแล้วจะเห็นชื่อผู้ใช้ของตัวเองแสดงบนหน้าจอ

การทำงานของ 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") เพื่อยืนยันว่าข้อความต้อนรับแสดงชื่อผู้ใช้ที่ถูกต้อง

3. การจำลองอุปกรณ์มือถือ (Device Emulation)

เป้าหมาย: ตรวจสอบว่าหน้าสินค้าบน 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) แสดงขึ้นมาหรือไม่

4. การจัดการ Network Request (Network Interception)

เป้าหมาย : ทดสอบหน้าโปรไฟล์โดยไม่ต้องรอการอัปโหลดรูปภาพจริงๆ ซึ่งอาจจะช้า และไม่แน่นอน

การทำงานของ 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 เลย

สรุปฟีเจอร์เด่นของ Playwright

• 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 เป็นหนึ่งในเครื่องมือแห่งอนาคตที่น่าจับตามองอย่างยิ่ง

ตัวอย่าง 1: ล็อกอินอัตโนมัติและจัดการ CAPTCHA

สถานการณ์: ผู้ใช้ต้องล็อกอินที่ 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 ได้อย่างราบรื่น

• บันทึกคุกกี้สำหรับการใช้งานต่อในเซสชันอื่น (เช่น การสั่งซื้อ)

ตัวอย่าง 2 : ทดสอบ UI ของหน้าสินค้า

สถานการณ์ : ต้องการทดสอบว่าหน้าแสดงสินค้า 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 เป็น Bot หรือการแฮ็กเว็บไซต์

Playwright เป็นเครื่องมือควบคุมเบราว์เซอร์อัตโนมัติที่มีประสิทธิภาพสูง ซึ่งสามารถนำมาใช้ในหลากหลายบริบท ตั้งแต่การทดสอบแอปพลิเคชันเว็บไปจนถึงการทำงานอัตโนมัติ เช่น การดึงข้อมูลหรือการจัดการหน้าเว็บที่มีการป้องกัน อย่างไรก็ตาม การใช้ Playwright ในฐานะ Bot หรือเพื่อ แฮ็กเว็บไซต์ เป็นหัวข้อที่ต้องพิจารณาทั้งในแง่เทคนิค และจริยธรรม ด้านล่างนี้คือการนิยามการใช้งาน 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, กรุณาแจ้ง!