使用 k6 浏览器

浏览器模块为 k6 带来了浏览器自动化和端到端 Web 测试功能，同时支持 k6 的核心特性。它添加了浏览器级别的 API，用于与浏览器交互，并在 k6 测试中收集前端性能指标。

此模块旨在提供与 Playwright API 的大致兼容性，因此您无需学习一个全新的 API。

注意
要使用浏览器模块，请确保您使用的是最新的 k6 版本，并在您的机器上安装一个基于 Chromium 的浏览器（例如 Google Chrome）。

观看下方视频，了解更多关于 k6 浏览器的信息。

浏览器测试用例

浏览器模块的主要用例是在浏览器层面测试性能。浏览器级别测试提供了一种衡量用户体验并发现协议层面难以捕捉的问题的方法。浏览器级别测试可以帮助您回答以下问题：

当我的应用程序从协议层面接收到数千个并发请求时，前端会发生什么？
我如何获取特定于浏览器的指标，例如总页面加载时间？
前端上的所有元素都具有交互性吗？
有没有加载转圈会持续很长时间才消失？

一个简单的浏览器测试

import { browser } from 'k6/browser';
import { check } from 'https://jslib.k6.io/k6-utils/1.5.0/index.js';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
  thresholds: {
    checks: ['rate==1.0'],
  },
};

export default async function () {
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    await page.goto('https://test.k6.io/my_messages.php');

    await page.locator('input[name="login"]').type('admin');
    await page.locator('input[name="password"]').type('123');

    await Promise.all([page.waitForNavigation(), page.locator('input[type="submit"]').click()]);

    await check(page.locator('h2'), {
      header: async (h2) => (await h2.textContent()) == 'Welcome, admin!',
    });
  } finally {
    await page.close();
  }
}

前面的代码启动一个基于 Chromium 的浏览器，访问应用程序并模拟用户登录应用程序。提交后，它检查标头文本是否与预期匹配。

运行测试后，将报告以下浏览器指标。

         /\      Grafana   /‾‾/
    /\  /  \     |\  __   /  /
   /  \/    \    | |/ /  /   ‾‾\
  /          \   |   (  |  (‾)  |
 / __________ \  |_|\_\  \_____/

  execution: local
     script: test.js
     output: -

  scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop):
           * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s)


running (00m01.3s), 0/1 VUs, 1 complete and 0 interrupted iterations
ui   ✓ [======================================] 1 VUs  00m01.3s/10m0s  1/1 shared iters

     ✓ header

     browser_data_received.......: 2.6 kB  2.0 kB/s
     browser_data_sent...........: 1.9 kB  1.5 kB/s
     browser_http_req_duration...: avg=215.4ms  min=124.9ms med=126.65ms max=394.64ms p(90)=341.04ms p(95)=367.84ms
     browser_http_req_failed.....: 0.00%   ✓ 0        ✗ 3
     browser_web_vital_cls.......: avg=0        min=0       med=0        max=0        p(90)=0        p(95)=0
     browser_web_vital_fcp.......: avg=344.15ms min=269.2ms med=344.15ms max=419.1ms  p(90)=404.11ms p(95)=411.6ms
     browser_web_vital_fid.......: avg=200µs    min=200µs   med=200µs    max=200µs    p(90)=200µs    p(95)=200µs
     browser_web_vital_inp.......: avg=8ms      min=8ms     med=8ms      max=8ms      p(90)=8ms      p(95)=8ms
     browser_web_vital_lcp.......: avg=419.1ms  min=419.1ms med=419.1ms  max=419.1ms  p(90)=419.1ms  p(95)=419.1ms
     browser_web_vital_ttfb......: avg=322.4ms  min=251ms   med=322.4ms  max=393.8ms  p(90)=379.52ms p(95)=386.66ms
   ✓ checks......................: 100.00% ✓ 1        ✗ 0
     data_received...............: 0 B     0 B/s
     data_sent...................: 0 B     0 B/s
     iteration_duration..........: avg=1.28s    min=1.28s   med=1.28s    max=1.28s    p(90)=1.28s    p(95)=1.28s
     iterations..................: 1       0.777541/s
     vus.........................: 1       min=1      max=1
     vus_max.....................: 1       min=1      max=1

这通过 Web Vitals 以及来自浏览器的 HTTP 请求，提供了浏览器性能的表现。