Navigate trough SPA inside a test

[zecka]

Hello,

I have a website built with Next.js. Occasionally, a bug occurs during certain page transitions (the initial loading is fine).

To cover this type of bug, I would like to create a test scenario for a random user journey on my site.

In short, I want the homepage to be the entry point, then click on a random internal link, wait for the page to change, and check that there is no error message (I do this by checking for the presence of a specific div ID that exists on all pages but not on error pages). Then, click on another internal link on the page, check again that there is no error message, and so on, for X iterations.

I’m not very familiar with the asynchronous aspect of Cypress.

Here’s what I’ve done so far.

First, I created a command that retrieves a random internal link on the page:

Cypress.Commands.add('getRandomInternalLink', () => {
  const env = Cypress.env();
  return cy.location('pathname').then(currentPath => {
    const links: HTMLElement[] = [];
    const hrefSet = new Set<string>();
    const $links = Cypress.$('a');
    for (const link of $links) {
      const href = link.getAttribute('href') as string;
      // Check if the link is internal and not the current page
      if (!hrefSet.has(href) && (href.startsWith(env.baseUrl) || href.startsWith('/'))) {
        const urlPath = new URL(href, Cypress.config().baseUrl).pathname;
        if (urlPath !== currentPath) {
          hrefSet.add(href);
          links.push(link);
        }
      }
    }
    // Wrap the random link to be returned as a Cypress chainable
    return cy.wrap(links[Math.floor(Math.random() * links.length)]);
  });
});

And here’s my test scenario:

it('Navigate to random internal page', () => {
    cy.visit('/en');
    cy.getRandomInternalLink().invoke('attr', 'href').should('not.be.empty');
    const link = cy.getRandomInternalLink();
    link.click({ force: true });
    // Here I want to wait for the page change before clicking on another internal link

    cy.on('url:changed', () => {
      cy.get('#themeWrapper').should('be.visible');
    });
  });

I’m really not sure if my approach is correct.

Additionally, I don't quite understand how to wait for the page change before proceeding with another click.

I already try to check url but some internal link have redirection so this will not work

link.click({ force: true });
cy.location('pathname').should('eq', new URL(href, Cypress.config().baseUrl).pathname);
cy.get('#themeWrapper').should('be.visible');