Selenium: Update to WebdriverIO v5

Update NPM packages: webdriverio, wdio-mediawiki.
Update ESlint configuration.

Replace NPM packages:
- wdio-mocha-framework with @wdio/mocha-framework.
- wdio-spec-reporter with @wdio/spec-reporter.

New NPM packages: @wdio/cli, @wdio/local-runner, @wdio/sync.

Replace:
- `browser.element` with `$`.
- `chromeOptions` with `'goog:chromeOptions'`.
- `password` with `mwPwd`.
- `username` with `mwUser`.

Bug: T253791
Change-Id: Ief27154b2e10621b4dce51c634a075cd381021f8

package.json

@@ -7,6 +7,11 @@
 		"api-testing": "mocha tests/api-testing"
 	},
 	"devDependencies": {
+		"@wdio/cli": "5.22.4",
+		"@wdio/local-runner": "5.22.4",
+		"@wdio/mocha-framework": "5.18.7",
+		"@wdio/spec-reporter": "5.22.4",
+		"@wdio/sync": "5.20.1",
 		"api-testing": "^1.0.4",
 		"mocha": "^7.1.1",
 		"eslint-config-wikimedia": "0.15.3",
@@ -16,9 +21,7 @@
 		"grunt-eslint": "22.0.0",
 		"grunt-stylelint": "0.15.0",
 		"stylelint-config-wikimedia": "0.10.1",
-		"wdio-mediawiki": "0.4.0",
-		"wdio-mocha-framework": "0.6.4",
-		"wdio-spec-reporter": "0.0.5",
-		"webdriverio": "4.12.0"
+		"wdio-mediawiki": "1.0.0",
+		"webdriverio": "5.22.4"
 	}
 }

tests/selenium/.eslintrc.json

@@ -1,12 +1,14 @@
 {
 	"root": true,
 	"extends": [
-		"wikimedia/server"
+		"wikimedia/server",
+		"wikimedia/language/es2017"
 	],
 	"env": {
 		"mocha": true
 	},
 	"globals": {
-		"browser": false
+		"browser": false,
+		"$": false
 	}
 }

tests/selenium/pageobjects/math.page.js

@@ -3,7 +3,7 @@ const Page = require( 'wdio-mediawiki/Page' );
 
 class MathPage extends Page {
 
-	get img() { return browser.element( '.mwe-math-fallback-image-inline' ); }
+	get img() { return $( '.mwe-math-fallback-image-inline' ); }
 
 }
 module.exports = new MathPage();

tests/selenium/specs/basic.js

@@ -4,6 +4,11 @@ const assert = require( 'assert' ),
 	MathPage = require( '../pageobjects/math.page' );
 
 describe( 'Math', function () {
+	let bot;
+
+	before( async () => {
+		bot = await Api.bot();
+	} );
 
 	it( 'should work for addition', function () {
 
@@ -11,8 +16,8 @@ describe( 'Math', function () {
 		var pageName = Math.random().toString();
 
 		// create a page with a simple addition
-		browser.call( function () {
-			return Api.edit( pageName, '<math>3 + 2</math>' );
+		browser.call( async () => {
+			await bot.edit( pageName, '<math>3 + 2</math>' );
 		} );
 
 		MathPage.openTitle( pageName );

tests/selenium/wdio.conf.js

@@ -12,8 +12,8 @@ exports.config = {
 	// Defaults are for convenience with MediaWiki-Vagrant
 
 	// Wiki admin
-	username: process.env.MEDIAWIKI_USER || 'Admin',
-	password: process.env.MEDIAWIKI_PASSWORD || 'vagrant',
+	mwUser: process.env.MEDIAWIKI_USER || 'Admin',
+	mwPwd: process.env.MEDIAWIKI_PASSWORD || 'vagrant',
 
 	// Base for browser.url() and Page#openTitle()
 	baseUrl: ( process.env.MW_SERVER || 'http://127.0.0.1:8080' ) + (
@@ -34,7 +34,7 @@ exports.config = {
 		// https://sites.google.com/a/chromium.org/chromedriver/capabilities
 		browserName: 'chrome',
 		maxInstances: 1,
-		chromeOptions: {
+		'goog:chromeOptions': {
 			// If DISPLAY is set, assume developer asked non-headless or CI with Xvfb.
 			// Otherwise, use --headless (added in Chrome 59)
 			// https://chromium.googlesource.com/chromium/src/+/59.0.3030.0/headless/README.md