Selenium/Explanation/Stack
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:
- sane and understandable API,
- centralized and complete documentation,
- built-in page object support,
- configuration management,
- good support.
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