Skip to main content

導航

簡介

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

基本導航

導航的最簡單形式是開啟一個 URL:

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

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

note

如果頁面在 load 之前進行了客戶端重定向,page.goto() 會等待重定向頁面觸發 load 事件。

當頁面載入時?

現代頁面在 load 事件觸發後執行許多活動。它們會延遲獲取資料、填充 UI、在 load 事件觸發後載入昂貴的資源、腳本和樣式。無法確定頁面何時 loaded,這取決於頁面、框架等。因此,何時可以開始與其互動呢?

在 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不佳。

當頁面被加載時,首先,一個靜態版本的頁面會被發送到瀏覽器。然後動態部分被發送,頁面變得“活躍”。作為一個非常快速的用戶,Playwright 會在看到頁面的那一刻開始與其互動。如果頁面上的按鈕已啟用,但監聽器尚未添加,Playwright 會完成它的工作,但點擊不會有任何效果。

驗證頁面是否存在不良 hydration 的一個簡單方法是打開 Chrome DevTools,在 Network 面板中選擇 "Slow 3G" 網路模擬並重新載入頁面。一旦看到感興趣的元素,與之互動。你會看到按鈕點擊會被忽略,並且輸入的文字會被隨後的頁面載入程式碼重置。解決此問題的正確方法是確保所有的互動控制項在 hydration 之後(頁面完全功能化之後)才啟用。

等待導航

點擊一個元素可能會觸發多次導航。在這些情況下,建議明確地 page.waitForURL() 到一個特定的 url。

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

導航事件

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

導航開始 通過更改頁面 URL 或與頁面互動(例如,點擊連結)。導航意圖可能會被取消,例如,在遇到無法解析的 DNS 地址時,或轉變為檔案下載。

導航已提交 時,回應標頭已被解析且會話歷史已更新。只有在導航成功(已提交)後,頁面才開始載入文件。

載入涵蓋通過網路獲取剩餘的響應正文、解析、執行腳本和觸發載入事件: