รู้จักตัว Playwright คร่าวๆกัน

Playwright ??

Playwright เป็น end-to-end testing framework ตัวนึงนอกจากโฟกัสที่การ test แล้วยังสามารถทำพวก browser automation ได้ไม่ยากเลยครับ

ภาษาที่รองรับ

• JS (TS)
• Python
• Java
• .NET
• Go

สาเหตุที่ชอบ

จากการอ่าน doc และได้ลองเล่นคร่าวๆ รู้สึกว่าเรียนรู้และใช้ง่ายไม่ยากเท่าไร

เนื่องจากยังไม่ได้ลองเล่นทุก feature ของมันแต่เท่าที่อ่านคร่าวๆแล้วรู้สึกชอบก็คือ codegen รัน script ขึ้นมาแล้วแล้วมันจะ generate code ให้เราตามที่เรา action กับตัว browser 🤩

ทีนี้ผมได้ลองเอา playwright มาใช้ใน 3 usecase คือ

1. web scraping -> go

2. generate pdf (as a server) -> ts

3. testing e2e (frontend) -> ts

ในบทความนี้จะขอพูดถึงแค่ตัวอย่างแรกส่วนสองกับสามจะไปในบทความถัดไป

ตัวอย่าง web scraping

โจทย์ก็แสนง่ายให้เข้าไปที่เว็บ mangaplus ค้นหา anime ที่ชื่อ onepiece
แล้วก็ไปหาว่าตอนล่าสุดตอนนี้คือ ตอนที่เท่าไรและชื่อตอนอะไร

เนื่องจากโจทย์ไม่ค่อยยากผมก็เลยเลือกภาษาที่ผมได้ลองเขียนได้ไม่นานนั่นก็คือภาษา go (ส่วนโจทย์ 2,3 จะเป็น javascript)

package main

import (
    "log"

    "github.com/mxschmitt/playwright-go"
)

func main() {
    pw, err := playwright.Run()

    if err != nil {
        log.Fatalf("could not start playwright: %v", err)
    }

    browser, err := pw.Chromium.Launch(playwright.BrowserTypeLaunchOptions{
        SlowMo:   playwright.Float(800.00),
        Headless: playwright.Bool(false),
    })

    if err != nil {
        log.Fatalf("could not launch chromium: %v", err)
    }

    page, err := browser.NewPage()

    if err != nil {
        log.Fatalf("could not create page: %v", err)
    }

    _, err = page.Goto("https://mangaplus.shueisha.co.jp/updates")

    if err != nil {
        log.Fatalf("could not goto: %v", err)

    }

    err = page.Fill(`[placeholder="ค้นหาตามชื่อเรื่องหรือผู้แต่ง"]`, "one piece")

    if err != nil {
        log.Fatalf("could not fill: %v", err)
    }

    err = page.Keyboard().Press("Enter")

    if err != nil {
        log.Fatalf("could not press: %v", err)
    }

    err = page.Click("text=วันพีซ")

    if err != nil {
        log.Fatalf("could not click: %v", err)
    }

    list, err := page.QuerySelectorAll("text=ตอนที่")

    if err != nil {
        log.Fatalf("could not query selector all: %v", err)
    }

    latestChapter, err := list[len(list)-1].TextContent()

    if err != nil {
        log.Fatalf("could not get text content: %v", err)
    }

    log.Println("-----------------------------")
    log.Printf("ตอนล่าสุด -> %v", latestChapter)
    log.Println("-----------------------------")
}

อธิบายโค้ดข้างบน

1. ให้ทำการเปิด browser ขึ้นมาโดยจะใช้เป็น chromium โดยตั้งค่าให้มี slow-motion หน่อยเพื่อให้เห็นการทำงานมันไม่เร็วเกินไปและตั้งค่าให้ headless เป็น false เพื่อที่จะดู ui

2. สร้างหน้าขึ้นมาแล้วไปเว็บ mangaplus

3. search onepiece ลงในช่องค้นหา

4. ค้นหาตอนล่าสุด

ผลลัพธ์

source code

ทั้งหมดนี้ก็แค่เป็นตัวอย่างเล็กๆตัวอย่างเดียวเท่านั้นครับ บทความถัดไปน่าจะเป็นการใช้ playwright มาเป็นตัวสร้าง pdf ให้เรากันครับ

Refs

• https://playwright.dev/

ถ้าเกิดผิดพลาดไปตรงไหนขออภัยด้วยนะครับ 🙏