Selenium/Explanation/Stack

From mediawiki.org

This page explains stack from Selenium/Getting Started/Create a simple test page.

This tutorial will assume that you are running tests from your machine, targeting MediaWiki-Docker. Code from this page is available at gerrit:675850. For more examples see Selenium/Reference/Example Code.

Examples will:

  • open browser
  • go to main page
  • check that Log in link is present
  • close browser

WebdriverIO[edit]

Reasons for selecting WebdriverIO:

Stack[edit]

For more information about the stack see Selenium/Reference/Stack.

Language JavaScript/Node.js
Browser Chrome
Selenium/WebDriver WebdriverIO (web, API, package)
Testing framework N/A
Assertion library N/A
Page object N/A

Advantages[edit]

  • Minimal stack.

Disadvantages[edit]

  • No assertions.
  • No testing framework (setup, teardown, reporting...).
  • No page object pattern.

Code[edit]

webdriverio.js

'use strict';

const { remote } = require( 'webdriverio' );
const sync = require( '@wdio/sync' ).default;

remote( {
	runner: 'local',
	outputDir: __dirname,
	capabilities: {
		browserName: 'chrome'
	}
} ).then( ( browser ) => sync( () => {
	browser.url( 'http://localhost:8080/wiki/Main_Page' );
	console.log( `Log in link visible: ${browser.$( 'li#pt-login a' ).isDisplayed()}` );
	browser.deleteSession();
} ) );

Output[edit]

Output if everything is fine.

node webdriverio.js
Log in link visible: true

Output if there is a problem.

node webdriverio.js
Log in link visible: false

Mocha[edit]

Stack[edit]

Language JavaScript/Node.js
Browser Chrome
Selenium/WebDriver WebdriverIO (web, API, package)
Testing framework Mocha
Assertion library N/A
Page object N/A

Advantages[edit]

  • Testing framework (setup, teardown, reporting...).

Disadvantages[edit]

  • No assertions.
  • No page object pattern.

Code[edit]

wdio.conf.js

'use strict';

exports.config = {
	baseUrl: 'http://localhost:8080/wiki/',
	capabilities: [ { browserName: 'chrome' } ],
	logLevel: 'warn',
	specs: [ './mocha.js' ]
};

mocha.js

'use strict';

describe( 'Main page', function () {
	it( 'should have "Log in" link', function () {
		browser.url( 'Main_Page' );
		console.log( `Log in link visible: ${browser.$( 'li#pt-login a' ).isDisplayed()}` );
	} );
} );

Output[edit]

Output if everything is fine.

npx wdio ./wdio.conf.js 

...
[0-0] Log in link visible: true
...

Output if there is a problem.

npx wdio ./wdio.conf.js 

...
[0-0] Log in link visible: false
...

Assert[edit]

Stack[edit]

Language JavaScript/Node.js
Browser Chrome
Selenium/WebDriver WebdriverIO (web, API, package)
Testing framework Mocha
Assertion library Assert (ships with Node.js)
Page object N/A

Advantages[edit]

  • Testing framework (setup, teardown, reporting...).
  • Assertions.

Disadvantages[edit]

  • No page object pattern.

Code[edit]

wdio.conf.js

'use strict';

exports.config = {
	baseUrl: 'http://localhost:8080/wiki/',
	capabilities: [ { browserName: 'chrome' } ],
	logLevel: 'warn',
	specs: [ './assert.js' ]
};

mocha.js

'use strict';

describe( 'Main page', function () {
	it( 'should have "Log in" link', function () {
		browser.url( 'Main_Page' );
		assert( browser.$( 'li#pt-login a' ).isDisplayed() );
	} );
} );

Output[edit]

Output if everything is fine.

npx wdio ./wdio.conf.js 

Execution of 1 spec files started at 2021-03-31T14:54:38.869Z

[0-0] RUNNING in chrome - /assert.js
[0-0] PASSED in chrome - /assert.js

Spec Files:      1 passed, 1 total (100% completed) in 00:00:03

Output if there is a problem.

npx wdio ./wdio.conf.js   

Execution of 1 spec files started at 2021-03-31T14:54:19.285Z

[0-0] RUNNING in chrome - /assert.js
[0-0] AssertionError [ERR_ASSERTION] in "Main page should have "Log in" link"
The expression evaluated to a falsy value:

  assert( browser.$( 'li#pt-login a' ).isDisplayed() )

[0-0] FAILED in chrome - /assert.js

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:03

Page object[edit]

Stack[edit]

Language JavaScript/Node.js
Browser Chrome
Selenium/WebDriver WebdriverIO (web, API, package)
Testing framework Mocha
Assertion library Assert (ships with Node.js)
Page object WebdriverIO Page Object Pattern

Advantages[edit]

  • Testing framework (setup, teardown, reporting...).
  • Assertions.
  • Page object pattern.

Disadvantages[edit]

  • Several new tools to learn.

Code[edit]

wdio.conf.js

'use strict';

exports.config = {
	baseUrl: 'http://localhost:8080/wiki/',
	capabilities: [ { browserName: 'chrome' } ],
	logLevel: 'warn',
	specs: [ './specs/main_page.js' ]
};

pageobjects/page.js

'use strict';

class Page {
	open( path ) {
		browser.url( path );
	}
}
module.exports = Page;

pageobjects/main.page.js

'use strict';

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

class MainPage extends Page {
	get login() { return browser.$( 'li#pt-login a' ); }
	open() {
		super.open( 'Main_Page' );
	}
}
module.exports = new MainPage();

specs/main_page.js

'use strict';

const assert = require( 'assert' ),
	MainPage = require( '../pageobjects/main.page' );

describe( 'Main Page', function () {
	it( 'should have "Log in" link', function () {
		MainPage.open();
		assert( MainPage.login.isDisplayed() );
	} );
} );

Output[edit]

Output if everything is fine.

npx wdio ./wdio.conf.js 

Execution of 1 spec files started at 2021-03-31T16:48:15.407Z

[0-0] RUNNING in chrome - /specs/main_page.js
[0-0] PASSED in chrome - /specs/main_page.js

Spec Files:      1 passed, 1 total (100% completed) in 00:00:02

Output if there is a problem.

npx wdio ./wdio.conf.js 

Execution of 1 spec files started at 2021-03-31T16:48:01.428Z

[0-0] RUNNING in chrome - /specs/main_page.js
[0-0] AssertionError [ERR_ASSERTION] in "Main Page should have "Log in" link"
The expression evaluated to a falsy value:

  assert( MainPage.login.isDisplayed() )

[0-0] FAILED in chrome - /specs/main_page.js

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:03