Add sync JS examples

examples/sync_colorscheme.js

@@ -0,0 +1,45 @@
+import { check } from 'k6';
+import { browser } from 'k6/x/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 = browser.newContext({
+    // valid values are "light", "dark" or "no-preference"
+    colorScheme: preferredColorScheme,
+  });
+  const page = context.newPage();
+
+  try {
+    await page.goto(
+      'https://googlechromelabs.github.io/dark-mode-toggle/demo/',
+      { waitUntil: 'load' },
+    )
+    const colorScheme = page.evaluate(() => {
+      return {
+        isDarkColorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
+      };
+    });
+    check(colorScheme, {
+      'isDarkColorScheme': cs => cs.isDarkColorScheme
+    });
+  } finally {
+    page.close();
+  }
+}

examples/sync_cookies.js

@@ -0,0 +1,127 @@
+import { check } from 'k6';
+import { browser } from 'k6/x/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+};
+
+export default async function () {
+  const page = browser.newPage();
+  const context = page.context();
+
+  try {
+    // get cookies from the browser context
+    check(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;
+    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 = 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.
+    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 = 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
+    context.clearCookies();
+    cookies = context.cookies();
+    check(cookies.length, {
+      'number of cookies should be zero': n => n === 0,
+    });
+  } finally {
+    page.close();
+  }
+}

examples/sync_device_emulation.js

@@ -0,0 +1,51 @@
+import { check, sleep } from 'k6';
+import { browser, devices } from 'k6/x/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+}
+
+export default async function() {
+  const device = devices['iPhone X'];
+  // The spread operator is currently unsupported by k6's Babel, so use
+  // Object.assign instead to merge browser context and device options.
+  // See https://github.com/grafana/k6/issues/2296
+  const options = Object.assign({ locale: 'es-ES' }, device);
+  const context = browser.newContext(options);
+  const page = context.newPage();
+
+  try {
+    await page.goto('https://k6.io/', { waitUntil: 'networkidle' });
+    const dimensions = page.evaluate(() => {
+      return {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+        deviceScaleFactor: window.devicePixelRatio
+      };
+    });
+
+    check(dimensions, {
+      'width': d => d.width === device.viewport.width,
+      'height': d => d.height === device.viewport.height,
+      'scale': d => d.deviceScaleFactor === device.deviceScaleFactor,
+    });
+
+    if (!__ENV.K6_BROWSER_HEADLESS) {
+      sleep(10);
+    }
+  } finally {
+    page.close();
+  }
+}

examples/sync_dispatch.js

@@ -0,0 +1,36 @@
+import { check } from 'k6';
+import { browser } from 'k6/x/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+}
+
+export default async function() {
+  const context = browser.newContext();
+  const page = context.newPage();
+
+  try {
+    await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
+
+    page.locator('a[href="/contacts.php"]')
+        .dispatchEvent("click");
+
+    check(page, {
+      header: (p) => p.locator("h3").textContent() == "Contact us",
+    });
+  } finally {
+    page.close();
+  }
+}

examples/sync_elementstate.js

@@ -0,0 +1,47 @@
+import { check } from 'k6';
+import { browser } from 'k6/x/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+}
+
+export default function() {
+  const context = browser.newContext();
+  const page = context.newPage();
+
+  // Inject page content
+  page.setContent(`
+    <div class="visible">Hello world</div>
+    <div style="display:none" class="hidden"></div>
+    <div class="editable" editable>Edit me</div>
+    <input type="checkbox" enabled class="enabled">
+    <input type="checkbox" disabled class="disabled">
+    <input type="checkbox" checked class="checked">
+    <input type="checkbox" class="unchecked">
+  `);
+
+  // Check state
+  check(page, {
+    'visible': p => p.$('.visible').isVisible(),
+    'hidden': p => p.$('.hidden').isHidden(),
+    'editable': p => p.$('.editable').isEditable(),
+    'enabled': p => p.$('.enabled').isEnabled(),
+    'disabled': p => p.$('.disabled').isDisabled(),
+    'checked': p => p.$('.checked').isChecked(),
+    'unchecked': p => p.$('.unchecked').isChecked() === false,
+  });
+
+  page.close();
+}

examples/sync_evaluate.js

@@ -0,0 +1,46 @@
+import { check } from 'k6';
+import { browser } from 'k6/x/browser';
+
+export const options = {
+  scenarios: {
+    ui: {
+      executor: 'shared-iterations',
+      options: {
+        browser: {
+            type: 'chromium',
+        },
+      },
+    },
+  },
+  thresholds: {
+    checks: ["rate==1.0"]
+  }
+}
+
+export default async function() {
+  const context = browser.newContext();
+  const page = context.newPage();
+
+  try {
+    await page.goto("https://test.k6.io/", { waitUntil: "load" });
+
+    // calling evaluate without arguments
+    let result = page.evaluate(() => {
+        return Promise.resolve(5 * 42);
+    });
+    check(result, {
+      "result should be 210": (result) => result == 210,
+    });
+
+    // calling evaluate with arguments
+    result = page.evaluate(([x, y]) => {
+        return Promise.resolve(x * y);
+      }, [5, 5]
+    );
+    check(result, {
+      "result should be 25": (result) => result == 25,
+    });
+  } finally {
+    page.close();
+  }
+}