Introductie presentatie behorende bij de workshop TestCafe. Voor workshop zie: https://github.com/jvdieten/testcafe-meetup-malmberg

1. Introduction and workshop
Malmberg Meetup
7februari 2019
Joost van Dieten

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

3. 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

4. Seleniumarchitecture
HTTPoverHTTPserver
JSONwire protocol

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

6. TestCafearchitecture
Images

7. 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 => { /* ... */ })

8. 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)
}

9. 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);

10. 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()

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

12. 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()

13. Roles
await t.useRole(regularAccUser);

14. Mocking

15. Remote/Mobilebrowser

16. 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

17. Vragen ?

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