The document compares the testing frameworks Protractor and Cypress. It discusses their installation, onboarding, configuration, APIs, parallelization capabilities, debugging techniques, supported test types including API, unit and e2e tests. It also covers project size, performance when run on Chrome visible and headless modes, support for multiple platforms and various reporting options. Useful links are also provided for references.

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

10. ./node_modules/.bin/cypress open

13. CONFIGURATION
Protractor Cypress
tsconfig.json //TODOtsconfig.e2e.json
cypress.json //TODOprotractor.conf.js
CONFIGURATION

14. CONFIGURATION
protractor.conf.js
CONFIGURATION

15. CONFIGURATION
cypress.json
{}
CONFIGURATION

16. CONFIGURATION
cypress.json
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

32. PROJECT SIZE
PROJECT SIZE

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

38. REPORTING - Protractor
REPORTING

39. REPORTING - Cypress
REPORTING

40. REPORTING - Cypress
REPORTING

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