跳到主要內容

導覽

簡介​

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

基本導覽​

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

// Navigate the page
await page.goto('https://example.com');

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

注意

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

頁面何時載入完成？​

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

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

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

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

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

Hydration​

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

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

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

等待導覽​

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

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

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

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

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

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