Use driver pattern for e2e tests (#829)

I've moved all the logic relevant to WBIO into a single file in order to
be able to replace it.
I have tried to upgrade WDIO in order to use the latest version and it
got stuck on my computer.
Furthermore, I was not able to run it locally which made this whole
cycle very long.
After this will be merged I will replace WDIO with cypress.
This doesn't change anything, only moves some code in the tests to a
single file, removes unneeded files and uses the driver pattern, which
will later allow switching the underline WDIO with Cypress.

cc: @nyurik

config/wdio.conf.js

@@ -27,7 +27,7 @@ exports.config = {
   ],
   // geckodriver-0.31 seems to have problems as of 2022 May 1
   services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: 'latest', chrome: 'latest' } } ] ],
-  logLevel: 'info',
+  logLevel: 'warn',
   bail: 0,
   screenshotPath: SCREENSHOT_PATH,
   hostname: process.env.DOCKER_HOST || "0.0.0.0",

test/config/specs.js

@@ -1,6 +1,11 @@
-var config = {};
+
-config.testNetwork = process.env.TEST_NETWORK || "localhost";
+const testNetwork = process.env.TEST_NETWORK || "localhost";
-config.port = 9001;
+const port = 9001;
-config.baseUrl = "http://"+config.testNetwork+":"+config.port;
+const baseUrl = `http://${testNetwork}:${port}`;
+const config = {
+    testNetwork,
+    port,
+    baseUrl
+};
 
 module.exports = config;

test/functional/accessibility/index.js

@@ -1,3 +1,43 @@
+var assert = require("assert");
+var driver = require("../driver");
+
 describe("accessibility", function () {
-  require("./skip-links");
+  describe("skip links", function() {
+    beforeEach(async function () {
+      await driver.setStyle("example-layer-style.json");
+    });
+  
+    it("skip link to layer list", async function() {
+      const selector = driver.getDataAttribute("root:skip:layer-list")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused("#skip-target-layer-list"));
+    });
+  
+    it("skip link to layer editor", async function() {
+      const selector = driver.getDataAttribute("root:skip:layer-editor")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused("#skip-target-layer-editor"));
+    });
+  
+    it("skip link to map view", async function() {
+      const selector = driver.getDataAttribute("root:skip:map-view")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused(".maplibregl-canvas"));
+    });
+  });  
 })

test/functional/accessibility/skip-links.js

@@ -1,51 +0,0 @@
-var assert = require("assert");
-var config = require("../../config/specs");
-var helper = require("../helper");
-var wd     = require("../../wd-helper");
-
-
-describe("skip links", function() {
-  beforeEach(async function () {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getGeoServerUrl("example-layer-style.json"));
-    await browser.acceptAlert();
-  });
-
-  it("skip link to layer list", async function() {
-    const selector = wd.$("root:skip:layer-list")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $("#skip-target-layer-list");
-    assert(await targetEl.isFocused());
-  });
-
-  it("skip link to layer editor", async function() {
-    const selector = wd.$("root:skip:layer-editor")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $("#skip-target-layer-editor");
-    assert(await targetEl.isFocused());
-  });
-
-  it("skip link to map view", async function() {
-    const selector = wd.$("root:skip:map-view")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $(".maplibregl-canvas");
-    assert(await targetEl.isFocused());
-  });
-});

test/functional/driver.js

