完整內容在此, 幹話王_Grafana k6 browser testing

既上一篇的 xk6
今天分享 k6 也能寫瀏覽器測試 !

Grafana k6 Browser current version

k6 Browser 在設計時, 大部分 API 跟名詞都遵循 Playwright 的 API 設計, 這樣的設計使得開發者降低從 Playwright 遷移腳本的認知負擔, 還可直接重用現有的元素定位策略. 以及未來會支援 Playwright RPC server .

瀏覽器的部分現在只支援Chromium, 未來才會陸續支援 Firefox 和 WebKit-based 的瀏覽器.

所以 k6 Browser 若是有看不懂或描述不清楚的文件, 前往 Playwright 官網查看會比較快又豐富.

k6 Browser 常用 API

k6 Browser 提供了很多 API 模組，其中許多都跟 Playwright 的操作方式兼容。以下是一些基本一定會用到的 API 模組。

Browser context

BrowserContext 在 Playwright 中是一個重要的概念，它代表了一個獨立的瀏覽器 session，類似於 private 模式，可以隔離 cookies 和 Local storage 等，使得每個測試案例在獨立的環境中運行，避免相互幹擾。

常見測試目的像是多帳號測試場景、不同裝置或效能測試場景的模擬等。

import { browser } from "k6/browser";  

const iphoneX = devices['iPhone X'];
const context = await browser.newContext(iphoneX);

Page

在 Playwright 和 k6 中，**Page**代表一個瀏覽器標籤頁或頁面，使用者透過Page物件與頁面內容交互，例如導覽、元素操作等。需要區分不同框架中的實作差異，例如 k6 可能更注重效能測試，而 Playwright 則更著重功能測試。同一個 BrowserContext 底下能開啟很多 Page 來測試。

// 多頁面管理範例
const context = browser.newContext();
const page1 = await context.newPage();
const page2 = await context.newPage();

// 頁面關係示意
Browser Instance
└── BrowserContext
    ├── Page 1 (Main Frame)
    │   └── Sub Frame (iframe)
    └── Page 2 (SPA)

如果有多個頁面，我們能實踐**跨 Page 通訊**的測試互動

// 主頁面
const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  page.click('#open-window')
]);

// 新頁面操作
await popup.fill('#email', 'test@example.com');

但絕大多數我們幾乎都是在單個 Page 上操作的，畢竟現在大部份網站都是 SPA 架構了。

goto 與 waitForNavigation 是 page 蠻常會使用的 API。

goto(url[, options])

將該頁導航至對應的 URL。通常測試腳本一開始就會執行這句。

await page.goto(`https://otel-demo.field-eng.grafana.net/`);

waitForNavigation([options])

在很多範例的測試腳本都會看到 page.waitForNavigation()，用來等待頁面導航至新的 URL 或重新載入。當您執行會間接導致頁面導航的程式碼時，此方法非常有用。

如果不知道這隻 API，大家肯定會用 sleep(t) 或者使用 waitForTimeout(t)，但這個會是個反模式。最顯著的問題是 life cycle，sleep 本身就是blocking的操作，所以 sleep的時長就會被納入 k6 的統計中。其次是可能會使得測試不夠穩定，也可能 sleep 過了，頁面都還沒載入。而waitForTimeout 跟 sleep 其實是一樣的東西。

 page.waitForNavigation()

頁面載入狀態事件

當一個頁面開始載入時，有三個狀態我們需要了解的。domcontentloaded、load 和 networkidle，接下來，我需要分別解釋​​這三個事件：

domcontentloaded：當DOMContentLoaded事件觸發時完成操作。這個事件在HTML文件被完全載入和解析時觸發，無需等待 CSS、image 和框架的載入。適用於需要快速與DOM互動的情況，例如測試頁面結構是否已載入完成。

load（預設值）：當頁面所有資源（如圖片、CSS）載入完成後觸發 load 事件。這會等待更長時間，適合需要所有資源就緒的場景，例如測試頁面完全載入後的功能。

networkidle：網路空閒至少500毫秒時認為完成。但用戶指出這在某些情況下可能不可靠，特別是對於持續有網路請求的網站（如聊天應用程式）。 k6 browser可能同樣存在這個問題，因此建議使用明確的斷言來確認頁面狀態。

事件狀態比較表

sequenceDiagram
    participant 瀏覽器
    participant 測試腳本

    瀏覽器->>瀏覽器: 解析 HTML (DOMContentLoaded)
    瀏覽器->>瀏覽器: 載入外部資源 (load)
    瀏覽器->>瀏覽器: 監控網絡活動 (networkidle)
    瀏覽器->>測試腳本: 觸發 ready 狀態

完整內容在此, 幹話王_Grafana k6 browser testing