Más contenido relacionado


MoT Athens meets Thessaloniki Software Testing & QA meetup

  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:  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 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.