@@ -0,0 +1,218 @@
+var {v1: uuid} = require('uuid');
+var fs = require("fs");
+var path = require("path");
+var config = require("../config/specs");
+var geoServer = require("../geojson-server");
+var artifacts = require("../artifacts");
+
+var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
+
+var testNetwork = process.env.TEST_NETWORK || "localhost";
+var geoserver;
+
+
+const driver = {
+    geoserver: {
+      start(done) {
+        geoserver = geoServer.listen(9002, "0.0.0.0", done);
+      },
+      stop(done) {
+        geoserver.close(done);
+        geoserver = undefined;
+      },
+    },
+    getStyleUrl(styles) {
+      var port = geoserver.address().port;
+      return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
+    },
+    getGeoServerUrl(urlPath) {
+      var port = geoserver.address().port;
+      return "http://"+testNetwork+":"+port+"/"+urlPath;
+    },
+
+    async setStyle(styleProperties, zoom) {
+      let url = config.baseUrl + "?debug";
+      if (styleProperties && Array.isArray(styleProperties)) {
+        url += "&style=" + this.getStyleUrl(styleProperties);
+      } else if (styleProperties && typeof styleProperties === "string") {
+        url += "&style=" + this.getGeoServerUrl(styleProperties);
+      }
+      if (zoom) {
+        url += "#" + zoom + "/41.3805/2.1635";
+      }
+      await browser.url(url);
+      if (styleProperties) {
+        await browser.acceptAlert();
+      }
+      await this.waitForExist(".maputnik-toolbar-link");
+      await this.zeroTimeout();
+    },
+    async getStyleStore() {
+      return await browser.executeAsync(function(done) {
+        window.debug.get("maputnik", "styleStore").latestStyle(done);
+      });
+    },
+    async setSurvey() {
+      await browser.execute(function() {
+        localStorage.setItem("survey", true);
+      });
+    },
+    async isMac() {
+      return await browser.execute(function() {
+        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      });
+    },
+    async typeKeys(keys) {
+      await browser.keys(keys)
+    },
+    async click(selector) {
+      const elem = await $(selector);
+      await elem.click();
+    },
+    async selectFromDropdown(selector, value) {
+      const selectBox = await $(selector);
+      await selectBox.selectByAttribute('value', value);
+      await this.zeroTimeout();
+    },
+    async isDisplayedInViewport(selector) {
+      const elem = await $(selector);
+      return elem.isDisplayedInViewport();
+    },
+    async isFocused(selector) {
+      const elem = await $(selector);
+      return elem.isFocused();
+    },
+    /**
+     * Sometimes chrome driver can result in the wrong text.
+     *
+     * See <https://github.com/webdriverio/webdriverio/issues/1886>
+     */
+    async setValue(selector, text) {
+      for (var i = 0; i < 10; i++) {
+        const elem = await $(selector);
+        await elem.waitForDisplayed(500);
+
+        var elements = await browser.findElements("css selector", selector);
+        if (elements.length > 1) {
+          throw "Too many elements found";
+        }
+
+        const elem2 = await $(selector);
+        await elem2.setValue(text);
+
+        var browserText = await elem2.getValue();
+
+        if (browserText == text) {
+          return;
+        }
+        else {
+          console.error("Warning: setValue failed, trying again");
+        }
+      }
+
+      // Wait for change events to fire and state updated
+      await this.zeroTimeout();
+    },
+    getExampleFilePath() {
+      return __dirname + "/../example-style.json";
+    },
+    async getExampleFileData() {
+      var styleFilePath = this.getExampleFilePath();
+      return JSON.parse(fs.readFileSync(styleFilePath));
+    },
+    async chooseExampleFile() {
+      const elem = await $("*[type='file']");
+      await elem.waitForExist();
+      await browser.chooseFile("*[type='file']", this.getExampleFilePath());
+    },
+    async zeroTimeout() {
+      await browser.executeAsync(function (done) {
+        // For any events to propagate
+        setTimeout(function () {
+          // For the DOM to be updated.
+          setTimeout(done, 0);
+        }, 0)
+      })
+    },
+    async sleep(milliseconds) {
+      await browser.pause(milliseconds);
+    },
+    async isExisting(selector) {
+      const elem = await $(selector);
+      return elem.isExisting();
+    },
+    async waitForExist(selector) {
+      const elem = await $(selector);
+      await elem.waitForExist();
+    },
+    async setWindowSize(height, width) {
+      await browser.setWindowSize(height, width);
+    },
+    async takeScreenShot(filepath) {
+      var savepath = path.join(SCREENSHOTS_PATH, filepath);
+      await browser.saveScreenshot(savepath);
+    },
+    getDataAttribute(key, selector) {
+      selector = selector || "";
+      return "*[data-wd-key='"+key+"'] "+selector;
+    },
+    async openLayersModal() {
+      const selector = await $(this.getDataAttribute('layer-list:add-layer'));
+      await selector.click();
+
+      // Wait for events
+      await this.zeroTimeout();
+
+      const elem = await $(this.getDataAttribute('modal:add-layer'));
+      await elem.waitForExist();
+      await elem.isDisplayed();
+      await elem.isDisplayedInViewport();
+
+      // Wait for events
+      await this.zeroTimeout();
+    },
+    async fillLayersModal(opts) {
+      var type = opts.type;
+      var layer = opts.layer;
+      var id;
+      if(opts.id) {
+        id = opts.id
+      }
+      else {
+        id = type+":"+uuid();
+      }
+
+      const selectBox = await $(this.getDataAttribute("add-layer.layer-type", "select"));
+      await selectBox.selectByAttribute('value', type);
+      await this.zeroTimeout();
+
+      await this.setValue(this.getDataAttribute("add-layer.layer-id", "input"), id);
+      if(layer) {
+        await this.setValue(this.getDataAttribute("add-layer.layer-source-block", "input"), layer);
+      }
+
+      await this.zeroTimeout();
+      const elem_addLayer = await $(this.getDataAttribute("add-layer"));
+      await elem_addLayer.click();
+
+      return id;
+    },
+
+    async closeModal(wdKey) {
+      const selector = this.getDataAttribute(wdKey);
+    
+      await browser.waitUntil(async function() {
+        const elem = await $(selector);
+        return await elem.isDisplayedInViewport();
+      });
+    
+      await this.click(this.getDataAttribute(wdKey+".close-modal"));
+    
+      await browser.waitUntil(async function() {
+        return await browser.execute((selector) => {
+          return !document.querySelector(selector);
+        }, selector);
+      });
+    }
+}
+module.exports = driver;

