Added Other Two Cypress Test Scripts

web/themes/custom/contribtracker/cypress/e2e/accessibility-check.cy.js

@@ -0,0 +1,78 @@
+// Import the list of pages and their URLs from a fixture file
+import pages from '../fixtures/page-check-urls.json';
+
+describe('Accessibility Testing for All Pages', { tags: ['expensive'] }, () => {  
+    // Iterate over each page in the `pages` object
+    Object.entries(pages).forEach(([pageName, pageData]) => {
+      it(`Validates accessibility for ${pageName} page`, () => {
+        // Send an HTTP request to the page's URL to verify its accessibility status
+        cy.request({
+          url: pageData.url, // Page URL
+          failOnStatusCode: false, // Do not fail the test on non-2xx/3xx HTTP status codes
+        }).then((response) => {
+          // Skip testing the page if the server returns a 403 Forbidden status
+          if (response.status === 403) {
+            cy.log(`Skipping ${pageName} page due to 403 Forbidden.`);
+            return;
+          }
+
+          // Visit the page to load it in the Cypress browser
+          cy.visit(pageData.url);
+
+          // Inject the axe-core library into the page for accessibility testing
+          cy.injectAxe();
+
+          // Perform an accessibility check using axe
+          cy.checkA11y(null, null, (violations) => {
+            // If any violations are found, log them and fail the test
+            if (violations.length > 0) {
+              // Log detailed information about each violation
+              logAccessibilityViolations(violations, pageName);
+
+              // Throw an error to fail the test, including a formatted list of violations
+              throw new Error(
+                `${violations.length} accessibility violations found on ${pageName}:\n${formatViolations(
+                  violations
+                )}`
+              );
+            }
+          });
+        });
+      });
+    });
+
+    /**
+     * Logs detailed information about accessibility violations to the console.
+     * @param {Array} violations - The list of accessibility violations.
+     * @param {string} pageName - The name of the page being tested.
+     */
+    function logAccessibilityViolations(violations, pageName) {
+      // Log the number of violations on the page
+      cy.task('log', `\nAccessibility violations on ${pageName}: ${violations.length}\n`);
+      violations.forEach(({ id, impact, description, nodes }) => {
+        // Log individual violation details
+        cy.task('log', `Violation ID: ${id}`);
+        cy.task('log', `Impact: ${impact}`);
+        cy.task('log', `Description: ${description}`);
+        cy.task('log', `Affected Elements: ${nodes.map((node) => node.target).join(', ')}`);
+        cy.task('log', '---------------------------');
+      });
+    }
+
+    /**
+     * Formats the list of accessibility violations into a readable string.
+     * @param {Array} violations - The list of accessibility violations.
+     * @returns {string} - A formatted string of violation details.
+     */
+    function formatViolations(violations) {
+      return violations
+        .map(
+          ({ id, impact, description, nodes }) =>
+            `- Violation ID: ${id}\n  Impact: ${impact}\n  Description: ${description}\n  Affected Elements: ${nodes
+              .map((node) => node.target)
+              .join(', ')}\n`
+        )
+        .join('\n');
+    }
+  });
+

web/themes/custom/contribtracker/cypress/e2e/responsive-layout-check.cy.js

@@ -0,0 +1,32 @@
+// Describe the test suite for Responsive Layout Validation
+describe('Responsive Layout Validation', { tags: ['critical-path'] }, () => {
+    // Viewports to test
+    const viewports = [
+      { device: 'Mobile', width: 375, height: 667 },
+      { device: 'Tablet', width: 768, height: 1024 },
+      { device: 'Desktop', width: 1440, height: 900 },
+    ];
+
+    // Test case for each viewport
+    viewports.forEach(({ device, width, height }) => {
+      it(`should render correctly on ${device} (${width}x${height})`, () => {
+        cy.viewport(width, height);
+        cy.visit('/');
+
+        // Validate elements are visible
+        cy.get('header').should('be.visible');
+        cy.get('main').should('be.visible');
+        cy.get('footer').should('be.visible');
+
+        // Validate layout integrity: main should not overlap footer
+        cy.get('main').then(($main) => {
+          const mainRect = $main[0].getBoundingClientRect();
+          cy.get('footer').then(($footer) => {
+            const footerRect = $footer[0].getBoundingClientRect();
+            expect(mainRect.bottom).to.be.at.most(footerRect.top, 'Main content ends before the footer starts');
+          });
+        });
+      });
+    });
+  });
+

web/themes/custom/contribtracker/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 import './commands';
 import 'cypress-real-events'; // cypress inbuilt trigger() will only affect events in JavaScript and will not trigger any effects in CSS. See for more details: https://docs.cypress.io/api/commands/hover
-
+import 'cypress-axe';
 import registerCypressGrep from '@cypress/grep';
 registerCypressGrep();

web/themes/custom/contribtracker/package.json

@@ -26,9 +26,11 @@
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "autoprefixer": "^10.4.20",
+    "axe-core": "^4.10.2",
     "breakpoint-sass": "^3.0.0",
     "browser-sync": "^3.0.2",
     "cypress": "13.17.0",
+    "cypress-axe": "^1.5.0",
     "cypress-real-events": "^1.13.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",