Skip to main content

導航

簡介​

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

基本導航​

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

// 導航頁面
await page.goto('https://example.com');

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

note

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

頁面何時載入？​

現代頁面在 load 事件觸發後執行大量活動。它們懶惰地取得資料、填入 UI、在 load 事件觸發後載入昂貴的資源、腳本和樣式。沒有辦法知道頁面已「載入」，這取決於頁面、框架等。那麼您何時可以開始與它互動？

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

// 導航並點擊元素
// 點擊會自動等待元素
await page.goto('https://example.com');
await page.getByText('Example Domain').click();

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

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

水合​

在某個時刻，您會遇到 Playwright 執行動作，但似乎什麼都沒發生的用例。或者您在輸入欄位中輸入一些文字，它會消失。這背後最可能的原因是糟糕的頁面水合。

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

驗證頁面是否存在糟糕水合的簡單方法是開啟 Chrome DevTools，在網路面板中選擇「Slow 3G」網路模擬並重新載入頁面。一旦您看到感興趣的元素，就與它互動。您會看到按鈕點擊會被忽略，輸入的文字會被後續的頁面載入程式碼重設。此問題的正確修復是確保所有互動控制項在水合之前都被停用，直到頁面完全正常運作。

等待導航​

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

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

導航事件​

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

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

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

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