feat: add script examples to browser checks (#939)

src/components/BrowserExamplesMenu/constants.ts

@@ -0,0 +1,125 @@
+import { SelectableOptGroup } from '@grafana/ui';
+
+import COLOR_SCHEME_SCRIPT from './snippets/colorscheme.js?raw';
+import COOKIES_SCRIPT from './snippets/cookies.js?raw';
+import DISPATCH_SCRIPT from './snippets/dispatch.js?raw';
+import EVALUATE_SCRIPT from './snippets/evaluate.js?raw';
+import FILL_FORM_SCRIPT from './snippets/fillform.js?raw';
+import GET_ATTRIBUTE_SCRIPT from './snippets/getattribute.js?raw';
+import KEYBOARD_SCRIPT from './snippets/keyboard.js?raw';
+import MOUSE_SCRIPT from './snippets/mouse.js?raw';
+import QUERYING_SCRIPT from './snippets/querying.js?raw';
+import TOUCHSCREEN_SCRIPT from './snippets/touchscreen.js?raw';
+import WAIT_FOR_EVENT_SCRIPT from './snippets/waitForEvent.js?raw';
+import WAIT_FOR_FUNCTION_SCRIPT from './snippets/waitForFunction.js?raw';
+
+const COLOR_SCHEME = [
+  {
+    label: 'Color Scheme',
+    script: COLOR_SCHEME_SCRIPT,
+    value: 'colorscheme.js',
+  },
+];
+
+const COOKIES = [
+  {
+    label: 'Cookies Manipulation',
+    script: COOKIES_SCRIPT,
+    value: 'cookies.js',
+  },
+];
+
+const DISPATCH = [
+  {
+    label: 'Dispatch',
+    script: DISPATCH_SCRIPT,
+    value: 'dispatch.js',
+  },
+];
+
+const EVALUATE = [
+  {
+    label: 'Evaluate',
+    script: EVALUATE_SCRIPT,
+    value: 'evaluate.js',
+  },
+];
+
+const FILL_FORM = [
+  {
+    label: 'Fill Form',
+    script: FILL_FORM_SCRIPT,
+    value: 'fillform.js',
+  },
+];
+
+const GET_ATTRIBUTE = [
+  {
+    label: 'Get Attribute',
+    script: GET_ATTRIBUTE_SCRIPT,
+    value: 'getattribute.js',
+  },
+];
+
+const KEYBOARD = [
+  {
+    label: 'Keyboard Interaction',
+    script: KEYBOARD_SCRIPT,
+    value: 'keyboard.js',
+  },
+];
+
+const MOUSE = [
+  {
+    label: 'Mouse Interaction',
+    script: MOUSE_SCRIPT,
+    value: 'mouse.js',
+  },
+];
+
+const QUERYING = [
+  {
+    label: 'Querying',
+    script: QUERYING_SCRIPT,
+    value: 'querying.js',
+  },
+];
+
+const TOUCHSCREEN = [
+  {
+    label: 'Touchscreen Interaction',
+    script: TOUCHSCREEN_SCRIPT,
+    value: 'touchscreen.js',
+  },
+];
+
+const WAIT_FOR_EVENT = [
+  {
+    label: 'Wait for Event',
+    script: WAIT_FOR_EVENT_SCRIPT,
+    value: 'waitForEvent.js',
+  },
+];
+
+const WAIT_FOR_FUNCTION = [
+  {
+    label: 'Wait for Function',
+    script: WAIT_FOR_FUNCTION_SCRIPT,
+    value: 'waitForFunction.js',
+  },
+];
+
+export const BROWSER_EXAMPLE_CHOICES: SelectableOptGroup[] = [
+  { label: 'Fill Form', options: FILL_FORM },
+  { label: 'Cookies Manipulation', options: COOKIES },
+  { label: 'Dispatch', options: DISPATCH },
+  { label: 'Evaluate', options: EVALUATE },
+  { label: 'Get Attribute', options: GET_ATTRIBUTE },
+  { label: 'Keyboard Interaction', options: KEYBOARD },
+  { label: 'Mouse Interaction', options: MOUSE },
+  { label: 'Querying', options: QUERYING },
+  { label: 'Touchscreen Interaction', options: TOUCHSCREEN },
+  { label: 'Wait for Event', options: WAIT_FOR_EVENT },
+  { label: 'Wait for Function', options: WAIT_FOR_FUNCTION },
+  { label: 'Color Scheme', options: COLOR_SCHEME },
+];

src/components/BrowserExamplesMenu/snippets/colorscheme.js

@@ -0,0 +1,45 @@
+import { check } from 'k6';
+import { browser } from 'k6/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+}
+
+export default async function() {
+  const preferredColorScheme = 'dark';
+
+  const context = await browser.newContext({
+    // valid values are "light", "dark" or "no-preference"
+    colorScheme: preferredColorScheme,
+  });
+  const page = await context.newPage();
+
+  try {
+    await page.goto(
+      'https://googlechromelabs.github.io/dark-mode-toggle/demo/',
+      { waitUntil: 'load' },
+    )
+    const colorScheme = await page.evaluate(() => {
+      return {
+        isDarkColorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
+      };
+    });
+    check(colorScheme, {
+      'isDarkColorScheme': cs => cs.isDarkColorScheme
+    });
+  } finally {
+    await page.close();
+  }
+}

src/components/BrowserExamplesMenu/snippets/cookies.js

@@ -0,0 +1,127 @@
+import { check } from 'k6';
+import { browser } from 'k6/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+          type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ['rate==1.0'],
+  },
+};
+
+export default async function () {
+  const page = await browser.newPage();
+  const context = page.context();
+
+  try {
+    // get cookies from the browser context
+    check((await context.cookies()).length, {
+      'initial number of cookies should be zero': (n) => n === 0,
+    });
+
+    // add some cookies to the browser context
+    const unixTimeSinceEpoch = Math.round(new Date() / 1000);
+    const day = 60 * 60 * 24;
+    const dayAfter = unixTimeSinceEpoch + day;
+    const dayBefore = unixTimeSinceEpoch - day;
+    await context.addCookies([
+      // this cookie expires at the end of the session
+      {
+        name: 'testcookie',
+        value: '1',
+        sameSite: 'Strict',
+        domain: '127.0.0.1',
+        path: '/',
+        httpOnly: true,
+        secure: true,
+      },
+      // this cookie expires in a day
+      {
+        name: 'testcookie2',
+        value: '2',
+        sameSite: 'Lax',
+        domain: '127.0.0.1',
+        path: '/',
+        expires: dayAfter,
+      },
+      // this cookie expires in the past, so it will be removed.
+      {
+        name: 'testcookie3',
+        value: '3',
+        sameSite: 'Lax',
+        domain: '127.0.0.1',
+        path: '/',
+        expires: dayBefore,
+      },
+    ]);
+    let cookies = await context.cookies();
+    check(cookies.length, {
+      'number of cookies should be 2': (n) => n === 2,
+    });
+    check(cookies[0], {
+      'cookie 1 name should be testcookie': (c) => c.name === 'testcookie',
+      'cookie 1 value should be 1': (c) => c.value === '1',
+      'cookie 1 should be session cookie': (c) => c.expires === -1,
+      'cookie 1 should have domain': (c) => c.domain === '127.0.0.1',
+      'cookie 1 should have path': (c) => c.path === '/',
+      'cookie 1 should have sameSite': (c) => c.sameSite == 'Strict',
+      'cookie 1 should be httpOnly': (c) => c.httpOnly === true,
+      'cookie 1 should be secure': (c) => c.secure === true,
+    });
+    check(cookies[1], {
+      'cookie 2 name should be testcookie2': (c) => c.name === 'testcookie2',
+      'cookie 2 value should be 2': (c) => c.value === '2',
+    });
+
+    // let's add more cookies to filter by urls.
+    await context.addCookies([
+      {
+        name: 'foo',
+        value: '42',
+        sameSite: 'Strict',
+        url: 'http://foo.com',
+      },
+      {
+        name: 'bar',
+        value: '43',
+        sameSite: 'Lax',
+        url: 'https://bar.com',
+      },
+      {
+        name: 'baz',
+        value: '44',
+        sameSite: 'Lax',
+        url: 'https://baz.com',
+      },
+    ]);
+    cookies = await context.cookies('http://foo.com', 'https://baz.com');
+    check(cookies.length, {
+      'number of filtered cookies should be 2': (n) => n === 2,
+    });
+    check(cookies[0], {
+      'the first filtered cookie name should be foo': (c) => c.name === 'foo',
+      'the first filtered cookie value should be 42': (c) => c.value === '42',
+    });
+    check(cookies[1], {
+      'the second filtered cookie name should be baz': (c) => c.name === 'baz',
+      'the second filtered cookie value should be 44': (c) => c.value === '44',
+    });
+
+    // clear cookies
+    await context.clearCookies();
+    cookies = await context.cookies();
+    check(cookies.length, {
+      'number of cookies should be zero': (n) => n === 0,
+    });
+  } finally {
+    await page.close();
+  }
+}

