Why won't cy.intercept/cy.wait catch my HTTP request?

Question

I am attempting to write a Cypress (v13.1.0) unit test and use cy.intercept to catch an HTTP GET call. This GET call happens after the user presses a button. Based on reading documentation, I setup my test in the following order: cy.intercept-{userActionHere}-cy.wait. However, the GET call never gets intercepted.

Example:

describe("API Tests", () => {
  it("get copy-style", () => {
    cy.intercept("GET", "http://localhost:7771/api/agent/report/copy-style").as("getStyle");

    openReport(undefined, testReport_demo);
    cy.visit("/#/");

    cy.get("rec-list").find('[data-cy="acceptButton"]').click();

    cy.wait("@getStyle").then((interception) => {
      console.log("The @getStyle result: ", interception);
    });
  });
});

Results in:

Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: getStyle. No request ever occurred.

I've also tried the following with the same result of no interception:

• Catch any HTTP request (e.g., cy.intercept("**")) but it still is not intercepted.
  • In this case a few GET calls for some image assets were caught, but these are irrelevant to what I want. None of my calls to /api/agent/** get captured.
• Use various path variations in cy.intercept (e.g., "api/agent/report/copy-style", "api/agent/**", "**api**", etc.).
• Moving the wait before the button click.
• Increase the wait timeout (e.g., cy.wait("@getStyle", {timeout: 30000})
• Use cy.pause() to manually click the button in the UI before the wait.
• Manually click the button during cy.wait().

In all cases I can see the HTTP call being made via WireShark and/or in the browser's Network tab and the correct response data comes back, but Cypress isn't seeing it. Saw a lot of posts mentioning cy.server and cy.route but those appear to be deprecated. Haven't found a post yet that has helped me.

Answer 1

The real issue turned out to be the --proxy-bypass-list switch. Unbeknownst to me, the following code was in the cypress.config.ts file:

setupNodeEvents(on, config) {
      on("before:browser:launch", (browser, launchOptions) => {

        logHandler(browser, launchOptions);

        launchOptions.args = launchOptions.args.map((arg) => {
          if (arg.startsWith("--proxy-bypass-list")) {
            return "--proxy-bypass-list=<-loopback>,http://*localhost*:7771,ws://*localhost*:7771,ws://127.0.0.1:7771";
          }

          return arg;
        });

        return launchOptions;
      });
    }

For example, If I used 127.0.0.1 rather than localhost, my intercept worked. If the address is part of the proxy bypass list then Cypress fails to see the call and therefore won't intercept. This explains why I could see all the traffic occurring in the browser's developer tools but Cypress wouldn't catch it.

Answer 2

It think your various attempts at wildcard matching are not correct

• cy.intercept("**") -> cy.intercept("*") for catch-all

When using ** for a path segment make sure the path separator / is included:

• **/api/agent/report/copy-style for domain wildcard

• **/api/agent/**/* or /api/agent/**/* for any api/agent call

• **/api/**/* or /api/**/* for any api

Also try Regexp

cy.intercept(/\/copy-style/)