How to Use Cypress Fixtures and Scripts for Testing 1000+ News Items

How do you verify that all items load?

• How can you validate dynamic filters (by year, type, category)?
• How do you avoid timeouts or infinite scroll traps?

Cypress fixtures provide an efficient approach for large-scale testing by facilitating the external loading of test data and enhancing maintainability.

Benefits:

• Faster test execution
• Easier maintenance
• Reusable across multiple test cases
• Supports data-driven testing strategies

Step 1: Create a fixture file

 
In `/cypress/fixtures/newsItems.json`, save sample expected news data:
 [
  {
    "title": "Company achieves record profits",
    "year": "2024",
    "type": "PRESS RELEASES",
    "business": "Finance"
  },
  {
    "title": "New product launch announced",
    "year": "2024",
    "type": "PRESS RELEASES",
    "business": "Tech"
  }
  // ... add 1000+ items
 ]

Step 2: Write a custom Cypress command

// Adds a custom Cypress command called scrollToLastNews that accepts newsPom (the Page Object Model for the news page).
 Cypress.Commands.add("scrollToLastNews", (newsPom) => {
// Records the starting time so we can calculate how long the scrolling takes.
  const startTime = new Date().getTime();
// A flag to track whether we’ve reached the last news item.
  let isAtBottom = false;
// Defines a function (with the same name) that will perform the scrolling.
  function scrollToLastNews() {
// Accesses the browser’s window object.
    cy.window().then((win) => {
// Scrolls the window down by 100 pixels each time.
      win.scrollBy(0, 100);
// Selects the last news item element from the list on the page.
      newsPom
        .get_The_List_All_News()
        .last()
        .then(($el) => {
// Checks if the last news item is visible in the viewport.
          if (Cypress.dom.isVisible($el)) {
// Logs a message in the Cypress test runner.
            cy.log("Last news item is visible.");
            isAtBottom = true;
          }
        });
// Gets the current time (to check timeout).
      const currentTime = new Date().getTime();
// If we haven’t reached the bottom and timeout hasn’t been exceeded (500 seconds)...
      if (!isAtBottom && currentTime - startTime < 500000) {
// Wait for 2 seconds before scrolling again.
        cy.wait(2000);
// Recursively calls the function to scroll again.
        scrollToLastNews();
// f we haven’t reached the bottom and we ran out of time...
      } else if (!isAtBottom) {
// Log a failure message.
        cy.log("Failed to reach the last news item within the time limit.");
        throw new Error("Failed to reach the last news item within the time limit.");
// Throws an error to fail the test.
      }
    });
  }
 Calls the function immediately when the command is used.
  scrollToLastNews();
 });
 

Automating news filter selection and validation

 
it("TC005 ==> Verify that after selecting business, year option and press releases type then selected options should be visible in listing properly.", () => {
// Expected news type.
  const actualNewsType = "PRESS RELEASES";
// Expected business and year (randomly picked existing ones).
  const actualBusniessName = randomExistBusinessNews;
  const actualYearText = randomExistYearNews;
  cy.wait(2000)
// Click the news link in the header, forcing it if hidden.
  headerPom.news_lnk().click({ force: true });
  cy.wait(2000)
// Click the business filter dropdown.
  newsPom.busniess_Dropdown().click({ force: true });
  cy.wait(2000)
// Select a business option from dropdown and click it.
  newsPom.select_Busniess_Option_From_Dropdown(randomExistBusinessNews).click({ force: true });
  cy.wait(2000)
// Click the year filter dropdown.
  newsPom.year_Dropdown().click({ force: true });
  cy.wait(2000)
// Select a year option from dropdown and click it.
  newsPom.select_Year_Option_From_Dropdown(randomExistYearNews).click({ force: true });
  cy.wait(2000)
// Click the “Press Releases” button.
  newsPom.press_Releases_btn().click({ force: true });
  cy.wait(2000)
// Call the custom command to scroll to the last news item.
  cy.scrollToLastNews(newsPom);
  cy.wait(2000)
// Verify that all news type tags include the expected type.
  cy.verifyTagsIncludeType(newsPom.get_newType_Tags_From_List, actualNewsType);
// Verify that all business tags match the expected business.
  cy.verifyBusinessTags(newsPom.get_Business_Tags_From_List, actualBusniessName);
// Verify that all year tags match the expected year.
  cy.verifyYearTags(newsPom.get_Year_Tags_From_List, actualYearText);
 });

August Infotech is a digital solutions provider, specializing in automation testing, web and software development, and scalable enterprise solutions. With expertise in Cypress, Selenium, and other modern test automation tools, we help businesses achieve faster time-to-market with high-quality digital products.