Skip to main content

導航

簡介​

Playwright 可以導航到 URL 並處理由頁面互動引起的導航。

基本導航​

導航的最簡單形式是開啟 URL：

// 導航頁面
await page.GotoAsync("https://example.com");

上面的程式碼載入頁面並等待網頁觸發 load 事件。當整個頁面已載入時觸發 load 事件，包括所有相依資源，如樣式表、腳本、iframe 和圖片。

note

如果頁面在 load 之前進行用戶端重新導向，Page.GotoAsync() 將等待重新導向的頁面觸發 load 事件。

頁面何時載入？​

現代頁面在觸發 load 事件後會執行許多活動。它們會延遲載入資料、填充 UI、在 load 事件觸發後載入昂貴的資源、腳本和樣式。沒有辦法知道頁面已經「載入」，這取決於頁面、框架等。那麼您什麼時候可以開始與它互動呢？

在 Playwright 中，您可以隨時與頁面互動。它會自動等待目標元素變成可操作狀態。

// 導航並點擊元素
// 點擊會自動等待元素
await page.GotoAsync("https://example.com");
await page.GetByText("Example Domain").ClickAsync();

對於上述場景，Playwright 會等待文字變為可見，會等待該元素的其餘可操作性檢查通過，然後點擊它。

Playwright 的操作就像一個非常快的使用者——它一看到按鈕就會點擊它。一般情況下，您不需要擔心是否所有資源都已載入等問題。

水合（Hydration）​

在某個時間點，您會遇到 Playwright 執行動作但看似沒有任何反應的使用案例。或者您在輸入欄位中輸入一些文字，但它會消失。這背後最可能的原因是頁面水合（hydration）效能不佳。

當頁面被水合時，首先，頁面的靜態版本會傳送到瀏覽器。然後傳送動態部分，頁面變為「活躍」狀態。作為一個非常快的使用者，Playwright 會在看到頁面的那一刻就開始與頁面互動。如果頁面上的按鈕已啟用，但監聽器尚未新增，Playwright 會執行其工作，但點擊不會有任何效果。

驗證您的頁面是否受到水合效能不佳影響的簡單方法是開啟 Chrome DevTools，在網路面板中選擇「Slow 3G」網路模擬並重新載入頁面。一旦您看到感興趣的元素，與其互動。您會看到按鈕點擊會被忽略，輸入的文字會被後續的頁面載入程式碼重設。解決此問題的正確方法是確保所有互動控制項在水合之前都被停用，直到頁面完全功能正常後。

等待導航​

點擊元素可能會觸發多次導航。在這些情況下，建議明確使用 Page.WaitForURLAsync() 等待特定的 URL。

await page.GetByText("Click me").ClickAsync();
await page.WaitForURL("**/login");

導航事件​

Playwright 將在頁面中顯示新文件的過程分為導航和載入。

導航開始於更改頁面 URL 或與頁面互動（例如，點擊連結）。導航意圖可能會被取消，例如，遇到無法解析的 DNS 位址或轉換為檔案下載。

導航提交於回應標頭已解析且會話歷史記錄已更新時。只有在導航成功（已提交）後，頁面才開始載入文件。

載入包括透過網路獲取剩餘的回應主體、解析、執行腳本和觸發載入事件：

  • Page.Url 設定為新 URL
  • 文件內容透過網路載入並解析
  • Page.DOMContentLoaded 事件被觸發
  • 頁面執行一些腳本並載入資源，如樣式表和圖片
  • Page.Load 事件被觸發
  • 頁面執行動態載入的腳本