[Question] Removing routes from page._routes

[andyricchuiti]

currently using playwright to test api responses from a button click, but once I establish a page.route(...) for a specific url, that handler can never be overridden by future page.route(...) with the same URLs on that page instance. so for now, in my afterEach, i have this: (is this the right way to have a new route handler override for the same route url?):

page._routes.pop();
await page._delegate.updateRequestInterception();

So my tests currently look like this:

describe('submit info', () => {
    let infoBtn;
    beforeAll(async () => {
      infoBtn = await page.$(infoBtnSelector);
    });
    afterEach(async () => {
      page._routes.pop();
      await page._delegate.updateRequestInterception();
    });
    it('should show error-message when api call fails', async () => {
      const handler = sharedUtils.routeHandler(API_URLS.PERSIST_INFO, {status: 504});
      await page.route(`${BASE_URL}${API_URLS.PERSIST_INFO}`, handler);
      await infoBtn.click();
      await page.waitForResponse(`${BASE_URL}${API_URLS.PERSIST_INFO}`);
      expect(await sharedUtils.getText(await page.$(ERR_MSG_SELECTOR))).toEqual(VALIDATION_TEXTS.API_ERR);
    });
    it('should show error-message when api is successful but persist fails', async () => {
      const handler = sharedUtils.routeHandler(API_URLS.PERSIST_INFO, {status: 200, body: JSON.stringify({isOperationSuccessful: false})});
      await page.route(`${BASE_URL}${API_URLS.PERSIST_INFO}`, handler);
      await infoBtn.click();
      await page.waitForResponse(`${BASE_URL}${API_URLS.PERSIST_INFO}`);
      expect(await sharedUtils.getText(await page.$(ERR_MSG_SELECTOR))).toEqual(VALIDATION_TEXTS.API_ERR);
    });
    it('should go to finished when persist info succeeds', async () => {
      const handler = sharedUtils.routeHandler(API_URLS.PERSIST_INFO, {status: 200, body: JSON.stringify({isOperationSuccessful: true})});
      await page.route(`${BASE_URL}${API_URLS.PERSIST_INFO}`, handler);
      await infoBtn.click();
      await page.waitForNavigation();
      expect(page.url()).toContain('finished');
    });
  });

is there a way for page.route to look for overlapping urls and take the newest handler?

[pavelfeldman]

Are you using jest-playwright? We should make sure it creates new browser context for every test. That way you would not be affected by the state of the previous test run in the subsequent one.

[andyricchuiti]

yeah! i am using jest-playwright, but i think a new browser context for every test may be a good option instead of the solution. Since we're porting over tests from puppeteer, some tests are written on top of each other. i think it'd make tests go exponentially longer (though, i get it, more scalable) if you have to "start" from scratch for each one, especially if you did field validation tests that each input would be starting from a new browsing context.

[pavelfeldman]

There is now wait to unroute.

[aesyondu]

Leaving this here for reference:

https://github.com/microsoft/playwright/blob/master/docs/api.md#browsercontextunrouteurl-handler

EDIT: Also, when passing RegExp to url, make sure to pass the same object.

THIS WORKS

const myroute = /myroute/
await page.route(myroute, handler)
await page.unroute(myroute)

THIS DOES NOT WORK

await page.route(/myroute/, handler)
await page.unroute(/myroute/) // WRONG

This is because /asdf/ != /asdf/.

[stefanteixeira]

@aesyondu I owe you a beer, I was struggling with exactly that until I found your answer 😄
Thanks A LOT!