Code from this page is available at mediawiki/extensions/examples and gerrit:674939.

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.

Simple

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

tests/selenium/pageobjects/version.page.js

import Page from 'wdio-mediawiki/Page.js';

// 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
	async open() {
		return super.openTitle( 'Special:Version' );
	}
}

export default new VersionPage();

tests/selenium/specs/version.js

import VersionPage from '../pageobjects/version.page.js';

describe( 'Examples', () => {

	// this is just a sample test
	it( 'is configured correctly', async () => {
		await VersionPage.open();

		// this is just a sample assertion, checking if an element exists
		await expect( await VersionPage.extension ).toExist();

	} );

} );

Typical

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": "9.15.0",
		"@wdio/junit-reporter": "9.15.0",
		"@wdio/local-runner": "9.15.0",
		"@wdio/mocha-framework": "9.15.0",
		"@wdio/spec-reporter": "9.15.0",
		"wdio-mediawiki": "5.0.0"
  }
}

tests/selenium/.eslintrc.json

{
	"root": true,
	"extends": [
		"wikimedia/selenium"
	],
	"parserOptions": {
		"ecmaVersion": 2021,
		"sourceType": "module"
	}
}

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

import { config as wdioDefaults } from 'wdio-mediawiki/wdio-defaults.conf.js';

export const config = { ...wdioDefaults
	// Override, or add to, the setting from wdio-mediawiki.
	// Learn more at https://webdriver.io/docs/configurationfile/
	//
	// Example:
	// logLevel: 'info',
};