I am looking to migrate my test suite from Cypress to Playwright. I have hit a hurdle as I came to API requests.

Within my test suite, I want to wait for network request to be pleted and return a 200 response, before moving onto the next action.

My issue is the network request url contains a dynamic value, previously in Cypress I have '*' in place as a wildcard, what is the alternative within Playwright?

I have the following cy.intercept in my code:

cy.intercept('GET',`${apiUrl}/employee/*/information`).as('GETemployeeInformation');

I call this intercept with cy.wait in my test suite before proceeding with the test steps, I have tried to replicate this in Playwright with the following:

async isSignedIn() {
    await this.page.waitForResponse(response => response.url().includes("/employee/*/information") && response.status() === 200);
  }

I am looking to migrate my test suite from Cypress to Playwright. I have hit a hurdle as I came to API requests.

Within my test suite, I want to wait for network request to be pleted and return a 200 response, before moving onto the next action.

My issue is the network request url contains a dynamic value, previously in Cypress I have '*' in place as a wildcard, what is the alternative within Playwright?

I have the following cy.intercept in my code:

cy.intercept('GET',`${apiUrl}/employee/*/information`).as('GETemployeeInformation');

I call this intercept with cy.wait in my test suite before proceeding with the test steps, I have tried to replicate this in Playwright with the following:

async isSignedIn() {
    await this.page.waitForResponse(response => response.url().includes("/employee/*/information") && response.status() === 200);
  }

• javascript
• automation
• cypress
• playwright

• 1 It supports regex, so this will work: response.url().match(/\/employee\/.*\/information/) – candre Commented Nov 24, 2023 at 17:35

3 Answers 3

The example given here Network events seems to be pretty close to the Cypress pattern. There may be better patterns in Playwright, but if you are converting from Cypress to Playwright I'd try this.

// Use a glob URL pattern. Note no await.
const responsePromise = page.waitForResponse('**/api/fetch_data');
await page.getByText('Update').click();
const response = await responsePromise;

Since the glob pattern is allowed in Playwright, I'm wondering if your issue es from using response.url() to make the match. In Cypress the match is against request.url not response.url.

I would do something like:

// Start waiting for response with given url before action (click)
  const [response] = await Promise.all([
    page.waitForResponse('https://some.example./myData.json'),
    page.locator(SUBMIT_BUTTON).click(),
  ]);
  expect(response.status()).toBe(200);
});

In plement of @burkhalter answer, you can replace cy.intercept() while overriding data like this :

await this.page.route('**/yourUrl**', async (route) => {
const modifiedHeaders = {
   ...request.headers(),
   // Update your headers as wanted.
};
// Get and modify the request body
const requestBody = request.postDataJSON() || {};
// Update your body as wanted.
// Continue with modified request
const fetchedResponse = await route.fetch({
   headers: modifiedHeaders,
   postData: JSON.stringify(requestBody)
});
await route.fulfill({
   status: fetchedResponse.status(),
   headers: fetchedResponse.headers(),
   body: await fetchedResponse.text()
});
});

Or you can do like this too if you don't need to handle bouncing call.

await page.route('**/yourUrl**', async (route, request) => {
    const headers = {
        ...request.headers(),
        // Update your headers if needed.
    };
    const postData = {
        ...JSON.parse(request.postData() || '{}'),
        // Your body changes if needed.
    };

    await route.continue({
        headers,
        postData: JSON.stringify(postData),
    });
});