Skip to main content

導航

簡介​

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

基本導航​

導航的最簡單形式是開啟一個 URL:

// Navigate the page
await page.GotoAsync("https://example.com");

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

note

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

當頁面載入時？​

現代頁面在 load 事件觸發後執行許多活動。它們會延遲獲取資料、填充 UI、在 load 事件觸發後載入昂貴的資源、腳本和樣式。無法確定頁面何時 loaded，這取決於頁面、框架等。因此，何時可以開始與其互動呢？

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

// Navigate and click element
// Click will auto-wait for the element
await page.GotoAsync("https://example.com");
await page.GetByText("Example Domain").ClickAsync();

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

Playwright 運作得非常快 - 一看到按鈕就會點擊。在一般情況下，你不需要擔心所有資源是否已經載入等問題。

Hydration​

某個時間點，你會遇到一個使用案例，其中 Playwright 執行了一個動作，但似乎什麼都沒有發生。或者你在輸入欄位中輸入了一些文字，然後它會消失。最可能的原因是頁面hydration不佳。

當頁面被加載時，首先，一個靜態版本的頁面會被發送到瀏覽器。然後動態部分被發送，頁面變得“活躍”。作為一個非常快速的用戶，Playwright 會在看到頁面的那一刻開始與其互動。如果頁面上的按鈕已啟用，但監聽器尚未添加，Playwright 會完成它的工作，但點擊不會有任何效果。

驗證頁面是否存在不良 hydration 的一個簡單方法是打開 Chrome DevTools，在 Network 面板中選擇 "Slow 3G" 網路模擬並重新載入頁面。一旦看到感興趣的元素，與之互動。你會看到按鈕點擊會被忽略，並且輸入的文字會被隨後的頁面載入程式碼重置。解決此問題的正確方法是確保所有的互動控制項在 hydration 之後（頁面完全功能化之後）才啟用。

等待導航​

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

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

導航事件​

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

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

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

載入涵蓋通過網路獲取剩餘的響應正文、解析、執行腳本和觸發載入事件:

  • Page.Url 被設定為新 url
  • 文件內容通過網路加載並解析
  • Page.DOMContentLoaded 事件被觸發
  • 頁面執行一些腳本並加載樣式表和圖像等資源
  • Page.Load 事件被觸發
  • 頁面執行動態加載的腳本