src/components/BrowserExamplesMenu/snippets/dispatch.js

@@ -0,0 +1,36 @@
+import { check } from 'k6';
+import { browser } from 'k6/browser';
+
+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/', { waitUntil: 'networkidle' });
+
+    const contacts = page.locator('a[href="/contacts.php"]');
+    await contacts.dispatchEvent("click");
+
+    const h3 = page.locator("h3");
+    const ok = await h3.textContent() == "Contact us";
+    check(ok, { "header": ok });
+  } finally {
+    await page.close();
+  }
+}

src/components/BrowserExamplesMenu/snippets/evaluate.js

@@ -0,0 +1,48 @@
+import { check } from 'k6';
+import { browser } from 'k6/browser';
+
+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/', { waitUntil: 'load' });
+
+    // calling evaluate without arguments
+    let result = await page.evaluate(() => {
+      return Promise.resolve(5 * 42);
+    });
+    check(result, {
+      'result should be 210': (result) => result == 210,
+    });
+
+    // calling evaluate with arguments
+    result = await page.evaluate(
+      ([x, y]) => {
+        return Promise.resolve(x * y);
+      },
+      [5, 5]
+    );
+    check(result, {
+      'result should be 25': (result) => result == 25,
+    });
+  } finally {
+    await page.close();
+  }
+}