完整内容在此, 干话王_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