![WAIT-ON’S
API DIFFERENCES
Protractor Cypress
ExpectedConditions
● not
● and
● or
● alertIsPresent
● elementToBeClickable
● textToBePresentInElement
● textToBePresentInElementValue
● titleContains
● titleIs
● urlContains
● urlIs
● presenceOf
● stalenessOf
● visibilityOf
● invisibilityOf
● elementToBeSelected
1. Retry all, except .click()
2. Retry up to 4 sec (defaultCommandTimeout)
3. Wait for route
cy.route('routeName/*').as('routeAlias');
cy.wait(['@routeAlias'], 10000);](https://image.slidesharecdn.com/runit2019-190528075729/85/The-battle-of-Protractor-and-Cypress-RunIT-Conference-2019-29-320.jpg)
The battle of Protractor and Cypress - RunIT Conference 2019
- 1. THE BATTLE OF CYPRESS & PROTRACTOR
- 2. AGENDA Installation Onboarding to the framework Configuration API differences: ● actions ● assertions ● waiton’s Parallelization Debugging Testing types (api/unit/e2e) Project size Performance Multi platform Reporting
- 3. WHO ARE YOU? ● https://valor-software.com/ngx-bootstrap/#/ ● https://github.com/ludmilanesvitiy ● https://www.linkedin.com/in/ludmila-nesvitiy-58094ab7/ ● https://valor-software.com/persons/ludmila-nesvitiy ● https://twitter.com/LudmilaNes 3+YRS AUTOMATED TESTING 10+N YEARS IN IT CURRENT PROJECT OPEN SOURCE
- 4. NGX-BOOTSTRAP Native Angular widgets for Bootstrap 3 & 4. ~600,000 npm downloads per month Designed documentation view Created custom UI elements: https://github.com/ludmilanesvitiy/RunIT-TestProject
- 5. INSTALLATION Protractor Cypress Recommend to install locally in project npm install cypress --save-dev ./node_modules/.bin/cypress open Recommend to install globally to your machine npm install -g protractor webdriver-manager update INSTALLATION
- 6. ONBOARDING TO THE FRAMEWORK Protractor Cypress Main basic goal - easy testing any app ./node_modules/.bin/cypress open Main basic goal - easy testing Angular apps ng new YourProjectName ONBOARDING
- 7. ONBOARDING TO THE PROTRACTOR ng new YourProjectName ONBOARDING
- 9. ONBOARDING TO THE CYPRESS npm install cypress --save-dev ONBOARDING
- 13. CONFIGURATION Protractor Cypress tsconfig.json //TODOtsconfig.e2e.json cypress.json //TODOprotractor.conf.js CONFIGURATION
- 17. COMPARISON TABLE API DIFFERENCES Protractor Cypress Global browser cy Navigate the page get() visit() Trigger click event click() click() Type in input smth sendKeys() type() Clear input clear() clear() Mouse actions, events actions() trigger() Keyboard event sendKeys(protractor.Key.ESCAPE) type('{esc}', { force: true }) Reload current page refresh() reload()
- 18. COMPARISON TABLE API DIFFERENCES Protractor Cypress Find element element(by.css(‘’)) / $ get(‘’) Find elements array element.all(by.css(‘’)) / $$ get(‘’) Take N web-element from array first(), last(), get(N) first(), last(), eq(N) Assign element to const / create alias const a = $(‘’); get(‘’).as(‘const_a’); Find element with text element(by.cssContainingText(‘’)) get(‘’).contains(); Take each element from array each() each() Wait for an arbitrary period sleep(N) wait(N) Get current URL browser.getCurrentUrl() cy.hash()
- 19. ASSERTIONS COMPARISON API DIFFERENCES Protractor Cypress Element shown on the page expect(e.isDisplayed()).toBe(true); e.should(‘be.visible’); Element selected expect(isSelected()).toBe(true); e.should(‘be.selected’); Element text appropriate expect(e.getText()).toEqual(‘’); e.invoke(‘text’).should(...) Element attribute appropriate expect(e.getAttribute(‘a’)).toEqual(‘’); e.should(‘have.attr’, ‘value’) Element css appropriate expect(e.getCssValue(‘’)).toEqual(‘’); e.should(‘have.css’, ‘value’) Elements array length appropriate expect(array.count()).toEqual(N) e.should(‘to.have.length, N)
- 20. ASSERTIONS COMPARISON API DIFFERENCES $(`input`).then(input => { expect(input.getAttribute('value')).toContain(expectedTxt); }); vs cy.get(`input`).then(input => { expect(input.val()).to.contains(expectedTxt); }); cy.get(`input`).should(`have.val`, expectedTxt);
- 21. TEST ARCHITECTURE API DIFFERENCES BaseComponent DatePickerPO SortablePO ... Test1 Test2 TestN...
- 22. FILE STRUCTURE API DIFFERENCES support - base.component.ts - datepicker.po.ts - … - sortable.po.ts integration - Test 1 - Test 2 - … - Test N
- 23. TEST STRUCTURE Protractor Cypress import { DatepickerPo } from '../support/datepicker.po'; describe('Datepicker demo page test suite', () => { const datepicker = new DatepickerPo(); const basic = datepicker.exampleDemosArr.basic; beforeEach(async () => await datepicker.navigateTo()); it('when user clicks on "Datepicker" input, container with 2 arrows: "‹", "›" opened, no one date selected', async () => { await datepicker.clickOnDatepickerInput(basic); await datepicker.isSelectedDateExist('datepicker', false); await datepicker.isDatepickerNavigationFullyActiveAndCorrect('date'); }); }); import { DatepickerPo } from '../support/datepicker.po'; describe('Datepicker demo page test suite', () => { const datepicker = new DatepickerPo(); const basic = datepicker.exampleDemosArr.basic; beforeEach(() => datepicker.navigateTo()); it('when user clicks on "Datepicker" input, container with 2 arrows: "‹", "›" opened, no one date selected', () => { datepicker.clickOnDatepickerInput(basic); datepicker.isSelectedDateExist('datepicker', false); datepicker.isDatepickerNavigationFullyActiveAndCorrect('date'); }); }); API DIFFERENCES
- 24. BASE PAGE OBJECT API DIFFERENCES Protractor Cypress export abstract class BaseComponent { abstract pageUrl: string; async navigateTo() { await browser.get(`${ this.pageUrl }`); } } export abstract class BaseComponent { abstract pageUrl: string; navigateTo() { cy.visit(`${ this.pageUrl }`); } }
- 25. BASE PAGE OBJECT API DIFFERENCES Protractor Cypress async clickOnDemoMenu(subMenu: string) { await element(by.cssContainingText( 'add-nav a', subMenu)) .click(); } clickOnDemoMenu(subMenu: string) { cy.get('add-nav') .contains('a', subMenu) .click(); }
- 26. BASE PAGE OBJECT API DIFFERENCES Protractor Cypress async clearInputAndSendKeys( baseSelector: string, dataToSend: string, inputIndex = 0) { const input = $$(`${baseSelector} input`) .get(inputIndex); await input.clear(); await input.sendKeys(dataToSend); } clearInputAndSendKeys( baseSelector: string, dataToSend: string, inputIndex = 0) { cy.get(`${baseSelector} input`) .eq(inputIndex) .clear() .type(dataToSend); }
- 27. BASE PAGE OBJECT API DIFFERENCES Protractor Cypress async clickEnterOnInput( baseSelector: string, inputIndex = 0) { await browser .actions({bridge: true}) .sendKeys(protractor.Key.ENTER) .perform(); } clickEnterOnInput( baseSelector: string, inputIndex = 0) { cy.get(`${baseSelector} input`) .eq(inputIndex) .type('{enter}'); }
- 28. WAIT-ON’S API DIFFERENCES Protractor Cypress ExpectedConditions ● not ● and ● or ● alertIsPresent ● elementToBeClickable ● textToBePresentInElement ● textToBePresentInElementValue ● titleContains ● titleIs ● urlContains ● urlIs ● presenceOf ● stalenessOf ● visibilityOf ● invisibilityOf ● elementToBeSelected It’s all retry- ability
- 29. WAIT-ON’S API DIFFERENCES Protractor Cypress ExpectedConditions ● not ● and ● or ● alertIsPresent ● elementToBeClickable ● textToBePresentInElement ● textToBePresentInElementValue ● titleContains ● titleIs ● urlContains ● urlIs ● presenceOf ● stalenessOf ● visibilityOf ● invisibilityOf ● elementToBeSelected 1. Retry all, except .click() 2. Retry up to 4 sec (defaultCommandTimeout) 3. Wait for route cy.route('routeName/*').as('routeAlias'); cy.wait(['@routeAlias'], 10000);
- 30. PARALLELIZATION Protractor Cypress cypress run --record --key=NNN --parallel shardTestFiles: true, maxInstances: N PARALLELIZATION
- 31. TESTING TYPES Protractor Cypress e2ee2e API tests: https://github.com/cypress-io/cypress-example-api-testing https://docs.cypress.io/api/commands/request.html API tests: https://www.npmjs.com/package/request unit: https://github.com/bahmutov/cypress-angular-unit-test TESTING TYPES
- 33. PERFORMANCE 58 tests, absolutely identical logic (depend on available API) Protractor, Chrome visible Cypress open ~~2 m 45 sec~~ 52 sec Protractor, Chrome headless Cypress run ~~1 m 8 sec~~ 43 sec PERFORMANCE
- 34. CPU LOADING - PROTRACTOR, CHROME PERFORMANCE
- 35. CPU LOADING - CYPRESS OPEN PERFORMANCE
- 36. MULTI PLATFORM Protractor Cypress Canary, Chrome, Chromium, ElectronChrome, Firefox, Safari, and IE Full info: https://docs.cypress.io/guides/core-concepts/launching- browsers.html# Full list: http://www.protractortest.org/#/browser-support MULTI PLATFORM
- 37. REPORTING Protractor Cypress mocha reporters: https://mochajs.org/#reporters teamcity junit { "reporter": "junit", "reporterOptions": { } } jasmine-spec-reporter protractor-jasmine2-screenshot-reporter protractor-html-reporter-2 protractor-beautiful-reporter protractor-zephyr-reporter jasmine-protractor-reporter protractor-jasmine2-html-reporter onPrepare: function () { jasmine.getEnv().addReporter(...) } REPORTING Dashboard
- 41. DEBUGGING Protractor Cypress cypress open .debug() cy.pause() https://docs.cypress.io/guides/guides/debugging.html add to appropriate place: debugger; add appropriate breakpoints node --inspect-brk ./node_modules/.bin/protractor protractor/protractor.conf.js go to browser and enter: chrome://inspect/#devices click on Open dedicated DevTools for Node click on “Play” and investigate results https://www.protractortest.org/#/debugging DEBUGGING
- 43. DEBUGGING
- 44. STATISTICS
- 45. SUMMARY Installation Onboarding to the framework Configuration API differences Parallelization Debugging Testing types (api/unit/e2e) Project size Performance Multi platform Reporting
- 46. USEFUL LINKS ● https://github.com/ludmilanesvitiy/RunIT-TestProject ● https://github.com/cypress-io/cypress-example-api-testing ● https://docs.cypress.io/api/commands/request.html ● https://github.com/bahmutov/cypress-angular-unit-test ● https://mochajs.org/#reporters ● https://docs.cypress.io/guides/guides/debugging.html ● https://docs.cypress.io/guides/core-concepts/launching-browsers.html# ● https://www.npmjs.com/package/request ● http://www.protractortest.org/#/browser-support ● https://www.protractortest.org/#/debugging ● https://valor-software.com/persons/ludmila-nesvitiy