Introduction and workshop
Malmberg Meetup
7februari 2019
Joost van Dieten

Outline
• History
• Selenium architecture
• Testcafearchitecture
• TestCafebasicstructure
• Selectors
• Actions
• Assertions
• WhatSelenium cannotdo
• Consoleerrors
• Roles
• Mocking
• Mobile
• Thingstoconsiderbeforeusing TestCafe
• Workshop

History
• Developed in 2004byJasonHuggins as aJavaScriptlibraryusedtoautomatehis manualtestingroutines
• Selenium Core isbornwhosefunctionalityunderlies theSelenium RC(RemoteControl)andSelenium IDE
tools
• The Limitationofhaving aJavaScriptbasedautomationengine andbrowsersecurityrestrictedSelenium to
specific functionality
• In 2007SimonStewartdeveloped WebDriver.
• In 2009,Selenium andWebDrivermerged technologiesandintellectual intelligence toprovidethebest
possibletestautomationframework

Seleniumarchitecture
HTTPoverHTTPserver
JSONwire protocol

• Commercial toolTestCafelaunchedin 2013
• In 2016,freeandopen-sourcenode.jsapplicationrelasedbasedoncommercial tool
• In 2018commercial productTestCafeStudiowasreleased Basedon theopen-source
TestCafe,andsupportsits majorfeatures
History

TestCafearchitecture
Images

TestCafestructure
fixture `My fixture`
.page `http://example.com`
.beforeEach( async t => {
/* test initialization code */
})
.afterEach( async t => {
/* test finalization code */
});
test
.before( async t => {
/* test initialization code */
})
('MyTest', async t => { /* ... */ })
.after( async t => {
/* test finalization code */
});
test.skip('MyTest2', async t => { /* ... */ })
test.only('MyTest3', async t => { /* ... */ })

TestController
• A testcontrollerobject t exposes the test API's methods. That is whyit is passed to each function that is
expected to contain server-side test code.
• Use the test controller to call test actions, handle browser dialogs, use the wait function or execute
assertions.
test('Wait Example', async t => {
await t.wait(1000)
}

Selectors
import {Selector} from 'testcafe';
Parameter Type Description
init Function | String |Selector | Snapshot | Promise Identifies a DOMnode tobe selected.
options (optional) Object
Selector( init [, options] )
const submitButton = Selector('#submit-button');
const submitButtonWithOptions = Selector('#submit-button’).with({
visibilityCheck: true,
timeout: 20000
});
const formSubmitButton = Selector(submitButton).nth(1);

Actions
await t.dragToElement('.toolbox-item.text-input', '.design-surface');
await t.hover(comboBox);
await t.rightClick('#cell-1-1');
await t.click(checkbox);
await t.typeText(nameInput, ‘Joost van Dieten').click(nameInput,
{caretPos: 5}).keyPress('backspace');
await t.doubleClick('#thumbnail’);
$(selector).click()

Assertions
• To construct assertions use TestController expectmethod
await t.expect('actual').eql('expected', 'message', 'options');
await t.click(btn).expect(btn.textContext).contains('loading');

Consolemessages
Accessing Console Messages
When a JavaScript error occurs on a tested web page, TestCafe stops
test execution and posts an error message and a stack trace to a report
t.getBrowserConsoleMessages()

Roles
await t.useRole(regularAccUser);

Mocking

Remote/Mobilebrowser

Things to consider
• No large support community yet
• Runs in single tab ( no multiple tabs )
• Not as many plugins available compared with selenium
• No suitable for native/hybrid app testing

Vragen ?

Workshop
• https://github.com/jvdieten/testcafe-meetup-malmberg