<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.10.0</li>
<li>Operating System: Linux OpenSUSE Leap 15.2</li>
<li>Node.js version: 14.16.0</li>
<li>Browser: Chromium</li>
</ul>


<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Help us help you! Put down a short code snippet that illustrates your bug and<br>
that we can run and debug locally. For example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  test('can we export it to PDF?', async () =&gt; {
    const [popup] = await Promise.all([page?.waitForEvent('popup'), page.click('button:has-text(&quot;Export as PDF&quot;)')]);

    await popup.waitForNavigation({
      waitUntil: 'networkidle',
      timeout: 5000,
    });

    expect(await popup.url().startsWith('blob')).toBeTruthy();
  });"><pre class="notranslate">  <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'can we export it to PDF?'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">popup</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">all</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s1">page</span><span class="pl-kos">?.</span><span class="pl-en">waitForEvent</span><span class="pl-kos">(</span><span class="pl-s">'popup'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">'button:has-text("Export as PDF")'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">await</span> <span class="pl-s1">popup</span><span class="pl-kos">.</span><span class="pl-en">waitForNavigation</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">waitUntil</span>: <span class="pl-s">'networkidle'</span><span class="pl-kos">,</span>
      <span class="pl-c1">timeout</span>: <span class="pl-c1">5000</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-s1">popup</span><span class="pl-kos">.</span><span class="pl-en">url</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-s">'blob'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeTruthy</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">Basically, this script clicks a button which opens a new tab with a <code class="notranslate">blob:https://URL_EXAMPLE_OF_PDF</code> of a PDF. When it's in non-headless mode, you can see it and it works. Tests pass. When it's in headless mode, the test fails like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    TimeoutError: page.waitForNavigation: Timeout 5000ms exceeded.
    =========================== logs ===========================
    waiting for navigation until &quot;networkidle&quot;
    ============================================================
    Note: use DEBUG=pw:api environment variable to capture Playwright logs.

      at node_modules/playwright/lib/client/waiter.js:49:51
      at Waiter.waitForPromise (node_modules/playwright/lib/client/waiter.js:57:28)
      at node_modules/playwright/lib/client/frame.js:120:36
      at Frame._wrapApiCall (node_modules/playwright/lib/client/channelOwner.js:77:28)"><pre class="notranslate"><code class="notranslate">    TimeoutError: page.waitForNavigation: Timeout 5000ms exceeded.
    =========================== logs ===========================
    waiting for navigation until "networkidle"
    ============================================================
    Note: use DEBUG=pw:api environment variable to capture Playwright logs.

      at node_modules/playwright/lib/client/waiter.js:49:51
      at Waiter.waitForPromise (node_modules/playwright/lib/client/waiter.js:57:28)
      at node_modules/playwright/lib/client/frame.js:120:36
      at Frame._wrapApiCall (node_modules/playwright/lib/client/channelOwner.js:77:28)
</code></pre></div>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.10.0</li>
<li>Operating System: MacOS 11.3</li>
<li>Node.js version: 15.11.0</li>
<li>Browser: Chromium (works fine w/ Firefox)</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<ol dir="auto">
<li>Create the following HTML file in your local webserver's DocumentRoot:</li>
</ol>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a href=&quot;test.pdf&quot; target=&quot;_blank&quot;&gt;Link to PDF file&lt;/a&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">test.pdf</span>" <span class="pl-c1">target</span>="<span class="pl-s">_blank</span>"<span class="pl-kos">&gt;</span>Link to PDF file<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span></pre></div>
<ol start="2" dir="auto">
<li>
<p dir="auto">Put a PDF file with the name "test.pdf" in the same directory.</p>
</li>
<li>
<p dir="auto">Run the following PW code:</p>
</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { chromium } = require('playwright');

(async () =&gt; {
  const browser = await chromium.launch({
    headless: true,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setViewportSize({
    width: 1200,
    height: 1200,
  });

  await page.goto('localhost/a.html');

  const [pagePDF] = await Promise.all([
    context.waitForEvent('page'),
    await page.click('text=Link to PDF file'),
  ]);

  await pagePDF.waitForLoadState();
  console.log('Load state reached.');
  await browser.close();
})();"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> chromium <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'playwright'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">headless</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setViewportSize</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">width</span>: <span class="pl-c1">1200</span><span class="pl-kos">,</span>
    <span class="pl-c1">height</span>: <span class="pl-c1">1200</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'localhost/a.html'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">pagePDF</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">all</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
    <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">waitForEvent</span><span class="pl-kos">(</span><span class="pl-s">'page'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">'text=Link to PDF file'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">await</span> <span class="pl-s1">pagePDF</span><span class="pl-kos">.</span><span class="pl-en">waitForLoadState</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Load state reached.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">After 30 seconds you will get the following error message:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/[...]/node_modules/playwright/lib/client/waiter.js:57
            const result = await Promise.race([promise, ...this._failures]);
                           ^
TimeoutError: page.waitForLoadState: Timeout 30000ms exceeded.
=========================== logs ===========================
  &quot;networkidle&quot; event fired
============================================================
Note: use DEBUG=pw:api environment variable to capture Playwright logs.
    at /[...]/node_modules/playwright/lib/client/waiter.js:49:51
    at Waiter.waitForPromise (/[...]/node_modules/playwright/lib/client/waiter.js:57:28)
    at /[...]/node_modules/playwright/lib/client/frame.js:150:13
    at Frame._wrapApiCall (/[...]/node_modules/playwright/lib/client/channelOwner.js:77:28)

Process finished with exit code 1"><pre class="notranslate">/[...]/node_modules/playwright/lib/client/waiter.js:57
            const result = await Promise.race([promise, ...this._failures])<span class="pl-k">;</span>
                           ^
TimeoutError: page.waitForLoadState: Timeout 30000ms exceeded.
=========================== logs ===========================
  <span class="pl-s"><span class="pl-pds">"</span>networkidle<span class="pl-pds">"</span></span> event fired
============================================================
Note: use DEBUG=pw:api environment variable to capture Playwright logs.
    at /[...]/node_modules/playwright/lib/client/waiter.js:49:51
    at Waiter.waitForPromise (/[...]/node_modules/playwright/lib/client/waiter.js:57:28)
    at /[...]/node_modules/playwright/lib/client/frame.js:150:13
    at Frame._wrapApiCall (/[...]/node_modules/playwright/lib/client/channelOwner.js:77:28)

Process finished with <span class="pl-c1">exit</span> code 1</pre></div>
<p dir="auto">The expected behavior is instead to get the following console log messages:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Load state reached.

Process finished with exit code 0"><pre class="notranslate">Load state reached.

Process finished with <span class="pl-c1">exit</span> code 0</pre></div>
<p dir="auto">The above code works fine when run with Chromium in headful mode or when run with Firefox either in headless or headful mode.</p>