CYPRESS
Testing tool built for the
modern web
TABLE OF CONTENTS
06
07
08
01
02
03
History of Cypress
Statistics of automated test
Introduction of Cypress
Installation
Dashboard
Test runner
04
09
Architecture
Features
05
Before and after Cypress
10 API Testing
11
12
Hooks
Plugins
HISTORY
2014 - CREATED
LACK OF ADAPTABILITY
2017 - PUBLIC BETA
STATISTICS OF AUTOMATED TEST
FUNCTIONAL AND REGRESSION TESTING
CONTINUOUS INTEGRATION TESTING
UNIT TESTING
73%
45%
44%
moving from manual testing
to automation testing
LOAD AND STRESS TESTING
31%
Introduction to
Cypress
There are multiple open-source tools and
frameworks available in the market which already
met users needs. Some of them are :
● Selenium
● JUnit
● TestNG
● Appium
● JMeter
● Postman …
ARCHITECTURE OF CYPRESS
It is built on
Node.js and
comes
packaged as an
npm module.
It can be utilized
for testing both
the front and
backend of the
application.
It uses
JavaScript for
writing tests.
Cypress runs
within the browser,
the browser itself
is executing your
test code.
BEFORE AND AFTER CYPRESS
All in one testing framework,
assertion library,with mocking
and stubbing, without Selenium.
It has the capability to run tests
across multiple browsers.
END - TO - END
TESTS
Choose a framework
Install
Choose a Selenium wrapper
Choose an assertion library
Add additional libraries
Mocha Qunit
Karma
Jasmine
Expect.js Chai
Selenium
Protractor Webdriver
Nightwatch
Simon
TestDouble
Installation
npm init
npm install cypress --save-dev
npx cypress open
creates the package.json file
installs Cypress locally
launching Cypress
Cypress dashboard
Cypress dashboard Service is an optional web-based companion to our test
runner. It basically provides timely, simple and powerful insights on all our
test runs at a glance, and it is giving us access to all our recorded tests.
It is an overview portal which contains almost all the pieces of information
about our test and its execution.
Dashboard is a showcase of test summary.
For failed tests, we also have a screenshot of the instance where the test has
failed via cy.screenshot() command.
Intuitive
Structure overview
Organised
TEST
RUNNER
TEST STATUS
URL PREVIEW
COMMANDS LOGS
FEATURES
Fixtures are used to store and
manage test data. Fixture files are
located in cypress/fixtures by default.
The test data is usually written inside
a JSON file.Fixtures support other file
types as well, but the most commonly
used is JSON.
FIXTURES SESSION
DEBUG
Cypress has a very good debugging
feature, where we can time travel and
see what has actually happened. As we
move through the steps, the elements
get highlighted. With cypress command
for pauses the execution, during which
we can debug the previous steps. After
that, we can resume execution.
By default, Cypress will clear the
current session data before each test.
to preserve data we will use
cy.session().
Cypress session is a collection of
async session-related helper methods
intended to be used alongside the
cy. session() command.
API Testing
cy.request() is the command that is the center of this
After a request receives a response from
the server, you can access the information
using .then() command. This will return all
kinds of attributes like response body,
status code, duration etc.
By default, Cypress generates inside this request
command ‘method: GET’. If we are in need to send
different methods, or to pass one or more attributes,
we can write ‘method: POST’ and single object.
HOOKS
These are helpful to set conditions
that you want to run before a set of
tests or before each test. They're
also helpful to clean up conditions
after a set of tests or after each test.
describe('Tutorialspoint',()=> {
before(()=> {
// executes once prior all tests in it block
cy.log("Before hook")
})
after(()=> {
// executes once post all tests in it block
cy.log("After hook")
})
beforeEach(()=> {
// executes prior each test within it block
cy.log("BeforeEach hook")
})
afterEach(()=> {
// executes post each test within it block
cy.log("AfterEach hook")
})
it('First Test', ()=> {
cy.log("First Test")
})
it('Second Test', ()=> {
cy.log("Second Test")
})
})
PLUGINS
Configuration
Preprocessing
Hooking into lifecycle events
Defining tasks
Presented by: Jovana i Ana
"Every line of code is guilty
until tested."

