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

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

'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
  async open() {
    return 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
const VersionPage = require( '../pageobjects/version.page' );

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
    assert( await VersionPage.extension.isExisting() );

  } );

} );

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": "7.36.0",
    "@wdio/junit-reporter": "7.35.0",
    "@wdio/local-runner": "7.36.0",
    "@wdio/mocha-framework": "7.33.0",
    "@wdio/spec-reporter": "7.33.0",
    "wdio-mediawiki": "2.5.0"
  }
}

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';

const { config } = require( 'wdio-mediawiki/wdio-defaults.conf.js' );

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