test/functional/helper.js

@@ -1,86 +0,0 @@
-var wd = require("../wd-helper");
-var {v1: uuid} = require('uuid');
-var geoServer = require("../geojson-server");
-
-var testNetwork = process.env.TEST_NETWORK || "localhost";
-var geoserver;
-
-module.exports = {
-  startGeoserver: function(done) {
-    geoserver = geoServer.listen(9002, "0.0.0.0", done);
-  },
-  stopGeoserver: function(done) {
-    geoserver.close(done);
-    geoserver = undefined;
-  },
-  getStyleUrl: function(styles) {
-    var port = geoserver.address().port;
-    return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
-  },
-  getGeoServerUrl: function(urlPath) {
-    var port = geoserver.address().port;
-    return "http://"+testNetwork+":"+port+"/"+urlPath;
-  },
-  getStyleStore: async function(browser) {
-    return await browser.executeAsync(function(done) {
-      window.debug.get("maputnik", "styleStore").latestStyle(done);
-    });
-  },
-  getRevisionStore: async function(browser) {
-    var result = await browser.execute(function() {
-      var rs = window.debug.get("maputnik", "revisionStore")
-
-      return {
-        currentIdx: rs.currentIdx,
-        revisions: rs.revisions
-      };
-    })
-    return result.value;
-  },
-  modal: {
-    addLayer: {
-      open: async function() {
-        const selector = await $(wd.$('layer-list:add-layer'));
-        await selector.click();
-
-        // Wait for events
-        await browser.flushReactUpdates();
-
-        const elem = await $(wd.$('modal:add-layer'));
-        await elem.waitForExist();
-        await elem.isDisplayed();
-        await elem.isDisplayedInViewport();
-
-        // Wait for events
-        await browser.flushReactUpdates();
-      },
-      fill: async function(opts) {
-        var type = opts.type;
-        var layer = opts.layer;
-        var id;
-        if(opts.id) {
-          id = opts.id
-        }
-        else {
-          id = type+":"+uuid();
-        }
-
-        const selectBox = await $(wd.$("add-layer.layer-type", "select"));
-        await selectBox.selectByAttribute('value', type);
-        await browser.flushReactUpdates();
-
-        await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
-        if(layer) {
-          await browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
-        }
-
-        await browser.flushReactUpdates();
-        const elem_addLayer = await $(wd.$("add-layer"));
-        await elem_addLayer.click();
-
-        return id;
-      }
-    }
-  }
-}
-

test/functional/history/index.js

@@ -1,8 +1,5 @@
 var assert = require("assert");
