Update WebdriverIO to v5

[pathmapper]

v4 is blocking us from testing with node v12 (#514), it is recommended to move to v5 (webdriverio-boneyard/wdio-mocha-framework#156 (comment)).

Resources:

• https://webdriver.io/blog/2018/12/19/webdriverio-v5-released.html
• https://github.com/webdriverio/webdriverio/blob/19a5e5f833aaee9f2ef49c2e1d6f44fa57c75c9d/CHANGELOG.md#v500-2018-12-20

Note: I've tried to update all test which were passing with v4, except the "upload" test for the open modal. This one is skipped, because the chooseFile command is currently not available for v5.

[orangemug]

@pathmapper any idea if we can remove the setValueSafe hacks with the new version? See https://github.com/maputnik/editor/blob/53c8661cd3748edb87bba25b6b5c8f6af6ec87af/test/functional/util/webdriverio-ext.js#L17

Also a little tip, I had some issues with flakey tests when I was working with webdriver. After I got them working I ran the whole thing 100 times with

for i in {1..100}; do
  echo "Running test $i"
  # INSERT TEST COMMAND HERE...
done

[pathmapper]

any idea if we can remove the setValueSafe hacks with the new version?

@orangemug my understanding is that this hack is used because of an issue with chromedriver (webdriverio/webdriverio#1886 (comment), not sure if you meant wdio or chromedriver with "new version")

Anyway, this PR updates also the selenium docker image, so a new version of the chromedriver is used.

I'll take a look for which tests we are using the hack and do some tests if they are still flakey without.

Thanks for the tip!

[pathmapper]

@orangemug the chromedriver issue is still around (see also webdriverio/webdriverio#3024), but got it only for one test (settings modal / name field).

2 x 100 runs for this test, it failed 1/100 and 2/100. All the other tests were passing for 100 runs.

Some options:

1. Leave the setValueSafe hacks like they are.

2. Use the setValueSafe hack only for the settings modal / name field test.

3. The bug is that somtimes setValue doesn't clear the text field and only append characters (in this case 'Test Stylefoobar'), so the following would work also for this test:

it("name", function() {
    const elem = $(wd.$("modal-settings.name"));
    const value = elem.getValue();
    elem.setValue("foobar");
    const elem2 = $(wd.$("modal-settings.owner"));
    elem2.click();
    browser.flushReactUpdates();

    var styleObj = helper.getStyleStore(browser);
    assert.equal(styleObj.name, "foobar" || (value + "foobar"));
  })

What do you think?

[orangemug]

The bug is that sometimes setValue doesn't clear the text field and only append characters (in this case 'Test Stylefoobar')

I think I'm in favour of having one method that 'just works', I'm happy to leave setValueSafe in there. It seems to work ok, and if anybody comes along wanting to add tests it's likely they use setValueSafe and things will 'just work', no matter their usecase.

Saying that your new method seems simpler than the existing setValueSafe, so feel free to swap it out.

[pathmapper]

I think I'm in favour of having one method that 'just works'

Thanks, makes sense. I'm fine with leaving setValueSafe in here.

For reference, the chromedriver bug is tracked here:
https://bugs.chromium.org/p/chromedriver/issues/detail?id=2842
Maybe there will be a proper solution some day.

[orangemug]

🎉