Update tests for WebdriverIO v5

test/functional/helper.js

@@ -18,7 +18,7 @@ module.exports = {
     var result = browser.executeAsync(function(done) {
       window.debug.get("maputnik", "styleStore").latestStyle(done);
     })
-    return result.value;
+    return result;
   },
   getRevisionStore: function(browser) {
     var result = browser.execute(function(done) {
@@ -34,15 +34,16 @@ module.exports = {
   modal: {
     addLayer: {
       open: function() {
-        var selector = wd.$('layer-list:add-layer');
+        const selector = $(wd.$('layer-list:add-layer'));
-        browser.click(selector);
+        selector.click();
 
         // Wait for events
         browser.flushReactUpdates();
 
-        browser.waitForExist(wd.$('modal:add-layer'));
+        const elem = $(wd.$('modal:add-layer'));
-        browser.isVisible(wd.$('modal:add-layer'));
+        elem.waitForExist();
-        browser.isVisibleWithinViewport(wd.$('modal:add-layer'));
+        elem.isDisplayed();
+        elem.isDisplayedInViewport();
 
         // Wait for events
         browser.flushReactUpdates();
@@ -58,7 +59,8 @@ module.exports = {
           id = type+":"+uuid();
         }
 
-        browser.selectByValue(wd.$("add-layer.layer-type", "select"), type);
+        const selectBox = $(wd.$("add-layer.layer-type", "select"));
+        selectBox.selectByAttribute('value', type);
         browser.flushReactUpdates();
 
         browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
@@ -67,7 +69,8 @@ module.exports = {
         }
 
         browser.flushReactUpdates();
-        browser.click(wd.$("add-layer"));
+        const elem_addLayer = $(wd.$("add-layer"));
+        elem_addLayer.click();
 
         return id;
       }

test/functional/index.js

@@ -11,11 +11,12 @@ describe('maputnik', function() {
       "geojson:example",
       "raster:raster"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
     browser.execute(function() {
       localStorage.setItem("survey", true);
     });
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();
     browser.flushReactUpdates();
   });
 

test/functional/layers/index.js

@@ -11,8 +11,9 @@ describe("layers", function() {
       "geojson:example",
       "raster:raster"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();
     browser.flushReactUpdates();
 
     helper.modal.addLayer.open();
@@ -33,7 +34,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":delete", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":delete", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -54,7 +56,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":copy", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":copy", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -83,7 +86,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -96,7 +100,7 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -147,11 +151,13 @@ describe("layers", function() {
         // Setup
         var id = uuid();
 
-        browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background");
+        const selectBox = $(wd.$("add-layer.layer-type", "select"));
+        selectBox.selectByAttribute('value', "background");
         browser.flushReactUpdates();
         browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
 
-        browser.click(wd.$("add-layer"));
+        const elem = $(wd.$("add-layer"));
+        elem.click();
 
         var styleObj = helper.getStyleStore(browser);
         assert.deepEqual(styleObj.layers, [
@@ -169,11 +175,13 @@ describe("layers", function() {
         it("id", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
+          elem.click();
 
           var id = uuid();
           browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
-          browser.click(wd.$("min-zoom"))
+          const elem2 = $(wd.$("min-zoom"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -190,9 +198,12 @@ describe("layers", function() {
         it("min-zoom", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
-          browser.setValueSafe(wd.$("min-zoom", "input"), 1)
+          elem.click();
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          // zoom level number input currently fails https://github.com/webdriverio/webdriverio/issues/4059, this is whystring input "1" is used
+          browser.setValueSafe(wd.$("min-zoom", "input"), "1")
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -220,9 +231,12 @@ describe("layers", function() {
         it("max-zoom", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
-          browser.setValueSafe(wd.$("max-zoom", "input"), 1)
+          elem.click();
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          // zoom level number input currently fails https://github.com/webdriverio/webdriverio/issues/4059, this is whystring input "1" is used
+          browser.setValueSafe(wd.$("max-zoom", "input"), "1")
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -238,9 +252,11 @@ describe("layers", function() {
           var bgId = createBackground();
           var id = uuid();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId));
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
+          elem.click();
           browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -484,4 +500,3 @@ describe("layers", function() {
     })
   })
 });
-

test/functional/modals/index.js

@@ -7,14 +7,16 @@ var helper = require("../helper");
 
 function closeModal(wdKey) {
   browser.waitUntil(function() {
-    return browser.isVisibleWithinViewport(wd.$(wdKey));
+    const elem = $(wdKey);
+    return elem.isDisplayedInViewport();
   });
 
-  var closeBtnSelector = wd.$(wdKey+".close-modal");
+  const closeBtnSelector = $(wd.$(wdKey+".close-modal"));
-  browser.click(closeBtnSelector);
+  closeBtnSelector.click();
 
   browser.waitUntil(function() {
-    return !browser.isVisibleWithinViewport(wd.$(wdKey));
+    const elem = $(wdKey);
+    return !elem.isDisplayed();
   });
 }
 
@@ -26,10 +28,12 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:open"))
+      const elem2 = $(wd.$("nav:open"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
@@ -38,7 +42,8 @@ describe("modals", function() {
     });
 
     it("upload", function() {
-      browser.waitForExist("*[type='file']")
+      const elem = $("*[type='file']");
+      elem.waitForExist();
       browser.chooseFile("*[type='file']", styleFilePath);
 
       var styleObj = helper.getStyleStore(browser);
@@ -50,8 +55,8 @@ describe("modals", function() {
 
       browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
 
-      var selector = wd.$("open-modal.url.button");
+      const selector = $(wd.$("open-modal.url.button"));
-      browser.click(selector);
+      selector.click();
 
       // Allow the network request to happen
       // NOTE: Its localhost so this should be fast.
@@ -70,10 +75,12 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:export"))
+      const elem2 = $(wd.$("nav:export"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
@@ -99,9 +106,10 @@ describe("modals", function() {
       browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ]));
-      browser.alertAccept();
+      browser.acceptAlert();
 
-      browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
+      const selectBox = $(wd.$("nav:inspect", "select"));
+      selectBox.selectByAttribute('value', "inspect");
     })
   })
 
@@ -109,16 +117,19 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:settings"))
+      const elem2 = $(wd.$("nav:settings"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
     it("name", function() {
       browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
-      browser.click(wd.$("modal-settings.owner"))
+      const elem = $(wd.$("modal-settings.owner"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -126,7 +137,8 @@ describe("modals", function() {
     })
     it("owner", function() {
       browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -134,7 +146,8 @@ describe("modals", function() {
     })
     it("sprite url", function() {
       browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -143,7 +156,8 @@ describe("modals", function() {
     it("glyphs url", function() {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
       browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -153,7 +167,8 @@ describe("modals", function() {
     it("mapbox access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -165,7 +180,8 @@ describe("modals", function() {
     it("maptiler access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -175,7 +191,8 @@ describe("modals", function() {
     it("thunderforest access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -183,9 +200,10 @@ describe("modals", function() {
     })
 
     it("style renderer", function() {
-      var selector = wd.$("modal-settings.maputnik:renderer");
+      const selector = $(wd.$("modal-settings.maputnik:renderer"));
-      browser.selectByValue(selector, "ol");
+      selector.selectByAttribute('value', "ol");
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);

test/functional/screenshots/index.js

@@ -8,18 +8,16 @@ var wd        = require("../../wd-helper");
 describe('screenshots', function() {
 
   beforeEach(function() {
-    browser.windowHandleSize({
+    browser.setWindowSize(1280, 800)
-      width: 1280,
-      height: 800
-    });
   })
 
   it("front_page", function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();  
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/front_page.png")
@@ -29,11 +27,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:open"))
+    const nav_open = $(wd.$("nav:open"));
+    nav_open.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/open.png")
@@ -43,11 +43,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:export"))
+    const nav_export = $(wd.$("nav:export"));
+    nav_export.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/export.png")
@@ -57,11 +59,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:sources"))
+    const nav_sources = $(wd.$("nav:sources"));
+    nav_sources.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/sources.png")
@@ -71,11 +75,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:settings"))
+    const nav_settings = $(wd.$("nav:settings"));
+    nav_settings.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/settings.png")
@@ -85,11 +91,14 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
+    const selectBox = $(wd.$("nav:inspect", "select"));
+    selectBox.selectByAttribute('value', 'inspect');
+
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/inspect.png")

test/functional/util/webdriverio-ext.js

@@ -3,8 +3,8 @@ var fs        = require("fs");
 var path      = require("path");
 
 
-browser.timeoutsAsyncScript(20*1000);
+browser.setTimeout({ 'script': 20*1000 });
-browser.timeoutsImplicitWait(20*1000);
+browser.setTimeout({ 'implicit': 20*1000 });
 
 var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
 
@@ -16,15 +16,18 @@ var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
 try {
   browser.addCommand('setValueSafe', function(selector, text) {
     for(var i=0; i<10; i++) {
-      browser.waitForVisible(selector);
+      const elem = $(selector);
+      elem.waitForDisplayed(500);
 
-      var elements = browser.elements(selector);
+      var elements = browser.findElements("css selector", selector);
       if(elements.length > 1) {
         throw "Too many elements found";
       }
 
-      browser.setValue(selector, text);
+      const elem2 = $(selector);
-      var browserText = browser.getValue(selector);
+      elem2.setValue(text);
+
+      var browserText = elem2.getValue();
 
       if(browserText == text) {
         return;
@@ -39,7 +42,7 @@ try {
   })
 
   browser.addCommand('takeScreenShot', function(filepath) {
-    var data = browser.screenshot();
+    var data = browser.takeScreenshot();
     fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64');
   });