[BUG] Mocking the server in chromium only works if server is reachable

[adi-wan]

Context:

• Playwright Version: 1.0.1
• Operating System: macOS Catalina Version 10.15.4
• Node version: 12.6.0
• Browser: Chromium
• Extra: CodeceptJs used as an additional layer

Code Snippet

  async mockCars(): Promise<void> {
    await this.helpers.Playwright.page.route('**/cars?**', async route => {
      route.fulfill({
        contentType: 'application/json',
        headers: {'access-control-allow-origin': '*'},
        status: 200,
        body: JSON.stringify([ /* Some car objects */ ]),
      })
    })
  }

Describe the bug
First of all: Thank you for this absolutely amazing framework!
I am using Playwright together with CodeceptJs for functional and integration tests. For my integration tests I try to mock the server with Playwright. The snippet shows a brief example of this. But when using Chromium and not running an http server on the side that normally would receive these requests, this does not work. I get this error message:

› [Browser:Error] Failed to load resource: net::ERR_ADDRESS_UNREACHABLE
› [Browser:Error] JSHandle@error

When running an http server on the side, it works and the server does not receive any (http) requests. I also tried this with Firefox. Here everything works as expected. No need for running a server on the side.

[mxschmitt]

I tried to reproduce the issue and for me it is working as expected, full code:

const playwright = require("playwright");

(async () => {
  for (const browserType of ['chromium', 'webkit', 'firefox']) {
    const browser = await playwright[browserType].launch();
    const page = await browser.newPage();
    page.route('**/cars?**', async route => {
      route.fulfill({
        contentType: 'application/json',
        headers: { 'access-control-allow-origin': '*' },
        status: 200,
        body: JSON.stringify(["BMW", "Tesla"]),
      })
    })
    const resp = await page.evaluate(async () => await (await fetch("https://10.10.10.1/cars?type=foobar")).json())
    console.log(resp)
    await browser.close();
  }
})();

Interactive: https://try.playwright.tech/?s=trqt9

Could you try to use JSON.stringify on the body property for fulfilling the request? My guess is that you probably not passing there the serialised data. (another guess that the route pattern does not match)

[aslushnikov]

First of all: Thank you for this absolutely amazing framework!

@adi-wan thank you for the warm words!

But when using Chromium and not running an http server on the side that normally would receive these requests, this does not work. I get this error message:

@adi-wan I can't reproduce this either. Can you please share a full repro?

Here's my attempt:

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'webkit', 'firefox']) {
    const browser = await playwright[browserType].launch();
    const page = await browser.newPage();
    page.route('**/*.json', async route => {
      route.fulfill({
        contentType: 'application/json',
        headers: { 'access-control-allow-origin': '*' },
        status: 200,
        body: JSON.stringify(["BMW", "Tesla"]),
      })
    })
    await page.goto('https://thisissomenonexistentwebsite.com/cars.json');
    console.log(await page.evaluate(() => document.documentElement.innerHTML));

    await browser.close();
  }
})();

[pavelfeldman]

Closing as not-repeatable. Please feel free to reopen.