Selenium/Node.js/Typical

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.

For more examples see Selenium/Node.js/Simple page and Selenium/Node.js#examples.

Simple[edit]

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

tests/selenium/pageobjects/version.page.js, example phab:P8626

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 browser.element( '#mw-version-ext-[TYPE]-[EXTENSION]' ); }

	// 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, example phab:P8627

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

describe( '[EXTENSION]', 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.

package.json, example phab:P8623

{
  "scripts": {
    "selenium-daily": "npm run selenium-test",
    "selenium-test": "wdio tests/selenium/wdio.conf.js"
  },
  "devDependencies": {
    "wdio-mediawiki": "0.5.0",
    "wdio-mocha-framework": "0.6.4",
    "wdio-spec-reporter": "0.1.5",
    "webdriverio": "4.14.4"
  },
}

tests/selenium/.eslintrc.json, example phab:P8624

{
	"root": true,
	"extends": [
		"wikimedia/server"
	],
	"env": {
		"mocha": true
	},
	"globals": {
		"browser": false,
		"mw": false
	},
	"rules": {
		"no-console": "off",
		"prefer-template": "off"
	}
}

tests/selenium/README.md, example phab:P8206

# Selenium tests

For more information see https://www.mediawiki.org/wiki/Selenium/Node.js and [PATH]/mediawiki/vagrant/mediawiki/tests/selenium/README.md.

## Setup

Set up MediaWiki-Vagrant:

    cd [PATH]/mediawiki/vagrant/mediawiki/extensions/[EXTENSION]
    vagrant up
    vagrant roles enable [ROLE]
    vagrant provision
    npm install

Chromedriver has to run in one terminal window:

    chromedriver --url-base=wd/hub --port=4444

## Run all specs

In another terminal window:

    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, example phab:P8625

/**
 * 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
	username: process.env.MEDIAWIKI_USER || 'Admin',
	password: process.env.MEDIAWIKI_PASSWORD || 'vagrant',

	// Base for browser.url() and Page#openTitle()
	baseUrl: ( process.env.MW_SERVER || 'http://127.0.0.1:8080' ) + (
		process.env.MW_SCRIPT_PATH || '/w'
	),

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

	// ============
	// Capabilities
	// ============
	capabilities: [ {
		// https://sites.google.com/a/chromium.org/chromedriver/capabilities
		browserName: 'chrome',
		maxInstances: 1,
		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 capturing 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 ) {
		var filePath;
		if ( !test.passed ) {
			filePath = saveScreenshot( test.title );
			console.log( '\n\tScreenshot: ' + filePath + '\n' );
		}
	}
};