Selenium/Node.js/Write

From MediaWiki.org
Jump to navigation Jump to search

This tutorial will assume that you are running tests from your machine, targeting MediaWiki-Vagrant virtual machine.

MediaWiki Core[edit]

Let's write a new simple test for MediaWiki core. For example, Special:SpecialPages is one of the rare pages that does not have Edit link. Let's write a test to check that.

Code[edit]

Following code is in Gerrit (345378).

A new test file should be created:

tests/selenium/specs/specialpages.js

'use strict';
const assert = require( 'assert' ),
	SpecialPages = require( '../pageobjects/specialpages.page' );

describe( 'Special:SpecialPages', function () {
	it( 'should not have Edit link', function () {
		SpecialPages.open();
		assert( !SpecialPages.edit.isExisting() );
	} );
} );

A new page object file should be created:

tests/selenium/pageobjects/specialpages.page.js

'use strict';
const Page = require( './page' );

class SpecialPages extends Page {

	get edit() { return browser.element( '#ca-edit a[accesskey="e"]' ); }

	open() {
		super.open( 'Special:SpecialPages' );
	}

}
module.exports = new SpecialPages();

Output[edit]

To run all tests, run this from MediaWiki core folder:

$ npm run selenium

To run just the new test file, run this from MediaWiki core folder, in two separate terminal tabs or windows:

$ chromedriver --url-base=/wd/hub --port=4444
$ ./node_modules/.bin/wdio tests/selenium/wdio.conf.js --spec tests/selenium/specs/specialpages.js

Typical patch[edit]

The above example is minimal amount of code for a Selenium test in an extension. The minimal amount of code is just one spec file and just one page object file:

  • tests/selenium/pageobjects/version.page.js, example P8626
  • tests/selenium/specs/version.js, example P8627

Typical patch will have a few more files:

  • package.json, example P8623
  • tests/selenium/.eslintrc.json, example P8624
  • tests/selenium/README.md, example P8206
  • tests/selenium/wdio.conf.js, example P8625

MediaWiki Extension[edit]

Let's write a new simple test for a MediaWiki extension. For example, Math. This example is available as 5 and 17 minute videos. For more examples see Write tests section of Selenium/Node.js page.

Code[edit]

Following code is in Gerrit (346982).

A new test file should be created:

mediawiki/extensions/Math/tests/selenium/specs/basic.js

'use strict';
const assert = require('assert'),
	Api = require('wdio-mediawiki/Api'),
	MathPage = require('../pageobjects/math.page');


describe('Math', function () {

	it('should work for addition', function () {

		// page should have random name
		var pageName = Math.random().toString();

		// create a page with a simple addition
		browser.call(function () {
			return Api.edit(pageName, '<math>3 + 2</math>');
		});

		MathPage.openTitle(pageName);

		// check if the page displays the image
		assert(MathPage.img.isExisting());

	});

});

A new page object file should be created:

mediawiki/extensions/Math/tests/selenium/pageobjects/math.page.js

'use strict';
const Page = require( 'wdio-mediawiki/Page' );

class MathPage extends Page {

	get img() { return browser.element( '.mwe-math-fallback-image-inline' ); }

}
module.exports = new MathPage();

Output[edit]

To run all tests, run this from MediaWiki core folder:

$ npm run selenium

To run just the new test file, run this from MediaWiki core folder, in two separate terminal tabs or windows:

$ chromedriver --url-base=/wd/hub --port=4444
$ ./node_modules/.bin/wdio tests/selenium/wdio.conf.js --spec extensions/Math/tests/selenium/specs/basic.js

Limitations / Known Issues[edit]

As noted in phab:T150435#3479616, there is no Parsoid service available within Wikimedia Continuous Integration stack so it is not possible to write any tests which rely on a working VisualEditor instance.