Who we are…
Anastasia Tsavdari Gkiorgkini
QA Analyst at Onelity
ISQTB Certified Foundation &
Automation Test Lead at EPG
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
Use Allure Reporting to review test run results
Integrate Cypress with Jenkins in CI/CD and export results on Xray
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
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
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
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.
Accessibility means designing products which are accessible to all
Legal Argument of Accessibility is the reason to test:
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!
Performance Testing with pa11y -
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
Export Reports with Mochawesome
Install cypress plugin: mochawesome
❑ npm install --save-dev mochawesome mochawesome-merge
Run the tests headless & export json report
❑ npx cypress run --reporter mochawesome --headless --browser chrome cy
Export to html
❑ npx marge report.json
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.
Integrate Cucumber into Cypress
After Cypress installation we will need two additional node packages
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
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
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
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
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
Allure Reporting – Install
Install additional node packages
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
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.
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
➢ Web Accessibility Initiative
➢ WCAG 2.1 standard
➢ Cypress Plugins
➢ Pa11y library
➢ Google lighthouse docs
➢ Google lighthouse github