This GitHub repository serves as a decent automation setup for testing web responsiveness using Cypress. The focus is on running automated tests across Chrome, Firefox, and Edge browsers, capturing screenshots for verification, and seamlessly pushing those results back to the repository. Beyond the Cypress scripts, the repository integrates a fully functional GitHub Actions workflow to automate the entire process.
Feel free to check out my GitHub repository here:
https://github.com/NoToolsNoCraft/Cross-Browser-Testing-Setup-with-Cypress
Core Features of the Repository
Cypress Testing
At the heart of this project is Cypress. My Cypress script target specific use cases to verify that web layouts are responsive and functional across different screen resolutions that can be fully customized to your needs. As it going through each webpage tested, it scrolls down and taking screenshots, compiling a whole webpage screenshot for each screen resolution.
Check out the Cypress script by clicking here!
Cypress.on('uncaught:exception', (err) => {
console.error('Error:', err.message);
return false;
});
describe('Responsive Layout Screenshot Suite', () => {
beforeEach(() => {
cy.visit('https://notoolsnocraft.tech/integrating-cypress-with-browserstack/'); // Replace with your website
});
const viewports = [
{ name: 'iPhone SE', width: 375, height: 667 },
{ name: 'Samsung S20', width: 360, height: 800 },
{ name: 'iPhone 12 Pro', width: 390, height: 844 },
{ name: 'Pixel 5', width: 393, height: 851 },
{ name: 'Apple iPhone 16', width: 393, height: 851 },
{ name: 'Xiaomi Mi 10T Pro 5G', width: 393, height: 873 },
{ name: 'iPad Mini or Tablet', width: 768, height: 1024 },
{ name: 'iPad Pro 11', width: 834, height: 1194 },
{ name: 'Surface Pro 7', width: 912, height: 1368 },
{ name: 'Horizontal Larger Tablet', width: 1280, height: 800 },
{ name: 'Vertical Larger Tablet', width: 800, height: 1280 },
{ name: 'Smaller PC Monitor', width: 1280, height: 720 },
{ name: 'Small PC Monitor', width: 1366, height: 768 },
{ name: 'Mid Desktop', width: 1536, height: 864 },
{ name: 'Full HD', width: 1920, height: 1080 }
];
viewports.forEach(viewport => {
context(`Capturing screenshot on ${viewport.name}`, () => {
it(`Takes a screenshot for ${viewport.name}`, () => {
cy.viewport(viewport.width, viewport.height);
cy.reload();
// Wait for the page to be fully loaded and stable
cy.window().should('have.property', 'document'); // Ensure the document is fully loaded
cy.document().should('not.have.property', 'readyState', 'loading'); // Ensure the document is not still loading
// Optionally wait for specific elements that signify full page load
cy.get('body').should('be.visible'); // Ensure the body is visible
// After the page is fully loaded and stable, capture and save screenshot
//Inside of the /cypress/screenshots folder there should the separated subfolders for each browser
const browserName = Cypress.browser.name;
cy.screenshot(`${browserName}/${viewport.name}-screenshot`, { capture: 'fullPage' });
});
});
});
});Basically, you can use this script pretty easily yourself. Set up a basic Cypress environment and add it to the test script collections. Change the URL with the one you want to test and you are ready to run the test. The screenshots will get generated in the /cypress/screenshots folder. The script will run in the browser that you choose while opening Cypress.
If you want to include or exclude some devices or screen resolutions, you can easily add or remove the ones you want in the viewports variant.
GitHub Actions Workflow
The repository includes a YAML-based workflow that orchestrates the entire testing and screenshot management process.
- Cross-Browser Testing: By implementing the GitHub workflow Cypress tests are run on Chrome, Firefox, and Edge simultaneously.
- Screenshot Capture: For each test, Cypress captures relevant screenshots, which are crucial for visual validation.
- Organized Output: The screenshots are stored in dedicated folders:
cypress/Chrome_screenshots,cypress/Firefox_screenshots, andcypress/Edge_screenshots.
Key Steps in the Workflow:
- Setup and Dependency Installation:
- The workflow sets up a Node.js environment and installs project dependencies using
npm ci.
- The workflow sets up a Node.js environment and installs project dependencies using
- Running Cypress Tests:
- Tests are executed in Chrome, Firefox, and Edge sequentially.
- Each test run generates screenshots saved to browser-specific directories.
- Git Operations:
- Screenshots are committed and pushed back to the repository automatically.
- To handle unstaged changes, the workflow utilizes
git stashandgit stash popto manage the working directory cleanly.
YAML Workflow Example:
- name: Commit and push Chrome screenshots
run: |
git config --local user.name "GitHub Actions"
git config --local user.email "[email protected]"
git stash --include-untracked
git pull --rebase origin main
git stash pop || echo "Nothing to pop from stash"
git add cypress/Chrome_screenshots
git commit -m "Add Cypress Chrome screenshots" || echo "No changes to commit"
git push
continue-on-error: trueScreenshot Management
One of the most useful aspects of this repository is the automated screenshot management system.
- Folder Structure: Screenshots are neatly organized in browser-specific folders:
cypress/Chrome_screenshotscypress/Firefox_screenshotscypress/Edge_screenshots
- Version Control: The workflow automatically commits and pushes these screenshots back to the repository, ensuring that test artifacts are always available for review.
Error Handling and Workflow Resilience
To ensure smooth execution, the workflow includes error handling measures:
- Stashing Changes: Ensures that Git operations can proceed without conflicts.
- Conditional Commit Messages: Avoids errors when there are no changes to commit.
- Continue-on-Error: Prevents the workflow from breaking if no changes need to be pushed.
This GitHub repository demonstrates a streamlined approach to Cypress automation, test artifact management, and CI/CD integration using GitHub Actions. The combination of Cypress scripts and a robust GitHub Actions workflow ensures comprehensive and efficient cross-browser testing, making this setup invaluable for maintaining high-quality web applications. If you’re looking for inspiration on handling automated testing and artifact management, this repository is a practical example worth exploring.
