Fix colorscheme example

* Browser launcher doesn't know about the preferred color scheme.
  Browser context knows about color schemes
  This fix moves it to the browser context.

* Instead of getting the preferred color scheme from an element,
  the new script gets it from the window object.

Fixes #46

examples/colorscheme.js

@@ -2,24 +2,31 @@ import launcher from 'k6/x/browser';
 import { check } from 'k6';
 
 export default function() {
+  const preferredColorScheme = 'dark';
+
   const browser = launcher.launch('chromium', {
-    // FIXME: colorScheme doesn't actually work... The page loads in light mode
-    // regardless of the colorScheme value.
-    // See https://github.com/grafana/xk6-browser/issues/46
-    colorScheme: 'dark', // Valid values are "light", "dark" or "no-preference"
     headless: __ENV.XK6_HEADLESS ? true : false,
   });
-  const context = browser.newContext();
+
+  const context = browser.newContext({
+    // valid values are "light", "dark" or "no-preference"
+    colorScheme: preferredColorScheme,
+  });
   const page = context.newPage();
-  page.goto('https://googlechromelabs.github.io/dark-mode-toggle/demo/', { waitUntil: 'load' });
-  const el = page.$('#dark-mode-toggle-3');
 
-  // FIXME: getAttribute() fails with:
-  // unable to get node ID of element handle *dom.RequestNodeParams
-  // See https://github.com/grafana/xk6-browser/issues/47
-  // check(el, {
-  //   'color scheme': e => e.getAttribute('mode') == 'dark',
-  // });
+  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
+  });
 
   page.close();
   browser.close();