Test Automation using Cypress Fundamentals & Advanced Techniques Anastasia Tsavdari-Gkiorgini (QA Engineer) Georgios Iliadis (Lead QA Engineer)

1. Test Automation
using cypress
Fundamentals & Advanced Techniques

2. Who we are…
Anastasia Tsavdari Gkiorgkini
 QA Analyst at Onelity
 ISQTB Certified Foundation &
Agile Tester
 LinkedIn: @anastasia-tsavdari-
gkiorgkini
Georgios Iliadis
 Automation Test Lead at EPG
Financials Greece
 LinkedIn: @georilia

3. What we will discuss today
 Accessibility & Performance Testing using pa11y & export reports
 BDD testing with cucumber on cypress
 Create a Feature Acceptance scenario using Page Object Pattern
 Run the same scenarios in multiple environments using also different
configuration
 Use Allure Reporting to review test run results
 Integrate Cypress with Jenkins in CI/CD and export results on Xray

4. Why Cypress…
 Cypress is a testing framework based on Java-Script and it that is designed to
simplify the process of writing and running our automated tests.
 It runs directly in the browser – this gives us more control over the browser and
provides features that are not available on WebDriver-based frameworks.
 Faster Test Execution: tests execute faster than WebDriver-based frameworks, due
to the direct connection to the DOM.
 Allows to manipulate the DOM, intercept network requests & responses, and more.
This makes it easier to write tests and produces more accurate results after
executions.

5. Why Cypress…
 Automatic Waiting: Cypress can be configured to waits for commands and
assertions to complete before moving on to the next step in your test. This
eliminates the need for manual waits and timeouts, which can often lead to fragile
tests.
 No Need for External Drivers such as Selenium WebDriver or even installed
browser as it has preinstalled its own browser (based on Electron)
 Test Recorder: Cypress comes with a built-in test recorder that allows you to record
your interactions with your application and generate videos and screenshot on
failure.
 API Testing: Cypress has built-in support for testing APIs, which allows you to easily
write and run API tests alongside your end-to-end tests.
 Accessibility & Performance Testing: Verify the application is accessible for users
with disabilities & measure the speed/responsiveness of the application.

6. Accessibility Testing
 Accessibility means designing products which are accessible to all
 Legal Argument of Accessibility is the reason to test:
https://www.w3.org/WAI/standards-guidelines/wcag/
 We must test an interface against a set of guideline if we want to be considered for
accessibility testing: most common WCAG_2.1
 2 libraries in cypress: Axe-core the most common BUT
 Today we focus on pa11y!

7. Setup for Accessibility &
Performance with pa11y
 Install 2 packages:
❑ npm install –save-dev @cypress-audit/pa11y
❑ npm install –save-dev @cypress-audit/lighthouse
 Configure cypress.config.js
 Configure e2e.js

8. Performance Testing with pa11y -
Lighthouse
 Performance: measures how fast the content visually load on page load.
 SEO: the process of making your site better for search engines
 Best-Practices: The 16 Best Practices tested by Lighthouse mainly focus on security
aspects of websites & modern standards of web development.
 Progressive Web App (PWA): use service workers, manifests & web-platform
features in combination with progressive enhancement to run the app in any device

9. Export Reports with Mochawesome
 Install cypress plugin: mochawesome
❑ npm install --save-dev mochawesome mochawesome-merge
mochawesome-report-generator
 Configure cypress.config.js
 Run the tests headless & export json report
❑ npx cypress run --reporter mochawesome --headless --browser chrome cy
 Export to html
❑ npx marge report.json

10. Why Cucumber…
 Create clear and easy-to-read automated tests
 Improving collaboration between developers, testers, and business analysts.
 Increases reusability of test scenarios, reducing the time and effort required to
create and maintain test cases.
 Better test coverage with more comprehensive scenarios, identifying potential
issues early in the development process.
 Improved traceability of requirements to test cases.

11. Integrate Cucumber into Cypress
 After Cypress installation we will need two additional node packages
❑ cypress-cucumber-preprocessor
❑ cypress-esbuild-preprocessor
❑ esbuild
 Add the proper configuration into ‘cypress.config.js’ which will compile our feature
files before test execution
 Parametrize cypress cucumber preprocessor to discover the step definitions and the
feature files

