跳到主要內容

導航

簡介​

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

基本導航​

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

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

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

注意

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

頁面何時載入？​

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

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

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

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

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

Hydration​

在某些時候，您會遇到 Playwright 執行操作，但看似沒有任何反應的用例。或者您在輸入欄位中輸入一些文字，但它會消失。這背後最可能的原因是不良的頁面hydration。

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

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

等待導航​

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

page.getByText("Click me").click();
page.waitForURL("**/login");

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

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

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

載入涵蓋透過網路取得剩餘的回應主體、解析、執行腳本和觸發 load 事件