-var config = require("../../config/specs");
+var driver = require("../driver");
-var helper = require("../helper");
-
-
 
 describe("history", function() {
   let undoKeyCombo;
@@ -11,9 +8,7 @@ describe("history", function() {
   let redoKeyComboReset;
 
   before(async function() {
-    const isMac = await browser.execute(function() {
+    const isMac = await driver.isMac();
-      return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-    });
     undoKeyCombo = ['Meta', 'z'];
     undoKeyComboReset = ['Meta'];
     redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
@@ -26,22 +21,18 @@ describe("history", function() {
   it.skip("undo/redo", async function() {
     var styleObj;
 
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"])
-      "geojson:example"
+    await driver.openLayersModal();
-    ]));
-    await browser.acceptAlert();
 
-    await helper.modal.addLayer.open();
+    styleObj = await driver.getStyleStore();
-
-    styleObj = await helper.getStyleStore(browser);
     assert.deepEqual(styleObj.layers, []);
 
-    await helper.modal.addLayer.fill({
+    await driver.fillLayersModal({
       id: "step 1",
       type: "background"
     })
 
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -49,13 +40,13 @@ describe("history", function() {
       }
     ]);
 
-    await helper.modal.addLayer.open();
+    await driver.openLayersModal();
-    await helper.modal.addLayer.fill({
+    await driver.fillLayersModal({
       id: "step 2",
       type: "background"
     })
 
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -67,9 +58,9 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(undoKeyCombo)
+    await driver.typeKeys(undoKeyCombo);
-    await browser.keys(undoKeyComboReset);
+    await driver.typeKeys(undoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -77,15 +68,15 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(undoKeyCombo)
+    await driver.typeKeys(undoKeyCombo)
-    await browser.keys(undoKeyComboReset);
+    await driver.typeKeys(undoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
     ]);
 
-    await browser.keys(redoKeyCombo)
+    await driver.typeKeys(redoKeyCombo)
-    await browser.keys(redoKeyComboReset);
+    await driver.typeKeys(redoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -93,9 +84,9 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(redoKeyCombo)
+    await driver.typeKeys(redoKeyCombo)
-    await browser.keys(redoKeyComboReset);
+    await driver.typeKeys(redoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",

test/functional/index.js

@@ -1,31 +1,20 @@
-var config      = require("../config/specs");
+var driver      = require("./driver");
-var helper      = require("./helper");
-var extendWebdriverIO = require("./util/webdriverio-ext");
-
 
 describe('maputnik', function() {
 
   before(async function(done) {
-    await extendWebdriverIO();
+    await browser.setTimeout({ 'script': 20 * 1000 });
-    helper.startGeoserver(done);
+    await browser.setTimeout({ 'implicit': 20 * 1000 });
+    driver.geoserver.start(done);
   });
 
   after(function(done) {
-    helper.stopGeoserver(done);
+    driver.geoserver.stop(done);
   });
 
   beforeEach(async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example","raster:raster"]);
-      "geojson:example",
+    await driver.setSurvey();
-      "raster:raster"
-    ]));
-    await browser.acceptAlert();
-    await browser.execute(function() {
-      localStorage.setItem("survey", true);
-    });
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();
-    await browser.flushReactUpdates();
   });
 
   // -------- setup --------

test/functional/keyboard/index.js

@@ -1,55 +1,55 @@
 var assert = require("assert");
-var wd     = require("../../wd-helper");
+var driver = require("../driver");
-
 
 describe("keyboard", function() {
   describe("shortcuts", function() {
     it("ESC should unfocus", async function() {
-      const tmpTargetEl = await $(wd.$("nav:inspect") + " select");
+      const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
-      await tmpTargetEl.click();
+      driver.click(targetSelector);
-      assert(await tmpTargetEl.isFocused());
+      assert(await driver.isFocused(targetSelector));
 
-      await browser.keys(["Escape"]);
+      await driver.typeKeys(["Escape"]);
       assert(await (await $("body")).isFocused());
     });
 
     it("'?' should show shortcuts modal", async function() {
-      await browser.keys(["?"]);
+      await driver.typeKeys(["?"]);
-      assert(await (await $(wd.$("modal:shortcuts"))).isDisplayed());
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts")));
     });
 
     it("'o' should show open modal", async function() {
-      await browser.keys(["o"]);
+      await driver.typeKeys(["o"]);
-      assert(await (await $(wd.$("modal:open"))).isDisplayed());
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:open")));
     });
 
     it("'e' should show export modal", async function() {
-      await browser.keys(["e"]);
+      await driver.typeKeys(["e"]);
-      assert(await (await $(wd.$("modal:export"))).isDisplayed());
+      await driver.sleep(100);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:export")));
     });
 
     it("'d' should show sources modal", async function() {
-      await browser.keys(["d"]);
+      await driver.typeKeys(["d"]);
-      assert(await (await $(wd.$("modal:sources"))).isDisplayed());
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources")));
     });
 
     it("'s' should show settings modal", async function() {
-      await browser.keys(["s"]);
+      await driver.typeKeys(["s"]);
-      assert(await (await $(wd.$("modal:settings"))).isDisplayed());
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings")));
     });
 
     it.skip("'i' should change map to inspect mode", async function() {
-      // await browser.keys(["i"]);
+      // await driver.typeKeys(["i"]);
     });
 
     it("'m' should focus map", async function() {
-      await browser.keys(["m"]);
+      await driver.typeKeys(["m"]);
-      assert(await (await $(".maplibregl-canvas")).isFocused());
+      assert(await driver.isFocused(".maplibregl-canvas"));
     });
 
     it("'!' should show debug modal", async function() {
-      await browser.keys(["!"]);
+      await driver.typeKeys(["!"]);
-      assert(await (await $(wd.$("modal:debug"))).isDisplayed());
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug")));
     });
   });
 

test/functional/layers/index.js

@@ -1,32 +1,24 @@
 var assert = require("assert");
-var config = require("../../config/specs");
+var driver = require("../driver");
-var helper = require("../helper");
 var {v1: uuid} = require('uuid');
-var wd     = require("../../wd-helper");
-
 
 describe("layers", function() {
   beforeEach(async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    driver.setStyle([
       "geojson:example",
       "raster:raster"
-    ]));
+    ]);
-    await browser.acceptAlert();
+    await driver.openLayersModal();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();
-    await browser.flushReactUpdates();
-
-    await helper.modal.addLayer.open();
   });
 
   describe("ops", function() {
     it("delete", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -34,21 +26,20 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":delete", ""));
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
-      await elem.click();
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
       ]);
     });
 
     it("duplicate", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -56,10 +47,9 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":copy", ""));
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
-      await elem.click();
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id+"-copy",
@@ -74,11 +64,11 @@ describe("layers", function() {
 
     it("hide", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -86,10 +76,9 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
-      await elem.click();
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -100,9 +89,9 @@ describe("layers", function() {
         },
       ]);
 
-      await elem.click();
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -115,21 +104,15 @@ describe("layers", function() {
     })
   })
 
-  describe("tooltips", function() {
-  })
-
-  describe("help", function() {
-  })
-
 
   describe('background', function () {
 
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -143,15 +126,12 @@ describe("layers", function() {
         // Setup
         var id = uuid();
 
-        const selectBox = await $(wd.$("add-layer.layer-type", "select"));
+        await driver.selectFromDropdown(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
-        await selectBox.selectByAttribute('value', "background");
+        await driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
-        await browser.flushReactUpdates();
-        await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
 
-        const elem = await $(wd.$("add-layer"));
+        await driver.click(driver.getDataAttribute("add-layer"));
-        await elem.click();
 
-        var styleObj = await helper.getStyleStore(browser);
+        var styleObj = await driver.getStyleStore();
         assert.deepEqual(styleObj.layers, [
           {
             "id": 'background:'+id,
@@ -167,15 +147,13 @@ describe("layers", function() {
         it("id", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
-          await elem.click();
 
           var id = uuid();
-          await browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
+          await driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
-          const elem2 = await $(wd.$("min-zoom"));
+          await driver.click(driver.getDataAttribute("min-zoom"));
-          await elem2.click();
 
-          var styleObj = await helper.getStyleStore(browser);
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'foobar:'+id,
@@ -187,13 +165,12 @@ describe("layers", function() {
         it("min-zoom", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
-          await elem.click();
+          await driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), 1)
-          await browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -203,10 +180,10 @@ describe("layers", function() {
           ]);
 
           // AND RESET!
-          // await browser.setValueSafe(wd.$("min-zoom", "input"), "")
+          // await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
-          // await browser.click(wd.$("max-zoom", "input"));
+          // await driver.click(driver.getDataAttribute("max-zoom", "input"));
 
-          // var styleObj = await helper.getStyleStore(browser);
+          // var styleObj = await driver.getStyleStore();
 
           // assert.deepEqual(styleObj.layers, [
           //   {
@@ -219,13 +196,12 @@ describe("layers", function() {
         it("max-zoom", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
-          await elem.click();
+          await driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), 1)
-          await browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -239,13 +215,12 @@ describe("layers", function() {
           var bgId = await createBackground();
           var id = uuid();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
-          await elem.click();
+          await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
-          await browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -258,11 +233,11 @@ describe("layers", function() {
 
           // Unset it again.
           // TODO: This fails
-          // await browser.setValueSafe(wd.$("layer-comment", "textarea"), "");
+          // await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
-          // await browser.click(wd.$("min-zoom", "input"));
+          // await driver.click(driver.getDataAttribute("min-zoom", "input"));
-          // await browser.flushReactUpdates();
+          // await driver.zeroTimeout();
 
-          // var styleObj = await helper.getStyleStore(browser);
+          // var styleObj = await driver.getStyleStore();
           // assert.deepEqual(styleObj.layers, [
           //   {
           //     "id": 'background:'+bgId,
@@ -274,12 +249,11 @@ describe("layers", function() {
         it("color", null, async function() {
           var bgId = await createBackground();
 
-          await browser.click(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
 
-          await browser.click(wd.$("spec-field:background-color", "input"))
+          await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
-          // await browser.debug();
 
-          var styleObj = await helper.getStyleStore(browser);
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -311,16 +285,18 @@ describe("layers", function() {
         it.skip("parse error", async function() {
           var bgId = await createBackground();
 
-          await browser.click(wd.$("layer-list-item:background:"+bgId));
+
+
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
 
           var errorSelector = ".CodeMirror-lint-marker-error";
-          assert.equal(await browser.isExisting(errorSelector), false);
+          assert.equal(await driver.isExisting(errorSelector), false);
 
-          await browser.click(".CodeMirror")
+          await driver.click(".CodeMirror");
-          await browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
+          await driver.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
-          await browser.waitForExist(errorSelector)
+          await driver.waitForExist(errorSelector);
 
-          await browser.click(wd.$("layer-editor.layer-id"));
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id"));
         });
       });
     })
@@ -328,14 +304,13 @@ describe("layers", function() {
 
   describe('fill', function () {
     it("add", async function() {
-      // await browser.debug();
 
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "fill",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -351,12 +326,12 @@ describe("layers", function() {
 
   describe('line', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "line",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -374,12 +349,12 @@ describe("layers", function() {
 
   describe('symbol', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "symbol",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -392,12 +367,12 @@ describe("layers", function() {
 
   describe('raster', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "raster",
         layer: "raster"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -410,12 +385,12 @@ describe("layers", function() {
 
   describe('circle', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "circle",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -429,12 +404,12 @@ describe("layers", function() {
 
   describe('fill extrusion', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "fill-extrusion",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -448,41 +423,36 @@ describe("layers", function() {
 
   describe("groups", function() {
     it("simple", async function() {
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+      await driver.setStyle(["geojson:example"]);
-        "geojson:example"
-      ]));
-      await browser.acceptAlert(); 
 
-      await helper.modal.addLayer.open();
+      await driver.openLayersModal();
-      await helper.modal.addLayer.fill({
+      await driver.fillLayersModal({
         id: "foo",
         type: "background"
       })
 
-      await helper.modal.addLayer.open();
+      await driver.openLayersModal();
-      await helper.modal.addLayer.fill({
+      await driver.fillLayersModal({
         id: "foo_bar",
         type: "background"
       })
 
-      await helper.modal.addLayer.open();
+      await driver.openLayersModal();
-      await helper.modal.addLayer.fill({
+      await driver.fillLayersModal({
         id: "foo_bar_baz",
         type: "background"
       })
 
-      const groupEl = await $(wd.$("layer-list-group:foo-0"));
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
-      await groupEl.isDisplayed();
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), false);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), false);
 
-      assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
+      await driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), false);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), false);
 
-      await groupEl.click();
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), true);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), true);
 
-      assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), true);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), true);
     })
   })
 });

test/functional/map/index.js

@@ -1,16 +1,10 @@
-var config = require("../../config/specs");
+var driver = require("../driver");
-var helper = require("../helper");
-
 
 describe("map", function() {
   describe.skip("zoom level", function() {
     it("via url", async function() {
-      var zoomLevel = "12.37"
+      var zoomLevel = "12.37";
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+      await driver.setStyle(["geojson:example"], zoomLevel);
-        "geojson:example"
-      ])+"#"+zoomLevel+"/41.3805/2.1635");
-      await browser.alertAccept();
-
       await browser.waitUntil(async function () {
         return (
           await browser.isVisible(".maplibregl-ctrl-zoom")
@@ -20,12 +14,9 @@ describe("map", function() {
     })
     it("via map controls", async function() {
       var zoomLevel = 12.37;
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+      await driver.setStyle(["geojson:example"], zoomLevel);
-        "geojson:example"
-      ])+"#"+zoomLevel+"/41.3805/2.1635");
-      await browser.alertAccept();
 
-      await browser.click(".maplibregl-ctrl-zoom-in")
+      await driver.click(".maplibregl-ctrl-zoom-in");
       await browser.waitUntil(async function () {
         var text = await browser.getText(".maplibregl-ctrl-zoom")
         return text === "Zoom level: "+(zoomLevel+1);

test/functional/modals/index.js

@@ -1,93 +1,53 @@
 var assert = require('assert');
-var fs     = require("fs");
+var driver = require("../driver");
-var wd     = require("../../wd-helper");
-var config = require("../../config/specs");
-var helper = require("../helper");
-
-
-async function closeModal(wdKey) {
-  const selector = wd.$(wdKey);
-
-  await browser.waitUntil(async function() {
-    const elem = await $(selector);
-    return await elem.isDisplayedInViewport();
-  });
-
-  const closeBtnSelector = await $(wd.$(wdKey+".close-modal"));
-  await closeBtnSelector.click();
-
-  await browser.waitUntil(async function() {
-    return await browser.execute((selector) => {
-      return !document.querySelector(selector);
-    }, selector);
-  });
-}
 
 describe("modals", function() {
   describe("open", function() {
-    var styleFilePath = __dirname+"/../../example-style.json";
-    var styleFileData = JSON.parse(fs.readFileSync(styleFilePath));
-
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
 
-      const elem = await $(".maputnik-toolbar-link");
+      await driver.setStyle();
-      await elem.waitForExist();
+      await driver.click(driver.getDataAttribute("nav:open"));
-      await browser.flushReactUpdates();
+      await driver.zeroTimeout();
-
-      const elem2 = await $(wd.$("nav:open"));
-      await elem2.click();
-      await browser.flushReactUpdates();
     });
 
     it("close", async function() {
-      await closeModal("modal:open");
+      await driver.closeModal("modal:open");
     });
 
     // "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
     it.skip("upload", async function() {
-      const elem = await $("*[type='file']");
+      await driver.chooseExampleFile();
-      await elem.waitForExist();
-      await browser.chooseFile("*[type='file']", styleFilePath);
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
-      assert.deepEqual(styleFileData, styleObj);
+      assert.deepEqual(await driver.getExampleFileData(), styleObj);
     });
 
     it("load from url", async function() {
-      var styleFileUrl  = helper.getGeoServerUrl("example-style.json");
+      var styleFileUrl = driver.getGeoServerUrl("example-style.json");
 
-      await browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl);
+      await driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
 
-      const selector = await $(wd.$("modal:open.url.button"));
+      await driver.click(driver.getDataAttribute("modal:open.url.button"))
-      await selector.click();
 
       // Allow the network request to happen
       // NOTE: Its localhost so this should be fast.
-      await browser.pause(300);
+      await driver.sleep(300);
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
-      assert.deepEqual(styleFileData, styleObj);
+      assert.deepEqual(await driver.getExampleFileData(), styleObj);
     });
-
-    // TODO: Need to work out how to mock out the end points
-    it("gallery")
   })
 
   describe("shortcuts", function() {
     it("open/close", async function() {
-      await browser.url(config.baseUrl+"?debug");
+      await driver.setStyle();
 
-      const elem = await $(".maputnik-toolbar-link");
+      await driver.typeKeys(["?"]);
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
 
-      await browser.keys(["?"]);
+      const modalEl = await $(driver.getDataAttribute("modal:shortcuts"))
-
-      const modalEl = await $(wd.$("modal:shortcuts"))
       assert(await modalEl.isDisplayed());
 
-      await closeModal("modal:shortcuts");
+      await driver.closeModal("modal:shortcuts");
     });
 
   });
@@ -95,19 +55,13 @@ describe("modals", function() {
   describe("export", function() {
 
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
+      await driver.setStyle();
-
+      await driver.click(driver.getDataAttribute("nav:export"));
-      const elem = await $(".maputnik-toolbar-link");
+      await driver.zeroTimeout();
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
-
-      const elem2 = await $(wd.$("nav:export"));
-      await elem2.click();
-      await browser.flushReactUpdates();
     });
 
     it("close", async function() {
-      await closeModal("modal:export");
+      await driver.closeModal("modal:export");
     });
 
     // TODO: Work out how to download a file and check the contents
@@ -123,97 +77,79 @@ describe("modals", function() {
 
   describe("inspect", function() {
     it("toggle", async function() {
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+      await driver.setStyle(["geojson:example"]);
-        "geojson:example"
-      ]));
-      await browser.acceptAlert();
 
-      const selectBox = await $(wd.$("nav:inspect", "select"));
+      await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), "inspect");
-      await selectBox.selectByAttribute('value', "inspect");
     })
   })
 
   describe("style settings", function() {
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
+      await driver.setStyle();
-
+      await driver.click(driver.getDataAttribute("nav:settings"));
-      const elem = await $(".maputnik-toolbar-link");
+      await driver.zeroTimeout();
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
-
-      const elem2 = await $(wd.$("nav:settings"));
-      await elem2.click();
-      await browser.flushReactUpdates();
     });
 
     it("name", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.name"), "foobar")
+      await driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
-      const elem = await $(wd.$("modal:settings.owner"));
+      await driver.click(driver.getDataAttribute("modal:settings.owner"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.name, "foobar");
     })
     it("owner", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.owner"), "foobar")
+      await driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.owner, "foobar");
     })
     it("sprite url", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com")
+      await driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.sprite, "http://example.com");
     })
     it("glyphs url", async function() {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
-      await browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl)
+      await driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.glyphs, glyphsUrl);
     })
 
     it("maptiler access token", async function() {
       var apiKey = "testing123";
-      await browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
     })
 
     it("thunderforest access token", async function() {
       var apiKey = "testing123";
-      await browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      await elem.click();
+      await driver.zeroTimeout();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
     })
 
     it("style renderer", async function() {
-      const selector = await $(wd.$("modal:settings.maputnik:renderer"));
+      await driver.selectFromDropdown(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
-      await selector.selectByAttribute('value', "ol");
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
-      const elem = await $(wd.$("modal:settings.name"));
+      await driver.zeroTimeout();
-      await elem.click();
-      await browser.flushReactUpdates();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
     })
   })

test/functional/screenshots/index.js

@@ -1,6 +1,4 @@
-var config    = require("../../config/specs");
+var driver    = require("../driver");
-var helper    = require("../helper");
-var wd        = require("../../wd-helper");
 
 
 // These will get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers
@@ -8,104 +6,57 @@ var wd        = require("../../wd-helper");
 describe('screenshots', function() {
 
   beforeEach(async function() {
-    await browser.setWindowSize(1280, 800)
+    await driver.setWindowSize(1280, 800)
   })
 
   it("front_page", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();  
-    await browser.flushReactUpdates();
 
-    await browser.takeScreenShot("/front_page.png")
+    await driver.takeScreenShot("/front_page.png")
   })
 
   it("open", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
+    await driver.click(driver.getDataAttribute("nav:open"));
-    ]));
+    await driver.zeroTimeout();
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();  
-    await browser.flushReactUpdates();
 
-    const nav_open = await $(wd.$("nav:open"));
+    await driver.takeScreenShot("/open.png")
-    await nav_open.click();
-    await nav_open.waitForExist(); 
-    await browser.flushReactUpdates();
-
-    await browser.takeScreenShot("/open.png")
   })
 
   it("export", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
 
-    const nav_export = await $(wd.$("nav:export"));
+    await driver.click(driver.getDataAttribute("nav:export"));
-    await nav_export.click();
+    await driver.zeroTimeout();
-    await nav_export.waitForExist(); 
-    await browser.flushReactUpdates();
 
-    await browser.takeScreenShot("/export.png")
+    await driver.takeScreenShot("/export.png")
   })
 
   it("sources", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
 
-    const nav_sources = await $(wd.$("nav:sources"));
+    await driver.click(driver.getDataAttribute("nav:sources"));
-    await nav_sources.click();
+    await driver.zeroTimeout();
-    await nav_sources.waitForExist(); 
-    await browser.flushReactUpdates();
 
-    await browser.takeScreenShot("/sources.png")
+    await driver.takeScreenShot("/sources.png")
   })
 
   it("style settings", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
 
-    const nav_settings = await $(wd.$("nav:settings"));
+    await driver.click(driver.getDataAttribute("nav:settings"));
-    await nav_settings.click();
+    await driver.zeroTimeout();
-    await nav_settings.waitForExist(); 
-    await browser.flushReactUpdates();
 
-    await browser.takeScreenShot("/settings.png")
+    await driver.takeScreenShot("/settings.png")
   })
 
   it("inspect", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    await driver.setStyle(["geojson:example"]);
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
 
-    const selectBox = await $(wd.$("nav:inspect", "select"));
+    await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), 'inspect');
-    await selectBox.selectByAttribute('value', 'inspect');
+    await driver.zeroTimeout();
 
-    await browser.flushReactUpdates();
+    await driver.takeScreenShot("/inspect.png")
-
-    await browser.takeScreenShot("/inspect.png")
   })
 })
 

test/functional/util/webdriverio-ext.js

@@ -1,63 +0,0 @@
-var artifacts = require("../../artifacts");
-var path = require("path");
-
-const extendWebdriverIO = async function() {
-  await browser.setTimeout({ 'script': 20 * 1000 });
-  await browser.setTimeout({ 'implicit': 20 * 1000 });
-
-  var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
-
-  /**
-   * Sometimes chrome driver can result in the wrong text.
-   *
-   * See <https://github.com/webdriverio/webdriverio/issues/1886>
-   */
-  try {
-    await browser.addCommand('setValueSafe', async function (selector, text) {
-      for (var i = 0; i < 10; i++) {
-        const elem = await $(selector);
-        await elem.waitForDisplayed(500);
-
-        var elements = await browser.findElements("css selector", selector);
-        if (elements.length > 1) {
-          throw "Too many elements found";
-        }
-
-        const elem2 = await $(selector);
-        await elem2.setValue(text);
-
-        var browserText = await elem2.getValue();
-
-        if (browserText == text) {
-          return;
-        }
-        else {
-          console.error("Warning: setValue failed, trying again");
-        }
-      }
-
-      // Wait for change events to fire and state updated
-      await browser.flushReactUpdates();
-    })
-
-    await browser.addCommand('takeScreenShot', async function (filepath) {
-      var savepath = path.join(SCREENSHOTS_PATH, filepath);
-      await browser.saveScreenshot(savepath);
-    });
-
-    await browser.addCommand('flushReactUpdates', async function () {
-      await browser.executeAsync(function (done) {
-        // For any events to propagate
-        setTimeout(function () {
-          // For the DOM to be updated.
-          setTimeout(done, 0);
-        }, 0)
-      })
-    })
-
-  } catch (err) {
-    console.error(">>> Ignored error: " + err);
-  }
-}
-
-module.exports = extendWebdriverIO;

test/wd-helper.js

@@ -1,6 +0,0 @@
-module.exports = {
-  "$": function(key, selector) {
-    selector = selector || "";
-    return "*[data-wd-key='"+key+"'] "+selector;
-  }
-}