跳到主要內容

導覽

簡介​

Playwright 可以導覽至 URL，並處理由頁面互動所引起的導覽。

基本導覽​

最簡單的導覽形式是開啟 URL

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

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

注意

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

頁面何時載入完成？​

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

在 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)不良。

當頁面注水 (hydrated) 時，首先，會將頁面的靜態版本傳送到瀏覽器。然後傳送動態部分，頁面變為「即時」。作為非常快速的使用者，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 事件已觸發
  • 頁面執行動態載入的腳本