📑 Working with Test Cases: Product Development Team

Cypress test cases are designed to check different parts of the website. Below are the two main tests:

🖥️ Demo Site Testing – AI.DemoSite.test.js

This test suite focuses on the demo site’s front end, ensuring that core functionalities are working correctly.

It verifies UI structure, navigation, and form interactions to provide a smooth user experience.

🔧 Marketing Site Testing – AI.MarketingSite.test.js

This test suite focuses on the marketing site’s front end, ensuring accessibility and usability.

It follows the same validation checks as the demo site but is applied to the marketing platform.

✅ Test Cases for Demo Site and Marketing Site Testing:

Should load the website with the correct structure
- Checks if the correct URL is loaded
  - ✅ If the URL matches the expected base URL, logs ”✅ URL matches the expected base URL: {baseUrl}”.
  - ❌ If the URL does not match, logs ”❌ URL mismatch: Expected {baseUrl} but got {currentUrl}” and adds it to errors.
- Checks for essential page elements
  - ✅ If the Header, Body, and Footer exist and are visible, logs ”✅ {Element} is visible”.
  - ❌ If an element is missing or not visible, logs ”❌ {Element} is missing or not visible” and adds it to errors.
- Final Assertion
  - ✅ If no issues are found, logs ”✅ Website loaded successfully with all expected elements visible!”.
  - ❌ If errors exist, logs ”🚨 The following issues were detected:” followed by the list of issues and fails the test.
Should have no broken links
- Scanning all links on the pages
  - ✅ If a valid <a> tag is found, logs ”🔍 Scanning all links on the page…”.
- Checks for broken or invalid links
  - ✅ If a link has a valid destination, it sends a request to check its status.
  - ❌ If a link is empty, #, javascript:void(0), or ends with /#, logs ”❌ Broken link detected: {link text} ({href}) - Invalid destination” and adds it to deadLinks.
- Skips non-testable links
  - ✅ If a link starts with mailto:, tel:, or sms:, logs “⚠️ Skipping non-testable link: {link text} ({href})”.
  - ✅ If a link is a social media link (Facebook or LinkedIn), logs “⚠️ Skipping Social Media link: {link text} ({href}) - Requires manual testing” and adds it to manualTest.
- Checks for link response status
  - ✅ If the request returns a 200 status, logs ”✅ Link working: {link text} ({href})”.
  - ⚠️ If the request returns 403, logs “⚠️ {link text} ({href}) returned 403 - Cypress has no access, manual check required.” and adds it to manualTest.
  - ❌ If the request returns a status greater than 399, logs ”❌ Broken link detected: {link text} ({href}) with status {status}” and adds it to deadLinks.
- Final Assertion
  - ⚠️ If manual test links exist, logs “⚠️ The following links require manual testing:” followed by the list of links.
  - ✅ If no broken links are found, logs ”✅ No broken links detected on the page.”.
  - ❌ If broken links exist, logs ”🚨 The following links are broken:” followed by the list of broken links and fails the test.
Checks the contact form
- Checks if a contact form exists
  - ✅ Finds all forms on the page.
  - ✅ If a form with the required fields is detected, logs ”✅ Contact form found.”
  - ❌ If no suitable form is found, logs “⚠️ No suitable contact form found. Visiting /contact page…” and navigates to /contact.
- Fills out the contact form
  - ✅ Locates the input fields for first name, last name, email, phone, and message.
  - ✅ Clears existing values and inputs test data.
  - ✅ Clicks the submit button.
- Handles form submission
  - ✅ Intercepts the form submission request (/wp-json/contact-form-7/v1/contact-forms/*/feedback)
  - ✅ Waits for the request to complete.
  - ✅ If the URL remains unchanged after submission, logs ”✅ Contact form responded (intercepted request detected).”
  - ❌ If the URL unexpectedly changes, logs ”❌ Unexpected URL change detected! Initial: {initialUrl} | Current: {currentUrl}” and fails the test.
- Final Assertion
  - ✅ If the form submission request is intercepted, confirms form submission was successful.
  - ❌ If no form submission request is detected, logs an error and fails the test.
Should have all images loaded
- Scanning for Images
  - ✅ Scrolls to the bottom of the page and waits for all images to load.
  - ✅ Counts the total number of ‘img’ elements on the page and logs the result.
- Checking <img> Elements
  - ✅ Loops through all <img> elements, checking if they have a valid source (data-src, src, or data-aios-lazy-src).
  - ❌ If an image lacks a valid source, logs “⚠️ Skipping Image {index}: No valid image source.”
  - ✅ If an image has a valid source, it scrolls into view and logs ”✅ Image {index}: Valid source detected.”
- Testing Image Requests
  - ✅ If an image source is valid, sends a request to verify if it loads successfully.
  - ✅ If the request returns a 200-399 status, logs ”✅ Image {index}: Working properly ({status}).”
  - ❌ If the request returns a 400+ status, logs ”❌ Image {index}: Request failed with status {status}.” and adds it to brokenImages.
- Checking <canvas> Elements with Background Images
  - ✅ Detects if there are any <canvas> elements on the page.
  - ❌ If no <canvas> elements exist, logs “⚠️ No <canvas> elements found on this page, skipping canvas image checks.”
  - ✅ If <canvas> elements exist, extracts background-image URLs from inline styles.
  - ❌ If a <canvas> element lacks a background image, logs “⚠️ Skipping Canvas {index}: No background image found, but does not mean it’s a broken image.”
- Testing Canvas Background Image Requests
  - ✅ If a <canvas> element has a background-image, it sends a request to check if it loads successfully.
  - ✅ If the request returns a 200-399 status, logs ”✅ Canvas {index}: Background image attribute is valid.”
  - ❌ If the request returns a 400+ status, logs ”❌ Canvas {index}: Request failed with status {status}.” and adds it to brokenImages.
- Final Assertion
  - ✅ If no broken images exist, logs ”✅ All images and canvas background images loaded successfully!”
  - ❌ If broken images exist, logs all issues and fails the test with ”🚨 The following images are broken:” and lists the broken image URLs.