<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.35.1]</li>
<li>Operating System: [macOS 13.2]</li>
<li>Browser: [All]</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul dir="auto">
<li>[/] I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// loginPage fixture file
  async setExtraHTTPHeaders(): Promise&lt;void&gt; {
    await this.page.setExtraHTTPHeaders({ &quot;Client-Id&quot;: &quot;&quot;, &quot;Client-Secret&quot;: &quot;&quot; });
    await this.page.route(/(https:\/\/(.*))/, (route) =&gt; {
      const headers = route.request().headers();
        headers[&quot;token&quot;] = process.env.token ?? &quot;&quot;;
        headers[&quot;secret&quot;] = process.env.secret ?? &quot;&quot;;
      route.continue({ headers });
    });
  }

  async navigateTo(path?: string): Promise&lt;void&gt; {
    await this.setExtraHTTPHeaders();
    await this.page.goto(&quot;https://www.google.com&quot;)
  }

// test file
  test(&quot;@GCC-demo ABC&quot;, async ({ loginPage }) =&gt; {
    test.setTimeout(10 * 1000);
    await test.step(&quot;demo1&quot;, async () =&gt; {
      await loginPage.navigateTo();
    });
  });"><pre class="notranslate"><span class="pl-c">// loginPage fixture file</span>
  <span class="pl-k">async</span> <span class="pl-s1">setExtraHTTPHeaders</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-v">Promise</span><span class="pl-c1">&lt;</span><span class="pl-k">void</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">await</span> <span class="pl-s1">this</span><span class="pl-kos">.</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setExtraHTTPHeaders</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-s">"Client-Id"</span>: ""<span class="pl-kos">,</span> <span class="pl-s">"Client-Secret"</span>: "<span class="pl-s">" });</span>
<span class="pl-s">    await this.page.route(/(https:\/\/(.*))/, (route) =&gt; {</span>
<span class="pl-s">      const headers = route.request().headers();</span>
<span class="pl-s">        headers["</span><span class="pl-s1">token</span><span class="pl-s">"] = process.env.token ?? "</span><span class="pl-s">";</span>
<span class="pl-s">        headers["</span><span class="pl-s1">secret</span><span class="pl-s">"] = process.env.secret ?? "</span><span class="pl-s">";</span>
<span class="pl-s">      route.continue({ headers });</span>
<span class="pl-s">    });</span>
<span class="pl-s">  }</span>
<span class="pl-s"></span>
<span class="pl-s">  async navigateTo(path?: string): Promise&lt;void&gt; {</span>
<span class="pl-s">    await this.setExtraHTTPHeaders();</span>
<span class="pl-s">    await this.page.goto("</span><span class="pl-c1">https</span>:<span class="pl-c">//www.google.com")</span>
  <span class="pl-kos">}</span>

<span class="pl-c">// test file</span>
  <span class="pl-s1">test</span><span class="pl-kos">(</span>"@<span class="pl-c1">GCC</span><span class="pl-c1">-</span><span class="pl-s1">demo</span> <span class="pl-c1">ABC</span>"<span class="pl-kos">,</span> <span class="pl-s1">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> loginPage <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-c1">10</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">"demo1"</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">await</span> <span class="pl-s1">loginPage</span><span class="pl-kos">.</span><span class="pl-en">navigateTo</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><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>[Run the test]</li>
<li>Please refer to related <a href="https://github.com/microsoft/playwright/issues/22786" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/22786/hovercard">issue</a></li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
It should not display the route.continue outside of the test step<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/17619539/247895542-bd0a5dd5-f1f4-417c-b2e7-2ba68cfac561.png"><img width="370" alt="image" src="https://user-images.githubusercontent.com/17619539/247895542-bd0a5dd5-f1f4-417c-b2e7-2ba68cfac561.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Actual</strong><br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/17619539/247895064-72783022-67c7-45fd-bc8b-a1457dab812f.png"><img width="335" alt="image" src="https://user-images.githubusercontent.com/17619539/247895064-72783022-67c7-45fd-bc8b-a1457dab812f.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.23.1</li>
<li>Operating System: Linux (ubuntu)</li>
<li>Node.js version: 14.19.1</li>
<li>Browser: Chromium</li>
</ul>


<p dir="auto"><strong>Code Snippet</strong><br>
Repro repo: <a href="https://github.com/thdk/playwright-headless-popup">https://github.com/thdk/playwright-headless-popup</a></p>
<p dir="auto"><strong>Describe the bug</strong><br>
I think this issue is a duplicate of closed issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1149466353" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/12342" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/12342/hovercard" href="https://github.com/microsoft/playwright/issues/12342">#12342</a></p>
<p dir="auto">The problem seems to be that popups won't open in headless mode when they are not initiated from a <code class="notranslate">button</code> element.</p>
<p dir="auto">This is probably by design. So I'm mainly writing this here as documentation.</p>
<p dir="auto"><strong>If your popup is not opening in headless playwright tests:</strong><br>
Make sure the click event is on a <code class="notranslate">button</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button onClick={() =&gt; openPopup();}&gt;click me&lt;/button&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">openPopup</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>click me<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Playwright seems not to open the popup in headless mode when a <code class="notranslate">div</code> element is clicked.</p>