Playwright 應(yīng)用入門：從基礎(chǔ)到實(shí)踐

Playwright 是微軟開發(fā)的開源自動(dòng)化工具，專注于現(xiàn)代 Web 應(yīng)用的端到端測(cè)試、網(wǎng)頁(yè)爬取和瀏覽器自動(dòng)化。它支持 Chromium（Chrome/Edge）、Firefox、WebKit（Safari）三大瀏覽器，提供跨語(yǔ)言 API（Java、Python、JavaScript 等），以自動(dòng)等待、強(qiáng)大的元素定位和穩(wěn)定的交互能力著稱。

一、核心優(yōu)勢(shì)與適用場(chǎng)景

• 跨瀏覽器兼容：一套代碼可在 Chromium、Firefox、WebKit 上運(yùn)行，無(wú)需修改。
• 自動(dòng)等待機(jī)制：無(wú)需手動(dòng)添加 sleep，自動(dòng)等待元素可交互后再執(zhí)行操作（解決 90% 的“元素未就緒”問(wèn)題）。
• 強(qiáng)大的定位能力：支持 CSS、XPath、文本、屬性等多種定位方式，且支持鏈?zhǔn)蕉ㄎ弧?/li>
• 隔離性：通過(guò) BrowserContext 實(shí)現(xiàn)會(huì)話隔離（類似隱私模式），適合多用戶場(chǎng)景。
• 適用場(chǎng)景：Web 自動(dòng)化測(cè)試、網(wǎng)頁(yè)數(shù)據(jù)爬取、表單自動(dòng)提交、UI 交互驗(yàn)證等。

二、入門步驟（以 Java 為例）

1. 環(huán)境準(zhǔn)備

需安裝：

• JDK 8+（Playwright 對(duì) Java 版本有要求）
• 構(gòu)建工具（Maven 或 Gradle）

2. 依賴配置

在 pom.xml（Maven）中添加依賴：

<dependencies>
    <!-- Playwright 核心依賴 -->
    <dependency>
        <groupId>com.microsoft.playwright</groupId>
        <artifactId>playwright</artifactId>
        <version>1.40.0</version>  <!-- 建議使用最新版本 -->
    </dependency>
</dependencies>

3. 下載瀏覽器驅(qū)動(dòng)

Playwright 需要對(duì)應(yīng)瀏覽器的驅(qū)動(dòng)文件，首次使用需下載（僅需執(zhí)行一次）：

import com.microsoft.playwright.Playwright;
public class InstallDrivers {
    public static void main(String[] args) {
        Playwright.install();  // 下載 Chromium、Firefox、WebKit 驅(qū)動(dòng)
    }
}

三、入門代碼示例：完整流程

以下示例實(shí)現(xiàn)一個(gè)典型場(chǎng)景：?jiǎn)?dòng)瀏覽器 → 打開網(wǎng)頁(yè) → 執(zhí)行交互（輸入、點(diǎn)擊）→ 截圖 → 關(guān)閉資源。

代碼解析：

1. 資源管理：使用 try-with-resources 包裹 Playwright 實(shí)例，確保程序結(jié)束后自動(dòng)釋放資源（避免瀏覽器進(jìn)程殘留）。
2. 瀏覽器啟動(dòng)：setHeadless(false) 用于調(diào)試（可見瀏覽器窗口），生產(chǎn)環(huán)境建議設(shè)為 true（無(wú)頭模式，更高效）。
3. 元素定位：通過(guò) page.locator(selector) 定位元素，支持 CSS 選擇器（如 #kw 表示 id 為 kw 的元素）、XPath 等。
4. 自動(dòng)等待：fill()、click() 等方法會(huì)自動(dòng)等待元素出現(xiàn)并可交互，無(wú)需手動(dòng)添加 Thread.sleep()。

四、運(yùn)行結(jié)果

執(zhí)行代碼后，會(huì)：

• 彈出 Chromium 瀏覽器窗口，自動(dòng)打開百度。
• 在搜索框輸入“Playwright 入門”并點(diǎn)擊搜索。
• 等待頁(yè)面加載完成后，截取全頁(yè)截圖并保存為 search_result.png。

五、常見問(wèn)題及解決方案

1. 依賴下載失?。∕aven/Gradle 報(bào)錯(cuò)）

