Sushma Nayak will present on using the Cypress framework for scalable and reliable cross-browser testing. The presentation agenda includes understanding what cross-browser testing is, the need for it, how to perform it using Cypress, and executing tests across browsers from the Cypress test runner and command line interface. Cypress allows testing across browsers like Chrome, Firefox, and Microsoft Edge, and offers advantages like debuggability, flake resistance, and the ability to perform cross-browser testing in continuous integration environments.

1. Presented By: Sushma Nayak
Scalable and Reliable cross
browser testing using
Cypress Framework

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session timings, you
are requested not to join sessions
after a 5 minutes threshold post
the session start time.
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3. Agenda
01 Understanding what is cross browser
testing ?
02 Need of cross browser testing
03
04 Cross browser testing with Cypress
05 Steps to perform cross browser testing
06 Executing cross browser using test runner
and CLI
Cypress as a powerpack
07 Conclusion

4. c
Understanding
Cross browser
Testing
Cross browser testing is also
known as multi-browser testing.
Hence, running same set of tests
on different browsers. Every
browser has its own rendering
technique to load web
applications. Thus, user
experience varies from browser
to browser.



Cross browser testing can be done in the following ways
Manual Cross browser Testing
Automation Cross browser Testing

5. Web applications are totally different from
windows application. The end user can open
it on any browser like chrome,firefox etc.
Font size may mismatch on different browsers.
JavaScript implementation may be different
CSS, HTML validation differences can be there.
Some browsers does not support HTML5.
Page alignments can be different.
Browser incompatibility with OS.
Need of cross browser
Testing





6. 1 2
3
4
5
Quality of a product is
enhanced by doing
cross browser testing.
Hence provide better
test coverage
Speed makes
automation more
efficient. We can run
multiple tests together
Cross browser testing offers
a high level of scalability as
you only need to add only the
browsers executors to the
testing platform or tool.
When you perform
automation testing, you write
a test script one time and get
to reuse it as many times as
you like.
This is a one time investment. Saves time
and money
Advantages of automating cross browser testing?

7. 1
2
3
Cypress framework is a
JavaScript-based end-to-end
testing framework built on top
of Mocha
Cypress has debuggability. It
takes screenshots while running
the tests. On hovering on the
commands shows exactly what
happened
Cypress as a
powerpack
Cypress is flake resistant. It
automatically waits for the
commands and assertions
before moving on

8. Cross browser testing with Cypress
Cypress supports browsers like Chrome, Firefox, Microsoft Edge and Electron. Also supports beta
versions for all these browsers.
Specify the browser name in the
CLI command directly or adding
the browser shortcuts in the
package.json file
Manually choosing
browser from the Cypress
test execution window

9. 9
STEP 1
Prerequisite:
Install VS code(IDE)
Install NodeJS
STEP 2
Understand folder
structure and write test
cases and execute the
test cases
STEP 3
Specify the browser
name in the CLI
command by adding
name in package.json
A B
C
Manually choosing
browser in Cypress
Test Execution
Window
STEP 3
C
Steps to perform cross browser testing using
Cypress?

10. Executing using test execution window
● Run the following command in VS terminal
npx cypress open
● Cypress window opens up
● Choose the browser from the Cypress window
● After selection click on the test case

11. Cypress provides executing tests in headed or headless mode. CLI
provides an option to specify the browser name. Run the following command
in the VS terminal for headless mode:
npx cypress run --browser <browsername>
By default cypress runs on
headless mode
npx cypress run --browser chrome
To run on headed mode
npx cypress run --browser
chrome --headed
Running with shortcut commands.
Change in package.json
"scripts": { "test:chrome":
"cypress run --browser chrome" },
and run command
npm run test:chrome
Execute tests using CLI

12. Demo Agenda
Will showcase following:
➔ Explore Folder structure
➔ Run cross browser from test runner
➔ Run cross browser testing from command prompt
Headless
Headed

14. Cross browser testing can
be done in CI
Single framework for
Component, API , End to
end , Visual,
Accessibility,
Performance testing
Directly interacts with
DOM so the execution
time is fast Parallel cross
browsing can be
achieved by third
party tools
Supports
multiple
browsers
Conclusion

16. Thank You!
sushma.nayak@knoldus.com
Reach out to me @