Cypress E2E Testing

  • 1.
    CYPRESS Testing tool builtfor the modern web
  • 2.
    TABLE OF CONTENTS 06 07 08 01 02 03 Historyof Cypress Statistics of automated test Introduction of Cypress Installation Dashboard Test runner 04 09 Architecture Features 05 Before and after Cypress 10 API Testing 11 12 Hooks Plugins
  • 3.
    HISTORY 2014 - CREATED LACKOF ADAPTABILITY 2017 - PUBLIC BETA
  • 4.
    STATISTICS OF AUTOMATEDTEST FUNCTIONAL AND REGRESSION TESTING CONTINUOUS INTEGRATION TESTING UNIT TESTING 73% 45% 44% moving from manual testing to automation testing LOAD AND STRESS TESTING 31%
  • 5.
    Introduction to Cypress There aremultiple open-source tools and frameworks available in the market which already met users needs. Some of them are : ● Selenium ● JUnit ● TestNG ● Appium ● JMeter ● Postman …
  • 6.
    ARCHITECTURE OF CYPRESS Itis built on Node.js and comes packaged as an npm module. It can be utilized for testing both the front and backend of the application. It uses JavaScript for writing tests. Cypress runs within the browser, the browser itself is executing your test code.
  • 7.
    BEFORE AND AFTERCYPRESS All in one testing framework, assertion library,with mocking and stubbing, without Selenium. It has the capability to run tests across multiple browsers. END - TO - END TESTS Choose a framework Install Choose a Selenium wrapper Choose an assertion library Add additional libraries Mocha Qunit Karma Jasmine Expect.js Chai Selenium Protractor Webdriver Nightwatch Simon TestDouble
  • 8.
    Installation npm init npm installcypress --save-dev npx cypress open creates the package.json file installs Cypress locally launching Cypress
  • 9.
    Cypress dashboard Cypress dashboardService is an optional web-based companion to our test runner. It basically provides timely, simple and powerful insights on all our test runs at a glance, and it is giving us access to all our recorded tests. It is an overview portal which contains almost all the pieces of information about our test and its execution. Dashboard is a showcase of test summary. For failed tests, we also have a screenshot of the instance where the test has failed via cy.screenshot() command. Intuitive Structure overview Organised
  • 10.
  • 11.
    FEATURES Fixtures are usedto store and manage test data. Fixture files are located in cypress/fixtures by default. The test data is usually written inside a JSON file.Fixtures support other file types as well, but the most commonly used is JSON. FIXTURES SESSION DEBUG Cypress has a very good debugging feature, where we can time travel and see what has actually happened. As we move through the steps, the elements get highlighted. With cypress command for pauses the execution, during which we can debug the previous steps. After that, we can resume execution. By default, Cypress will clear the current session data before each test. to preserve data we will use cy.session(). Cypress session is a collection of async session-related helper methods intended to be used alongside the cy. session() command.
  • 12.
    API Testing cy.request() isthe command that is the center of this After a request receives a response from the server, you can access the information using .then() command. This will return all kinds of attributes like response body, status code, duration etc. By default, Cypress generates inside this request command ‘method: GET’. If we are in need to send different methods, or to pass one or more attributes, we can write ‘method: POST’ and single object.
  • 13.
    HOOKS These are helpfulto set conditions that you want to run before a set of tests or before each test. They're also helpful to clean up conditions after a set of tests or after each test. describe('Tutorialspoint',()=> { before(()=> { // executes once prior all tests in it block cy.log("Before hook") }) after(()=> { // executes once post all tests in it block cy.log("After hook") }) beforeEach(()=> { // executes prior each test within it block cy.log("BeforeEach hook") }) afterEach(()=> { // executes post each test within it block cy.log("AfterEach hook") }) it('First Test', ()=> { cy.log("First Test") }) it('Second Test', ()=> { cy.log("Second Test") }) })
  • 14.
  • 16.
    Presented by: Jovanai Ana "Every line of code is guilty until tested."