現(xiàn)象：pom.xml 中添加依賴后，構(gòu)建時(shí)提示“無(wú)法下載 playwright.jar”。
原因：網(wǎng)絡(luò)問(wèn)題或倉(cāng)庫(kù)配置錯(cuò)誤。
解決：

• 檢查網(wǎng)絡(luò)連接，確保能訪問(wèn) Maven 中央倉(cāng)庫(kù)。
• 手動(dòng)指定倉(cāng)庫(kù)（在 pom.xml 中添加）：

  <repositories>
      <repository>
          <id>central</id>
          <url>https://repo1.maven.org/maven2/</url>
      </repository>
  </repositories>

2. 瀏覽器驅(qū)動(dòng)下載失敗（Playwright.install() 報(bào)錯(cuò)）

現(xiàn)象：執(zhí)行 Playwright.install() 時(shí)拋出“下載超時(shí)”或“無(wú)法連接服務(wù)器”。
原因：網(wǎng)絡(luò)限制（如國(guó)內(nèi)訪問(wèn) GitHub 困難）。
解決：

• 使用代理下載：

  // 執(zhí)行前設(shè)置代理環(huán)境變量（示例：HTTP 代理）
  System.setProperty("http.proxyHost", "127.0.0.1");
  System.setProperty("http.proxyPort", "1080");
  Playwright.install();
  

• 手動(dòng)下載驅(qū)動(dòng)：從 Playwright 驅(qū)動(dòng)倉(cāng)庫(kù) 下載對(duì)應(yīng)版本的驅(qū)動(dòng)，解壓后放在 ~/.cache/ms-playwright/ 目錄（Windows 為 C:\Users\<用戶名>\AppData\Local\ms-playwright\）。

3. 元素定位失?。?code>Locator 操作拋出異常）

現(xiàn)象：fill() 或 click() 時(shí)提示“元素未找到”或“超時(shí)”。
原因：

• 選擇器錯(cuò)誤（如 CSS 選擇器拼寫錯(cuò)誤）。
• 元素是動(dòng)態(tài)加載的（如通過(guò) JavaScript 渲染，延遲出現(xiàn)）。
• 元素在 iframe 中（需先切換到 iframe）。

解決：

• 檢查選擇器：在瀏覽器開發(fā)者工具（F12）的“Elements”面板中，使用“Ctrl+F”驗(yàn)證選擇器是否能匹配元素。
• 針對(duì)動(dòng)態(tài)元素：使用更穩(wěn)定的定位方式（如文本定位）：

  // 按文本定位（部分匹配）
  page.locator("text=百度一下").click();
  

• 處理 iframe：先獲取 iframe 再操作內(nèi)部元素：

  Frame frame = page.frameLocator("iframe[name='iframeName']").frame();
  frame.locator("#username").fill("test");  // 操作 iframe 內(nèi)的元素
  

4. 操作超時(shí)（TimeoutException）

現(xiàn)象：執(zhí)行操作時(shí)提示“Timeout 30000ms exceeded”。
原因：元素長(zhǎng)時(shí)間未就緒（如頁(yè)面卡頓、網(wǎng)絡(luò)緩慢）。
解決：

• 延長(zhǎng)超時(shí)時(shí)間（全局或針對(duì)單個(gè)操作）：

  // 全局設(shè)置超時(shí)（1分鐘）
  page.setDefaultTimeout(60000);
  // 單個(gè)操作設(shè)置超時(shí)
  page.locator("#submit").click(new Locator.ClickOptions().setTimeout(60000));

• 等待前置條件（如等待元素可見）：

  page.locator("#submit").waitFor(new Locator.WaitForOptions().setState(State.VISIBLE));
  page.locator("#submit").click();
  

5. 無(wú)頭模式下截圖空白

現(xiàn)象：headless=true 時(shí)截圖為空白，headless=false 時(shí)正常。
原因：無(wú)頭模式默認(rèn)視口較?。?00x600），或頁(yè)面未完全加載。
解決：

• 顯式設(shè)置視口大?。?div id="wppm3vysvbp" class="jb51code">

  Page page = browser.newPage(new Browser.NewPageOptions()
      .setViewportSize(1920, 1080)  // 適配頁(yè)面尺寸
  );