Selenium/How-to/Create the first test in a repository

From mediawiki.org
Jump to navigation Jump to search

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

For more examples see Selenium/Getting Started/Create a simple test page and Selenium/Reference/Example Code.

Let's write a new simple test for Extension:Examples. For example, let's check if the extension is listed at Special:Version page.

Following code is available at gerrit:674939.

Simple[edit]

The minimal amount of code is just one spec file and just one page object file.

tests/selenium/pageobjects/version.page.js

'use strict';

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

// this is just a sample on how to create a page
class VersionPage extends Page {
	// this is just a sample on how to find an element
	get extension() { return $( '#mw-version-ext-other-examples' ); }

	// this is just a sample on how to open a page
	open() {
		super.openTitle( 'Special:Version' );
	}
}

module.exports = new VersionPage();

tests/selenium/specs/version.js

'use strict';

const assert = require( 'assert' ),
	// this is just a sample on how to use a page
	VersionPage = require( '../pageobjects/version.page' );

describe( 'Examples', function () {

	// this is just a sample test
	it( 'is configured correctly', function () {
		VersionPage.open();

		// this is just a sample assertion, checking if an element exists
		assert( VersionPage.extension.isExisting() );

	} );

} );

Typical[edit]

Typical patch will have a few more files. You will need these files if this is the first Selenium test in the repository.

.gitignore

tests/selenium/log

package.json

{
	"scripts": {
		"selenium-daily": "npm run selenium-test",
		"selenium-test": "wdio tests/selenium/wdio.conf.js"
	},
	"devDependencies": {
		"@wdio/cli": "7.2.3",
		"@wdio/local-runner": "7.2.3",
		"@wdio/mocha-framework": "7.2.1",
		"@wdio/spec-reporter": "7.2.1",
		"@wdio/sync": "7.2.3",
		"wdio-mediawiki": "1.0.0",
		"webdriverio": "7.2.3"
	}
}

tests/selenium/.eslintrc.json

{
	"root": true,
	"extends": [
		"wikimedia/selenium"
	]
}

tests/selenium/README.md

# Selenium tests

For more information see https://www.mediawiki.org/wiki/Selenium

## Setup

See https://www.mediawiki.org/wiki/MediaWiki-Docker/Extension/Examples

## Run all specs

    npm run selenium-test

## Run specific tests

Filter by file name:

    npm run selenium-test -- --spec tests/selenium/specs/[FILE-NAME]

Filter by file name and test name:

    npm run selenium-test -- --spec tests/selenium/specs/[FILE-NAME] --mochaOpts.grep [TEST-NAME]

tests/selenium/wdio.conf.js

'use strict';

/**
 * See also: http://webdriver.io/guide/testrunner/configurationfile.html
 */
const fs = require( 'fs' ),
	saveScreenshot = require( 'wdio-mediawiki' ).saveScreenshot;

exports.config = {
	// ======
	// Custom WDIO config specific to MediaWiki
	// ======
	// Use in a test as `browser.options.<key>`.
	// Defaults are for convenience with MediaWiki-Vagrant

	// Wiki admin
	mwUser: process.env.MEDIAWIKI_USER,
	mwPwd: process.env.MEDIAWIKI_PASSWORD,

	// Base for browser.url() and Page#openTitle()
	baseUrl: ( process.env.MW_SERVER ) + (
		process.env.MW_SCRIPT_PATH
	),

	// ==================
	// Test Files
	// ==================
	specs: [
		__dirname + '/specs/*.js'
	],

	// ============
	// Capabilities
	// ============
	capabilities: [ {
		// https://sites.google.com/a/chromium.org/chromedriver/capabilities
		browserName: 'chrome',
		maxInstances: 1,
		'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
			args: [
				...( process.env.DISPLAY ? [] : [ '--headless' ] ),
				// Chrome sandbox does not work in Docker
				...( fs.existsSync( '/.dockerenv' ) ? [ '--no-sandbox' ] : [] )
			]
		}
	} ],

	// ===================
	// Test Configurations
	// ===================

	// Level of verbosity: silent | verbose | command | data | result | error
	logLevel: 'error',

	// Setting this enables automatic screenshots for when a browser command fails
	// It is also used by afterTest for capturig failed assertions.
	screenshotPath: process.env.LOG_DIR || __dirname + '/log',

	// Default timeout for each waitFor* command.
	waitforTimeout: 10 * 1000,

	// See also: http://webdriver.io/guide/testrunner/reporters.html
	reporters: [ 'spec' ],

	// See also: http://mochajs.org
	mochaOpts: {
		ui: 'bdd',
		timeout: 60 * 1000
	},

	// =====
	// Hooks
	// =====

	/**
	 * Save a screenshot when test fails.
	 *
	 * @param {Object} test Mocha Test object
	 */
	afterTest: function ( test ) {
		if ( !test.passed ) {
			const filePath = saveScreenshot( test.title );
			console.log( '\n\tScreenshot: ' + filePath + '\n' );
		}
	}
};