Selenium: Update to WebdriverIO v5

Update NPM packages: webdriverio, wdio-mediawiki.

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 `$`.
- `browser.elements` with `$$`.
- `chromeOptions` with `'goog:chromeOptions'`.
- `password` with `mwPwd`.
- `username` with `mwUser`.
- `waitForVisible()` with `waitForDisplayed()`.
- `isVisible()` with `isDisplayed()`.

Bug: T253343
Change-Id: Ia656c8bc9fa76ae80bc356dc18c821a93b8cd875

package.json

@@ -9,6 +9,11 @@
 		"test": "grunt test"
 	},
 	"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",
 		"eslint-config-wikimedia": "0.16.1",
 		"grunt": "1.1.0",
 		"grunt-banana-checker": "0.9.0",
@@ -16,9 +21,7 @@
 		"grunt-stylelint": "0.15.0",
 		"grunt-svgmin": "5.0.0",
 		"stylelint-config-wikimedia": "0.10.1",
-		"wdio-mediawiki": "0.4.0",
-		"wdio-mocha-framework": "0.6.4",
-		"wdio-spec-reporter": "0.1.5",
-		"webdriverio": "4.14.1"
+		"wdio-mediawiki": "1.0.0",
+		"webdriverio": "5.22.4"
 	}
 }

tests/selenium/pageobjects/cite.page.js

@@ -4,10 +4,10 @@ const Page = require( 'wdio-mediawiki/Page' ),
 	Util = require( 'wdio-mediawiki/Util' );
 
 class CitePage extends Page {
-	getReference( num ) { return browser.elements( '#mw-content-text .reference' ).value[ num - 1 ]; }
-	getCiteMultiBacklink( num ) { return browser.element( '.references li:nth-of-type(' + num + ') .mw-cite-up-arrow-backlink' ); }
-	getCiteSingleBacklink( num ) { return browser.element( '.references li:nth-of-type(' + num + ') .mw-cite-backlink a' ); }
-	getCiteSubBacklink( num ) { return browser.element( '.mw-cite-backlink sup:nth-of-type(' + num + ') a' ); }
+	getReference( num ) { return $$( '#mw-content-text .reference' )[ num - 1 ]; }
+	getCiteMultiBacklink( num ) { return $( '.references li:nth-of-type(' + num + ') .mw-cite-up-arrow-backlink' ); }
+	getCiteSingleBacklink( num ) { return $( '.references li:nth-of-type(' + num + ') .mw-cite-backlink a' ); }
+	getCiteSubBacklink( num ) { return $( '.mw-cite-backlink sup:nth-of-type(' + num + ') a' ); }
 
 	scriptsReady() {
 		Util.waitForModuleState( 'ext.cite.ux-enhancements' );

tests/selenium/specs/backlinks.js

@@ -11,8 +11,9 @@ describe( 'Cite backlinks', function () {
 	before( function () {
 		title = Util.getTestString( 'CiteTest-title-' );
 
-		browser.call( function () {
-			return Api.edit(
+		browser.call( async () => {
+			const bot = await Api.bot();
+			await bot.edit(
 				title,
 				'This is reference #1: <ref name="a">This is citation #1 for reference #1 and #2</ref>\n\n' +
 				'This is reference #2: <ref name="a" />\n\n' +
@@ -38,7 +39,7 @@ describe( 'Cite backlinks', function () {
 
 	it( 'clickable up arrow is hidden by default when there are multiple backlinks', function () {
 		assert(
-			!CitePage.getCiteMultiBacklink( 1 ).isVisible(),
+			!CitePage.getCiteMultiBacklink( 1 ).isDisplayed(),
 			'the up-pointing arrow in the reference line is not linked'
 		);
 	} );
@@ -46,7 +47,7 @@ describe( 'Cite backlinks', function () {
 	it( 'clickable up arrow shows when jumping to multiple used references', function () {
 		CitePage.getReference( 2 ).click();
 		assert(
-			CitePage.getCiteMultiBacklink( 1 ).isVisible(),
+			CitePage.getCiteMultiBacklink( 1 ).isDisplayed(),
 			'the up-pointing arrow in the reference line is linked'
 		);
 
@@ -73,20 +74,20 @@ describe( 'Cite backlinks', function () {
 		CitePage.getCiteMultiBacklink( 1 ).click();
 
 		assert(
-			!CitePage.getCiteMultiBacklink( 1 ).isVisible(),
+			!CitePage.getCiteMultiBacklink( 1 ).isDisplayed(),
 			'the up-pointing arrow in the reference line is not linked'
 		);
 	} );
 
 	it( 'are not accidentally removed from unnamed references', function () {
 		CitePage.getReference( 3 ).click();
-		CitePage.getCiteSingleBacklink( 2 ).waitForVisible();
+		CitePage.getCiteSingleBacklink( 2 ).waitForDisplayed();
 		CitePage.getCiteSingleBacklink( 2 ).click();
 		// It doesn't matter what is focussed next, just needs to be something else
 		CitePage.getReference( 1 ).click();
 
 		assert(
-			CitePage.getCiteSingleBacklink( 2 ).isVisible(),
+			CitePage.getCiteSingleBacklink( 2 ).isDisplayed(),
 			'the backlink on the unnamed reference is still visible'
 		);
 	} );

tests/selenium/wdio.conf.js

@@ -15,8 +15,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' ) + (
@@ -37,7 +37,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