![Page 1: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/1.jpg)
DESIGN DECISIONS FORDESIGN DECISIONS FORPERFECT JAVASCRIPT TESTING FRAMEWORKPERFECT JAVASCRIPT TESTING FRAMEWORK
Michael Bodnarchuk 2019
![Page 2: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/2.jpg)
ABOUT MEABOUT MEMichael Bodnarchuk @davertWeb developer from Kyiv, UkraineLead developer of CodeceptJSOpen-source contributorTech Consultant, CTO at SDCLabs
![Page 3: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/3.jpg)
MY VISIONMY VISIONTests should be simple to write and understandTests have their priority. Don't write tests for everythingTests should follow business valuesTesting should be joyful
![Page 4: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/4.jpg)
SO YOU WANT SOME BROWSER TEST AUTOMATION?SO YOU WANT SOME BROWSER TEST AUTOMATION?
![Page 5: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/5.jpg)
JAVASCRIPT IS THE FUTUREJAVASCRIPT IS THE FUTUREFOR TEST AUTOMATIONFOR TEST AUTOMATION
![Page 6: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/6.jpg)
JAVASCRIPT!JAVASCRIPT!Simple language*Rich ecosystemNot limited to SeleniumIn browser execution
![Page 7: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/7.jpg)
*JAVASCRIPT IS SIMPLE EXCEPT*JAVASCRIPT IS SIMPLE EXCEPT
PROMISESPROMISES
![Page 8: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/8.jpg)
LET'S MAKE A SNOWMANLET'S MAKE A SNOWMAN1. Testing Framework2. Assertion library3. Browser Driver4. Runner
![Page 9: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/9.jpg)
TESTING FRAMEWORKTESTING FRAMEWORKHow tests are written
mochajasminecucumberjestava
![Page 10: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/10.jpg)
Testing frameworks are pretty much the same for e2e
![Page 11: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/11.jpg)
ASSERTION LIBRARIESASSERTION LIBRARIESHow to make assertions
chaiframework-relevantnative assert
![Page 12: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/12.jpg)
In NodeJS assertion libraries are decoupled from a testingframework.
![Page 13: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/13.jpg)
BROWSER DRIVERBROWSER DRIVERselenium-webdriverProtractorwebdriverioCypress.ioPuppeteerTestCafeNightwatchJSNightmareJS
![Page 14: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/14.jpg)
RUNNERRUNNERCLI tool to execute tests
mochaprotractorwdiocypresstestcafe
![Page 15: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/15.jpg)
IN DETAILSIN DETAILS
![Page 16: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/16.jpg)
BROWSER CONTROLBROWSER CONTROLInternal | External
![Page 17: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/17.jpg)
![Page 18: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/18.jpg)
SELENIUM-WEBDRIVERSELENIUM-WEBDRIVER
O�cial library of SeleniumThe most used Selenium library in NodeJSDocumentation?Repository?
![Page 19: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/19.jpg)
PROTRACTORPROTRACTOR
Selenium (built on top of o�cial library)Good DocumentationJasmine Testing FrameworkAngular supportJava-like syntaxOoooooutdatedProtractor 6 will break everything
![Page 20: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/20.jpg)
EXAMPLEEXAMPLEbeforeEach(function() {
browser.get('http://www.angularjs.org');
todoList = element.all(by.repeater('todo in todoList.todos'));
});
it('should add a todo', function() {
var addTodo = element(by.model('todoList.todoText'));
var addButton = element(by.css('[value="add"]'));
addTodo.sendKeys('write a protractor test');
addButton.click();
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write a protractor test');
});
![Page 21: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/21.jpg)
NIGHTWATCHNIGHTWATCH
Mastodon of web testing in JSSelenium (JSON-Wire) basedEveryone used it beforeEveryone tries to migrate from it...But they have fancy logo
![Page 22: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/22.jpg)
this.demoTestGoogle = function (browser) {
browser
.useXpath() // every selector now must be xpath
.click("//tr[@data-recordid]/span[text()='Search Text']")
.useCss() // we're back to CSS now
.setValue('input[type=text]', 'nightwatch')
browser.expect
.element('body')
.to.have.attribute('class')
.which.contains('found-item');
};
![Page 23: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/23.jpg)
WEBDRIVERIOWEBDRIVERIO
Alternative Selenium implementationMobile testing (Native Apps) with AppiumAwesome documentationv4 to v5 upgrade...W3C spec + JSONWire specStandalone / Jasmine / Mocha / Cucumber integration
![Page 24: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/24.jpg)
EXAMPLEEXAMPLE// page object
class FormPage extends Page {
get username () { return $('#username') }
get password () { return $('#password') }
}
// test
browser.url('/form');
FormPage.username.setValue('foo')
FormPage.password.setValue('bar')
FormPage.submit()
![Page 25: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/25.jpg)
CYPRESS.IOCYPRESS.IO
Chrome-based, runs inside a browserMocha testing framework + chai assertionsUI DebuggerGood documentationAuto retry failed steps
No XPathNo �le uploadsNo multiple browsers, multiple tabsNo iframes
LIMITATIONS!!!
![Page 26: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/26.jpg)
EXAMPLEEXAMPLEit('adds 2 todos', function () {
cy.visit('/');
cy.get('.new-todo')
.type('learn testing{enter}')
.type('be cool{enter}')
cy.get('.todo-list li').should('have.length', 2)
})
![Page 27: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/27.jpg)
HOW MUCH DOESHOW MUCH DOESYOUR TESTYOUR TEST
AUTOMATIONAUTOMATIONFRAMEWORK COST?FRAMEWORK COST?
![Page 28: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/28.jpg)
![Page 29: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/29.jpg)
Cypress.io is over-estimated as end 2 end testing framework
![Page 30: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/30.jpg)
PUPPETEERPUPPETEER
O�cial Google Chrome DevTools libraryStandalone library (no testing framework)Good API DocumentationProvides full browser controlHeaders, Mock requests, ResponsesMulti tab control, incognito modeIframes, �le upload...
![Page 31: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/31.jpg)
EXAMPLEEXAMPLE
beforeEach(async () => {
const page = await browser.newPage()
await page.setViewport({ width: 1280, height: 800 })
await page.goto('https://www.walmart.com/ip/Super-Mario-Odyssey-Nint
await page.click('button.prod-ProductCTA--primary')
await page.waitForSelector('.Cart-PACModal-ItemInfoContainer')
await page.screenshot({path: screenshot})
await browser.close()
});
![Page 32: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/32.jpg)
TESTCAFETESTCAFE
Cross-browser client-side testingProxy server for mocking all requestsDoesn't control browserCustom test framework, assertions, runnerParallel execution built-inMulti-browser setup
![Page 33: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/33.jpg)
EXAMPLEEXAMPLEtest('Dealing with text using keyboard', async t => {
await t
.typeText(page.nameInput, 'Peter Parker') // Type name
.click(page.nameInput, { caretPos: 5 }) // Move caret position
.pressKey('backspace') // Erase a character
.expect(page.nameInput.value).eql('Pete Parker') // Check result
.pressKey('home right . delete delete delete') // Pick even shorter
.expect(page.nameInput.value).eql('P. Parker'); // Check result
});
![Page 34: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/34.jpg)
HOW TO CHOOSE DRIVERHOW TO CHOOSE DRIVERLearn how the tool worksConsider its limitationsCheck documentationUpgrade strategyLook into source code
![Page 35: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/35.jpg)
ASYNCHRONITYASYNCHRONITYIn JavaScript all browser commands are promises
Driver Strategy
selenium-webdriver async/await
Protractor 5 control �ow
Protractor 6 async/await
webdriverio sync �bers, async/await
cypress control �ow
Puppeteer async/await
TestCafe async/await
![Page 36: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/36.jpg)
HOW TO CHOOSE TESTING FRAMEWORKHOW TO CHOOSE TESTING FRAMEWORKUse the one provided by driverExcept...
![Page 37: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/37.jpg)
...CUCUMBER...CUCUMBERHas its own runner & testing frameworkTo hide JS complexityTo work as BDD toolSupported by standalone libraries
ProtractorWebdriverIOPuppeteer
![Page 38: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/38.jpg)
EXAMPLEEXAMPLEFeature: Visit the app dashboard
As a citizen
I should be able to log in to the app with DigiD
In order to access my personal information
Scenario: Log in with DigiD
Given I am logged in with DigiD as 123456789
And there are the following toggles: personal
When I visit the dashboard
Then I should be greeted with H.A. Janssen
![Page 39: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/39.jpg)
CONCLUSIONSCONCLUSIONSGet your requirementsLearn ecosystemChoose the testing stack
![Page 40: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/40.jpg)
LET'S BUILD PERFECT TESTING FRAMEWORK!LET'S BUILD PERFECT TESTING FRAMEWORK!
![Page 41: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/41.jpg)
WE DID IT!WE DID IT!
...but not that snowman!
![Page 42: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/42.jpg)
WHATEVER YOU CHOOSE, YOU LOSE!WHATEVER YOU CHOOSE, YOU LOSE!New testing frameworks emergeCool fancy library will be legacy tomorowYou hit issues with edge casesDi�erent APIYou can't migrate your code
![Page 43: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/43.jpg)
SURVIVE THE CHANGESURVIVE THE CHANGEWrite high level test codeSeparate scenario from browser controlUse Cucumber or CodeceptJS
![Page 44: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/44.jpg)
CODECEPTJSCODECEPTJSMulti-driver testing framework
webdriverioPuppeteerProtractor
Custom runner, mocha-based test frameworkHigh level API (with Cucumber support)Interactive debug modeAuto retry failed steps
![Page 45: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/45.jpg)
ARCHITECTUREARCHITECTURE
WebDriverIO Protractor Nightmare Puppeteer
ElectronWebDriver API
CODECEPTJS
Selenium Server
Firefox Browser Chrome BrowserEdge Browser
DevTools Protocol
Cloud Browsers
HELPERS
![Page 46: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/46.jpg)
EXAMPLEEXAMPLEScenario('todomvc', (I, loginPage) => {
const user = await I.createUser('davert');
loginPage.login(davert);
I.see('davert', 'nav');
I.click('Create Todo');
I.see('1 item left', '.todo-count');
I.fillField('What needs to be done?', 'Write a test');
I.pressKey('Enter');
I.see('Write a test', '.todo-list');
I.see('2 items left', '.todo-count');
I.fillField('What needs to be done?', 'Write a code');
I.pressKey('Enter');
I.see('Write a code', '.todo-list');
I.see('3 items left', '.todo-count');
});
![Page 47: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/47.jpg)
LIVE DEVELOPMENTLIVE DEVELOPMENTI.amOnPage('/');
pause();
Call pause() to interrupt the testUse interactive shell to try di�erent commandsCopy successful commands into a test
![Page 48: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/48.jpg)
CONCLUSIONSCONCLUSIONSFor advanced e2e testing use webdriverioFor full browser control use puppeteerFor high-level automated e2e tests use codeceptjsFor component testing use cypress.ioFor simple multi-browser testing use testcafeFor BDD use CucumberJS
![Page 49: DESIGN DECISIONS FOR - TestCon...DESIGN DECISIONS FOR PERFE CT JAVASC R IPT TESTING F RAM EWORK Michael Bodnarchuk 2019. ABOUT ME ... selenium-webdriver async/await Protractor 5 control](https://reader035.vdocument.in/reader035/viewer/2022062922/5f07bb867e708231d41e76b8/html5/thumbnails/49.jpg)
THANK YOU!THANK YOU!Michael Bodnarchuk @davert
Web developer from Kyiv, UkraineAuthor of CodeceptJS testing frameworksConsultant @ SDCLabs