On a webpage I have a list of images and documents. Images comes from different server and have source /img/image/** and documents comes from my server and have source like /content/docs/*

The problem is, in Cypress (typescript), I want to intercept for images OR documents, as on the page can be only images, or only documents, or even both in random order.

I want to be sure, at least one asset is loaded.

First I tried:

      cy.intercept({
        method: 'GET',
        url: //content/docs/.*|/img/image/.*/,
      }).as('Thumbnail');
cy.visit(URL);
 cy.wait('@Thumbnail');

But no request even occurs this way.

If I just use

 cy.intercept('GET', '/img/image/**').as('Thumbnail');
cy.visit(URL);
     cy.wait('@Thumbnail');

This works, but of course if only images are present.

I also tried something like this:

export const waitForFirstAsset = (): void => {
  let assetIntercepted = false;

  // Create a helper function to wait for the first request
  const waitForRequest = (): void => {
    // Wait for either request
    cy.wait(['@imageRequest', '@documentRequest'], { timeout: 10000 }).then(
      (interceptions): void => {
        if (!assetIntercepted) {
          assetIntercepted = true;

          const interceptedRequest = interceptions[0];
        
        }
      },
    );
  };

  // Call the waitForRequest function
  waitForRequest();
};


 cy.intercept('GET', '/img/image/**').as('imageRequest');
    cy.intercept('GET', '/content/docs/**').as('documentRequest');

    // Visit the page
    cy.visit(URL);

    // Wait for the first asset request (either image or document)
    waitForFirstAsset();

This again works for images, however it intercepts all images, not just the first, but if no documents are on page, it fails with waiting for documentRequest.

Any idea, how can I just intercept for the FIRST loaded image or document, no need to check for all. Just want to be sure, at least one is loaded.