跳到主要內容

導覽

簡介​

Playwright 可以導覽至 URL，並處理頁面互動所造成的導覽。

基本導覽​

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

# Navigate the page
page.goto("https://example.com")

以上程式碼會載入頁面，並等待網頁觸發 load 事件。當整個頁面 (包括所有相依資源，例如樣式表、指令碼、iframe 和圖片) 都載入完成時，就會觸發 load 事件。

注意

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

頁面何時載入完成？​

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

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

# Navigate and click element
# Click will auto-wait for the element
page.goto("https://example.com")
page.get_by_text("example domain").click()

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

Playwright 的運作方式就像非常快速的使用者一樣 - 一看到按鈕，就會點擊它。在一般情況下，您不必擔心是否已載入所有資源等等。

Hydration​

在某些時候，您會偶然發現一種使用案例，Playwright 執行動作，但似乎沒有任何反應。或者您在輸入欄位中輸入一些文字，它就會消失。這背後最可能的原因是頁面 hydration 不佳。

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

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

等待導覽​

點擊元素可能會觸發多次導覽。在這些情況下，建議明確地 page.wait_for_url() 到特定 URL。

page.get_by_text("Click me").click()
page.wait_for_url("**/login")

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

導覽開始於變更頁面 URL 或與頁面互動 (例如，點擊連結)。導覽意圖可能會被取消，例如，在遇到未解析的 DNS 位址或轉換為檔案下載時。

當回應標頭已剖析且工作階段記錄已更新時，導覽會提交。只有在導覽成功 (已提交) 後，頁面才會開始載入文件。

載入涵蓋透過網路取得剩餘的回應主體、剖析、執行指令碼和觸發載入事件

  • page.url 設定為新的 URL
  • 文件內容透過網路載入並剖析
  • page.on("domcontentloaded") 事件已觸發
  • 頁面執行一些指令碼並載入資源，例如樣式表和圖片
  • page.on("load") 事件已觸發
  • 頁面執行動態載入的指令碼