Cannot intercept outgoing AJAX request from page using Testcafe

Question

I am attempting to use TestCafe for a client-side javascript library, and I am unable to capture any outgoing AJAX requests for on the load of a testing page through the counting mechanism.

My attempts involve using the RequestLogger object from this library involve setting up the first parameter using the regex /\.org/, to capture any outgoing tile request which uses the .org suffix. I believe this makes sense, as all the outgoing requests go to openstreetmap.org with the aim of grabbing png map tiles.

The core of my test looks like the following:

import { RequestLogger } from "testcafe";

fixture`Hello World - Leaflet`.page`http://localhost:8080`;

const logger = RequestLogger(/org/, {
  logRequestHeaders: true,
  logResponseHeaders: true
});

test("Test if there's an outgoing network request...", async t => {
  // Do something...
  await t
    .wait(5000)
    .expect(logger.count(() => true))
    .gt(0, "Must detect more than zero outgoing requests to openstreetmap");
});

Is there something I am missing in order to capture the proper outgoing count of AJAX requests?

If it helps, I've made a repo which contains this problem, set up in a way that people can attempt to solve without configuration:

Answer 1

Thank you for your detailed description.

You need to attach the logger to your test/fixture. You can also attach and detach hooks during test run using the t.addRequestHooks and t.removeRequestHooks methods.

In the test code, I attached the logger hook to the test:

import { RequestLogger } from "testcafe";

fixture`Hello World - Leaflet`.page`http://localhost:8080`;

const logger = RequestLogger(/org/);

test
    .requestHooks(logger)
    ("Test if there's an outgoing network request...", async t => {
        await t
            .wait(5000)
            .expect(logger.count(() => true))
            .gt(0, "Must detect more than zero outgoing requests to openstreetmap");
    });