--Cypress problems we are trying to solve(Tips and Hacks) -
--Problems : -
-| - | -Problem statement - | -Status - | -Person to contact - | -Test Trove Integration - | -
| 1 - | -Readable Output in CI CD - | -Solved - | -Mudit - | -Done - | -
| 2 - | -Reporting - | -Solved - | -Mudit - | -- | -
| 3 - | -Emailing with Gitlab( Sending Summary of Report and Report Link via -Gitlab) - | -Solved - | -Mudit - | -Done - | -
| 4 - | -Parallelization with Dashboard - | -Completed - | -Mudit - | -- | -
| 5 - | -Iframe issue - | -Solved - | -Sharmila , Shreya A - | -- | -
| 6 - | -Element not clickable - | -Solved - | -Mudit - | -Done - | -
| 7 - | -Avoiding repetition of code - | -Solved - | -Mudit - | -Done - | -
| 8 - | -Mouse Hover - | -- | -- | -- | -
| 9 - | -Multiple Window Handling (Work around way) - | -Solved - | -Mudit - | -- | -
| 10 - | -Enabling intellisense support for IDE(Helps in Fast coding, no need to -memorize/google the inbuilt function) - | -Solved - | -Mudit - | -Done - | -
| 11 - | -Enabling intellisense support for cypress-xpath plugin in the IDE - | -Solved - | -Mudit - | -Done - | -
| 12 - | -Using variables/aliases across different tests in same test file - | -Solved - | -Mudit - | -- | -
| 13 - | -Changing the size of Automated cypress browser window(using viewport) - | -Solved - | -Mudit, Sharmila - | -Done - | -
| 14 - | -Percy Integration - | -Percy integration done but percy integration with shadow dom -remaining - | -- | -- | -
| 15 - | -Clipboard API Validation - | -WIP - | -Mudit, Sharmila - | -- | -
| 16 - | -Parallelization without using Cypress Dashboard - | -Solved - | -Veer - | -Done - | -
| 17 - | -Execute cypress test on different environment - | -Solved - | -Veer - | -- | -
| 18 - | -Hide unwanted XHR Logs from cypress run while execution - | -Solve - | -Veer - | -Done - | -
| 19 - | -Hide Password/any text from being visible in the cypress test runner -steps - | -Solved - | -Mudit - | -Done - | -
| 20 - | -Cypress Custom Commands for repeated methods - | -Solved - | -Mudit - | -Done - | -
| 21 - | -Enable Caching for cypress dependencies in gitlab - | -Solved - | -Mudit - | -Done - | -
| 22 - | -Cypress Sticky Page Item - validation on scroll - | -Solved - | -Suriya - | -- | -
| 23 - | -Cypress view page source - Fallback scenarios - | -Solved - | -Suriya /Shreya A - | -- | -
| 24 - | -Checking 404 status code - | -Solved - | -Shreya A - | -- | -
| 25 - | -Gitlab Downloading npm dependencies only once - | -Solved - | -Mudit - | -Done - | -
| 26 - | -Cypress Parallel script to Plugin Development (Open sourcing the script, -making it accessible to be used as npm package install) - | -To Do - | -Veer,Mudit - | -- | -
| 27 - | -Limiting Test Report mail to be sent only on cron schedule - | -Solved - | -Mudit - | -Solved - | -
| 28 - | -Enabling videos and screenshots in cypress mochawesome report - | -Solved - | -Mudit - | -- | -
| 29 - | -Print cypress logs to command line - | -Solved - | -Suriya - | -- | -
| 30 - | -Type special characters in the input field - | -Solved - | -Mudit - | -- | -
| 31 - | -Setting multiple environment variables with single command(bash script to -refer) - | -Solved - | -Mudit - | -Done - | -
| 32 - | -Cross Browser Testing using Cypress(Safari/Chrome/Firefox) - | -Solved - | -Shashank - | -- | -
| 33 - | -Cypress Xpath Plugin enablement - | -Solved - | -Mudit - | -Done - | -
-
--Problem : Readable output in CI CD : -
--Solution : Add ```NO_COLOR=1``` in jenkins command -
-
-
-
-Problem : Sometimes the element cannot be clicked,typed or any other -action, due to an overlapping element -
-- Solution: use {force:true} in the action to be performed -
--Problem: Avoiding repetition of code which is to be carried on all tests -files, (For example logging into the site) -
-- Solution: Use Cypress Custom Commands and define the functionality in -cypress/commands.js file -
--Problem: Handling multiple windows in cypress ( We know that this -feature is not yet officially supported by cypress)(Works only if the the link -is having a target attribute for opening a new window ) -
-- Workaround: -
-
-Use .invoke( 'removeAttr', 'target' ) to prevent the link to be
-opened in a new tab/window and then you can carry out the test in usual
-way
-
-
-
-
Example:
-cy.xpath( 'locator' ).should( 'be.visible' ).invoke( 'removeAttr', 'target' ).click( { force: true } );
-
-
--Problem: Turning on the intellisense feature on visual studio code so -that autosuggestions comes for cypress -
-
-Solution: Use ///
-Problem: Using XPath in Cypress (Cypress out of the box do not support -xpath based locators) -
--Solution : npm i cypress-xpath — save-dev -
--Above command shall add the dependency of cypress-xpath to package.json -
--In cypress/support/index.js add -
--require(‘cypress-xpath’) -
--Problem: Enable intellisense support for cypress-xpath plugin -
-
-Solution: ///
-Problem: Percy integration -
-
-Solution: npm install --save-dev @percy/cli
-@percy/cypress
-
-
-Add below to the cypress/support/index.js -
--import '@percy/cypress'; -
--In the terminal -
-
-export PERCY_TOKEN=
-Inside the test , add -
--cy.percySnapshot(); -
--Run your cypress tests with Percy: -
--For running all test files - -
--npx percy exec – cypress run -
--For running selected test files -
-
-npx percy exec – cypress run –spec=
-Problem: Using Common variables/alias to be shared across different -tests in the same file -
--Solution: Alias defined using .as(var_name) can be reused in some different -test -
--In the following way: -
--Example: -
- - -it('Get project title', () => {
- cy.get('locator').invoke('val').as('projName')
- cy.wait(5000)
- })
-
- it('Use projName variable', function() {
- cy.get('locator').type(this.projName, { force: true });})
-
-
--Problem: Handling Iframes -
--Solution: -
--Method 1: [can be used when Iframe is used across multiple files) -
-
-
-
cy.getIframeBody("iframe_element").find("..").should('be.visible').type()
-
--Method 2: Use Iframe directly into your test case and Perform any validation and -actions inside the Iframe as type() or click() as below. Xpath can also be used -for Iframe element. -
-
-
-
- cy.frameLoaded(Iframe_attribute) -
-- -cy.iframe(iframe_attribute).find(iframe_element_to_search).click() -
--Problem: Testing with different sizes of the Browser window -(Simulating multiple screen sizes) -
--Solution: Cypress sets the browser size of width to 1000px and -the height to 660px by default. cy.viewport(width, height) helps to set the -browser in different screen size. -
-cy.viewport( Cypress.env('width'), Cypress.env('height') )
-
- "env": {
- "width": 1280,
- "height": 720
- }
-
--Note: 1280x720 is the size of the automated browser in selenium. -
--Problem : Mailing with Gitlab -
--Gitlab does not have a preconfiguration which can be used to trigger -email reports as Jenkins Have. We can use the following python script to send -mail containing a summary of reports in the mail body and cypress report -link. -
- - -import json
-import smtplib
-import requests
-f=open('./e2e/reports/index.json')
-testdata=json.load(f)
-print(testdata['stats'])
-total_tests=testdata['stats']['tests']
-total_failing=testdata['stats']['failures']
-total_pass=testdata['stats']['passes']
-total_skipped=testdata['stats']['skipped']
-percentpass=round((int(total_pass)/int(total_tests))*100)
-emails=['<receiver emails>']
-smtp_server = "smtp.corp.redhat.com"
-port = 25
-smtpAuth = "none"
-sender_email = "<sender mail>"
-receiver_email =emails
-message = """\
-MIME-Version: 1.0
-Content-type: text/html
-Subject: One Platform Test Result(UI Pass Percentage:{percentpass})
-From:{sender_mail}
-To: {to_mail}
-
-<h3><i>Testing is completed. The Reports Are Ready:</i></h3>
-
-<h5>Summary of Cypress Test Report:</h5>
-<table style="border-top: 1px solid #dee2e6;
- border-collapse: collapse;
- color: #434343;
- font-family: 'Red Hat Text';
- margin-left: 1rem;
- font-size: 16px;">
- <thead style="border-bottom: 2px solid #dee2e6;">
- <tr style="border-top: 1px solid #dee2e6;">
- <th style="padding: 1rem;
- padding-left: 0.5rem;
- text-align: left;">
- Test Metrics
- </th>
- <th style="padding: 1rem;
- padding-left: 0.5rem;
- text-align: left;">Count</th>
- </tr>
- </thead>
- <tbody>
- <tr style="border-top: 1px solid #dee2e6; border-left: 3px solid #007bff;">
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- Total Tests
- </td>
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- {total_tests}
- </td>
- </tr>
- <tr style="border-top: 1px solid #dee2e6; border-left: 3px solid red;">
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- Total Failed Tests
- </td>
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- {total_failing}
- </td>
- </tr>
- <tr style="border-top: 1px solid #dee2e6; border-left: 3px solid #28a745;">
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- Total Passing Tests
- </td>
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- {total_pass}
- </td>
- </tr>
- <tr style="border-top: 1px solid #dee2e6; border-left: 3px solid yellow;">
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- Total Skipped Tests
- </td>
- <td style="padding: 1.5rem;
- padding-left: 0.25rem">
- {total_skipped}
- </td>
- </tr>
- </tbody>
-</table>
-
-<h4 style="color:gray">Report Link</h4>
-<gitlab pages url>
-<br><br>
-Regards,<br>
-""".format(sender_mail=sender_email, to_mail=emails, total_tests=total_tests,total_failing=total_failing, total_pass=total_pass,percentpass=percentpass,total_skipped=total_skipped)
-
-with smtplib.SMTP(smtp_server, port) as server:
- server.connect("smtp.corp.redhat.com",25)
- server.ehlo() # Can be omitted
- server.set_debuglevel(1)
- server.sendmail(sender_email, emails, message)
-
--In gitlab-ci.yml -
--Define notify stage under stages and -
- - -notify: - stage: notify - needs: - - test - - pages - dependencies: - - test - - pages - image: python - before_script: - - pip3 install requests - script: - - ls e2e/reports - - python3 sendmail.py - tags: - - shared - --
-Parallelization without using Cypress Dashboard -
--Problem Statement: Executing cypress test in parallel without using the -cypress dashboard. -
--Solution: -
--In order to execute the cypress test in parallel following steps need to -be followed. The custom code needs to be written in order to achieve this. - -
--
-
-
-The above code will give the comma separated list files which need to -be executed. -
--Once that step is done add a script that will execute your cypress test. - -
-
-
-
-In Gitlab.ci.yml below script is executed. -
-
-
-
-Kindly note that you can test the code only with the gitlab pipeline. - -
--Execute Cypress Tests on Different environment -
--Problem Statement: Executing the same tests of different environments -like QA,Stage, Production. -
--The above can be achieved in different ways. -
--Method 1: -
--In cypress.json file we can add key for baseUrl as below -
-
-
-
-In the spec file use Cypress.config().baseUrl; command to access -baseUrl -
-
-
-
-Use the cypress command line to pass the baseURL dynamically. -
-
-
-
-Method 2 -
--Creating different configuration file files for each environment - -
--Step 1: Create your own cypress configuration file in the Root Folder - -
-- Example: staging-config.json, qa-config.json -
--Step 2:In custom/ow cypress config files add the baseUrl key as shown -below. -
--The first key is added in order to override the settings that are -present is cypress.json. In this case we are overriding the baseUrl. -
--This also inherits the properties that are already there cypress.json -file -
-
-
-
-
-
-Step 3: Use the Cypress.config().Baseurl command in your tests. - -
--Step 4: Run Cypress Tests on multiple environments. -
-
-
-
-The above commands can also be added to your package.json file -
--HIDE XHR logs in Cypress Runner. -
--Cypress internally logs lots of calls which are not required. Due to -these logs actual verification we are trying to do get lost. We can control this -behavior with the help of custom code as below. -
--This code needs to be added in to index.js -
-
-
-
-This is configurable from cypress.json. In cypress.json we need to add -key name“hideXHR” -
--When Set is true it will hide the logs in cypress runner else if false -it will show all the logs in cypress runner -
--Problem: Not to show what password or any text is being typed into the -textbox/input field -
--Solution: Use {log:false} in the type() method -
--Example: -
- - -cy.get('#password').type(password,{log:false});
-
--Problem: To be able to use Cypress Custom Commands for using repeated -methods without writing a lot of code again and again -
--Solution -
- - -Cypress.Commands.add("login", (username, password) => {
- cy.get('#username', { timeout: 5000 }).type(username);
- cy.get('#password').type(password,{log:false});
- cy.get('#submit').click();
-})
-
--Add above in commands.js -
--Use above method as given below: -
- - - cy.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'))
-
--Problem: Enable caching for dependency installation in gitlab for -cypress thereby saving time in npm install -
--Solution: Add below in each and every stage of pipeline which require -npm commands to be executed -
-- cache: -
-- paths: -
-- - .npm -
-- - cache/Cypress -
--____________________________________________________________________________ -
--Problem: Cypress sticky page items validation - on scroll -
--There is no built-in built method / function in cypress which can -validate if an element comes to visibility on scroll. -
--Solution: -
--Step1: Fetch the current window height -
--Step2 : Get the specific element size information using getBoundingClientRect -function. -
--Step3: Assert the element top & bottom with window height -
--Step4: Call the function to assert for visible/invisible elements on scroll. -
-
-
-
-____________________________________________________________________________ -
--Problem: Cypress view page source -
--Solution: -
--I feel like selenium (getPageSource) there is no direct method to view the page -source of a web page in cypress. (mostly needed in case of validating fallback -behavior) -
--We identified that we can search for the element in DOM and write CSS for it -(for example meta tags in my case) and assert it with the expected page source -value for the tag. This will be helpful to validate the fallback behavior. -
-
-
-
-Problem: Checking 404 status code -
--Solution: -
-- -
- - - cy.request({url: "url" , failOnStatusCode: false }).then((resp)=>{
- if (resp.status == '404')
- {
- cy.log(url+ "Status is 404")
- }
- })
-
--Problem: Download the npm dependencies only once in the different stages -of pipeline created in gitlab -
--Solution: Implement caching of dependencies -
--Define below in each and every stage which requires npm package -downloading -
- - -cache: - paths: - - .npm - - cache/Cypress - - node_modules --
-Define below variables at the top in the variables section -
--variables: -
- - -npm_config_cache: "$CI_PROJECT_DIR/.npm" -CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress" --
-Problem: Limit Test Report Mails to be sent only on cron -schedule -
--Solution: Using Rules in gitlab -
- - -send_email:on-schedule: - image: joyzoursky/python-chromedriver - stage: notify - rules: - - if: $CI_PIPELINE_SOURCE == "schedule" --
-Problem: Embedding videos and screenshots in cypress mochawesome report -hosted on gitlab pages -
--Solution: -
--In cypress/support/index.js -
- - -import addContext from 'mochawesome/addContext';
-
-const titleToFileName = (title) => title.replace(/[:\/]/g, '');
-
-Cypress.on('test:after:run', (test, runnable) => {
- if (test.state === 'failed') {
- const filename = `${titleToFileName(runnable.parent.title)} -- ${titleToFileName(test.title)} (failed).png`;
- addContext({ test }, `cypress/screenshots/${Cypress.spec.name}/${filename}`);
- addContext({ test }, `cypress/videos/${Cypress.spec.name}.mp4`);
- }
-});
-
--In gitlab-ci.yml, -
--Define below in test stage -
- - -artifacts: - expire_in: 30 days - when: always - paths: - - cypress/screenshots/ - - cypress/videos/ --
-Define below in pages stage -
- - -script: - - npm run combinereports - - npm run e2e:report:html - - cp -r e2e/reports/ public/ - - cp -r cypress/ public/ - when: always - artifacts: - paths: - - public/ - - cypress/screenshots/ - - cypress/videos/ --
-____________________________________________________________________________ -
--Problem: Print cypress logs to CLI -
--In index.js, add following task configuration. -
-
-
-
-Inside code, add cy.task() to print the logs to CLI (cy.task() will also -display the output in cypress console) -
-
-
-
-In CLI, logs will be printed as shown below. -
-
-
-
-Problem: Typing special characters {,} in a input -
--Solution: -
- - -cy.get( 'locator' ).type( '{"key": "value"}' ,{parseSpecialCharSequences:false});
-
--Problem: when we have several environment variables being used, -everytime writing export statement for each environment variable is cumbersome. -(when testing locally) -
--Solution : Using bash script -
- - -#!/bin/sh -export CYPRESS_USERNAME=<username> -export CYPRESS_PASSWORD=<password> -export CYPRESS_ENV=qa --
-Save the above file with name (say env_set.sh) -
--Run this file before running the cypress tests -
-- source env_set.sh -
--—----------- -
\ No newline at end of file