12. Create a Feature Acceptance Test
 Create Page Object Folder
 Create the pre desired objects as folders and inside create the object classes
 Split the classes in three parts
1. Main Object Functionality – Clicks , types , selects
2. Object Validations - Element Visibility , calculations , results
3. Object Locators – Element locators (xpath, ids)
 Create common helpers to speed up the process
 Create Step Definitions matching each main Object
 Create a const which will generate our classes inside each Step Definition
 Match the Feature File steps with the step Definitions

13. Run tests in different environments
 We can run the same tests in different envs by using Cypress env variables
❑ let secretKey = Cypress.env(‘secretKey’) ---- secretKey = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ
❑ let adminPass = Cypress.env(‘adminPass’) ---- adminPass = Abc+123+@
 We should define the environments that our cypress suite needs to run
 Create a specific file for each environment which will contain all our properties
 Override Cypress default configuration through ‘cypress.config.js’
 Pass through npm command our environment preference, --env environment=demo

14. Allure Reporting
 Better Visualization of Test Results: Allure Reporting provides a more visually
appealing and informative report than Cucumber Report. The reports generated by
Allure contain detailed and interactive graphs, charts, and tables that make it easier
to understand the test results.
 Easy to Install and Configure: Allure Reporting is easy to install and configure. It
requires minimal setup and can be integrated with various testing frameworks such
as JUnit, TestNG, and Cucumber.
 Integration with CI/CD tools: Allure Reporting has seamless integration with
popular CI/CD tools like Jenkins. This means that the reports can be automatically
generated and published after each build, making it easier for teams to track test
results.
 Extensible and Customizable: Allure Reporting is extensible and customizable. It
provides a plugin system that allows users to add custom widgets, plugins, and
extensions to the reports. This makes it easier to tailor the reports to meet specific
project needs.

15. Allure Reporting – Install
 Install additional node packages
❑ allure-commandline
❑ cypress-allure-plugin
 Import “cypress-allure-plugin” in e2e.support file which is processed and loaded
automatically before our test files
 Call allure task on cypress.config.js file
 Enable/Disable Allure using an env property in env files “allure": true/false
 Generate the report after the execution with a npm post test command
❑ "posttest": "allure generate allure-results --clean -o allure-report && allure
open allure-report"

16. Execute in Jenkins
 Automated Testing: By integrating Cypress with Jenkins, you can automate your
test suite to run as a part of your continuous integration (CI) and continuous
deployment (CD) pipelines. This ensures that every code change is thoroughly
tested before it is deployed, reducing the risk of bugs and issues in production.
 Consistent Testing Environment: Jenkins provides a consistent testing environment,
ensuring that your tests are executed in the same environment every time. This
helps in identifying issues related to specific environments, such as browser
compatibility issues, and enables you to fix them early on.
 Faster Feedback: Cypress provides fast test execution, and by running it in Jenkins,
you can get feedback on your tests' results quickly. You can set up Jenkins to
automatically trigger Cypress tests on code commits, and the results can be shared
with the team via email, slack or any other means of communication.
 Easy Debugging: Cypress provides an excellent debugging experience, and by
running it in Jenkins, you can easily troubleshoot any test.

17. Export Results in XRAY
 Centralized Test Management: Xray provides a centralized platform for managing
and tracking test results across different teams and projects.
 Improved Test Visibility: Exporting test results from Cypress to Xray provides better
visibility into test execution status, enabling teams to quickly identify and address
issues that arise during testing.
 Integration with Jira: Xray integrates seamlessly with Jira, enabling teams to track
and manage test execution status directly within Jira issues.
 Traceability: By exporting test results to Xray, teams can establish traceability
between test cases, requirements, and other artifacts, enabling better tracking and
reporting of testing progress.
 Metrics and Reporting: Xray provides a range of metrics and reporting options that
enable teams to analyze testing performance, identify trends, and make data-driven
decisions to improve testing processes.
 Collaboration: Xray enables teams to collaborate more effectively by sharing test
results, creating test plans, and managing test execution across different teams and
projects.

18. Useful links
➢ Web Accessibility Initiative
➢ WCAG 2.1 standard
➢ Cypress Plugins
➢ Pa11y library
➢ Google lighthouse docs
➢ Google lighthouse github

19. Thank you for
your attention!
Question Time.