當 Request 遇到「加載中...」的絕望

在第三章，我們教了如何用 requests + BeautifulSoup 寫一個簡單的網頁爬蟲。 這招對付 10 年前的舊網站非常管用。但如果你今天去爬現今的 PChome、蝦皮、或者是股票即時報價網站，你會發現一件崩潰的事：

你爬下來的 HTML 裡面，什麼資料都沒有，只有一行 <div id="loading">載入中...</div>。

這是因為現代網站都是用 React 或 Vue 寫的「動態渲染 (CSR)」網頁。資料是等瀏覽器跑完 JavaScript 後，才偷偷從背景 API 抓進來的。更慘的是，很多網站還會加上 Cloudflare 的「防機器人驗證 (驗證你是人類的那個打勾框框)」。

這時候，傳統爬蟲就失效了。我們需要祭出大殺器：Playwright。

---

🎭 什麼是 Playwright？

Playwright 是由微軟開源的最強「瀏覽器自動化測試工具」。 你可以把它想像成一個「幽靈工程師」。當你執行 Playwright 的 Python 腳本時，它會在背景偷偷打開一個真正的 Chrome 瀏覽器，模擬人類去點擊按鈕、滑動滾輪、等待畫面轉完圈圈，最後再把畫面上的文字抓下來。

因為它是真正的瀏覽器，所以所有的動態渲染資料都能完美呈現，甚至可以繞過許多初階的防爬蟲機制。

---

🛠️ Vibe Coding 實戰：用 Playwright 爬取動態股票資料

要學會 Playwright 的語法非常困難，因為它牽涉到大量的非同步 (async/await) 與 DOM 元素定位 (XPath / CSS Selectors)。 但有了 Cursor，我們根本不用背語法。

【Playwright 動態爬蟲 Vibe Prompt】 我正在使用 Python 開發一隻網頁爬蟲。 目標網站是 https://example-stock-site.com/ (假設這是一個需要等待 3 秒才會動態載入表格的股票網站)。

請幫我使用 playwright 套件完成以下功能：

1. 請使用 async/await 架構。
2. 開啟 Chromium 瀏覽器 (設定 headless=False 讓我能看到畫面操作過程)。
3. 導向目標網址後，請寫一行程式碼等待 #stock-table 這個元素出現 (確保動態資料已載入)。
4. 抓取表格內所有的 .stock-price 元素，並將價格轉換為浮點數，存入一個 Python List 中。
5. 將爬取到的價格 List 儲存為 prices.csv。
6. 請加上完整的中文註解與錯誤處理。

AI 產出的神級腳本：

import asyncio
import csv
from playwright.async_api import async_playwright

async def scrape_dynamic_stocks():
    # 啟動 Playwright
    async with async_playwright() as p:
        # 開啟瀏覽器，headless=False 代表會顯示真實視窗給你看
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        
        try:
            print("🌐 正在前往股票網站...")
            await page.goto('https://example-stock-site.com/')
            
            # 最重要的一步：等待動態表格載入完成！(避免抓到空值)
            print("⏳ 等待資料載入中...")
            await page.wait_for_selector('#stock-table', timeout=10000)
            
            # 抓取所有 class 為 stock-price 的元素
            price_elements = await page.query_selector_all('.stock-price')
            
            prices = []
            for element in price_elements:
                text = await element.inner_text()
                # 移除金錢符號與逗號，轉成數字
                clean_price = float(text.replace('$', '').replace(',', ''))
                prices.append([clean_price])
                
            # 存入 CSV
            with open('prices.csv', 'w', newline='', encoding='utf-8') as f:
                writer = csv.writer(f)
                writer.writerow(['Price'])
                writer.writerows(prices)
                
            print(f"✅ 成功抓取 {len(prices)} 筆股票資料！")
            
        except Exception as e:
            print(f"🚨 爬蟲發生錯誤：{e}")
        finally:
            await browser.close()

# 執行非同步程式
asyncio.run(scrape_dynamic_stocks())

---

👁️ AI 視覺定位：爬蟲的終極進化

在過去，爬蟲工程師最痛苦的，就是網站改版。 只要對方網站工程師把 class="stock-price" 改成了 class="price-text-v2"，你的爬蟲就會立刻崩潰當機。

但在未來，Vibe Coding 與 AI 結合，將會徹底改變這個痛點。 如果你把 OpenAI 的 gpt-4o (具備視覺分析能力) 串接到 Playwright 裡面，你的流程會變成這樣：

1. Playwright 打開網頁。
2. Playwright 截取一整張網頁的「螢幕截圖 (Screenshot)」。
3. 你的 Python 腳本把這張截圖傳給 OpenAI，並詢問：「請告訴我這張圖裡，台積電的股價是多少數字？」
4. OpenAI 直接看完圖片，回傳 1050 給你。

這叫做「無代碼爬蟲 (Selector-less Scraping)」。 你完全不需要去管 HTML 長什麼樣子、不用管 class 有沒有改名。只要「人類肉眼看得到的數字」，AI 就能幫你抓下來。這是目前資料科學領域最前沿的黑科技，也是你未來接案的究極兵器！