Switch streaming back to browser tests

Author: alexeyr

.eslintrc

@@ -93,3 +93,7 @@ overrides:
       "import/no-unresolved":
         - error
         - { ignore: ["k6.*"] }
+      no-use-before-define:
+        - error
+        # We want to allow function.name in options, and place them at the top of the file
+        - { functions: false }

CONTRIBUTING.md

@@ -300,7 +300,10 @@ The benchmarking scripts are in `k6` directory, so you can run, for example:
 ```sh
 k6 run k6/root.js
 ```
-to exercise the main page of the dummy app, or `k6/streaming.js` for the streaming page.
+to exercise the main page of the dummy app.
+
+For browser tests like `k6/streaming.js`, it's recommended to include `K6_BROWSER_LOG=fatal` for actual measurement after verifying the tests work.
+It avoids unnecessary overhead from outputting console messages.
 
 For significant changes, please make sure to run all benchmarks before and after, and include the results in the PR.
 Later they will be added to CI, if we can make sure the results there are stable enough.

k6/streaming.js

@@ -1,19 +1,34 @@
 import { check } from 'k6';
-import http from 'k6/http';
+import { browser } from 'k6/browser';
 import { defaultOptions, url } from './lib/util.js';
 
-export const options = defaultOptions();
+const streamingUrl = url('stream_async_components?delay=5');
 
-export default () => {
-  const streamingUrl = url('stream_async_components?delay=5');
-  check(http.get(streamingUrl), {
-    'status was 200': (res) => res.status === 200,
-    'has all comments': (res) => {
-      const body = res.html().text();
-      const commentIds = [1, 2, 3, 4];
-      const hasAllComments = commentIds.every((commentId) => body.includes(`Comment ${commentId}`));
-      const hasFailedRequests = !!body.match(/Request to .+ failed/i);
-      return hasAllComments && !hasFailedRequests;
-    },
-  });
+export const options = {
+  scenarios: {
+    browser: defaultOptions({ isBrowser: true }),
+  },
+};
+
+export default async () => {
+  const page = await browser.newPage();
+  try {
+    const response = await page.goto(streamingUrl);
+    check(response, {
+      'status was 200': (res) => res.status() === 200,
+    });
+    await page.waitForFunction(() => !document.body.textContent.includes('Loading'), {
+      // in milliseconds
+      timeout: 5000,
+    });
+    check(await page.locator('html').textContent(), {
+      'has all comments': (text) => {
+        // can't define commentIds as a constant outside, this runs in browser context
+        const commentIds = [1, 2, 3, 4];
+        return commentIds.every((id) => text.includes(`Comment ${id}`));
+      },
+    });
+  } finally {
+    await page.close();
+  }
 };