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