<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>GOOD Playwright Version: 1.29.0</li>
<li>BAD Playwright Version: 1.35.1</li>
<li>Operating System: Mac</li>
<li>Extra: N/A</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Minimal repro:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await page.setContent(`&lt;button style=&quot;display:contents&quot;&gt;DISPLAY CONTENTS&lt;/button&gt;`)
await expect(page.getByRole('button')).toBeVisible()"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setContent</span><span class="pl-kos">(</span><span class="pl-s">`&lt;button style="display:contents"&gt;DISPLAY CONTENTS&lt;/button&gt;`</span><span class="pl-kos">)</span>
<span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'button'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeVisible</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">Elements that use <code class="notranslate">display: contents;</code> are no longer deemed visible, breaking a lot of our selectors when upgrading. I've found similar issues, however the exact reproduction described in this issue seems to be working fine: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1094592126" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/11202" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/11202/hovercard" href="https://github.com/microsoft/playwright/issues/11202">#11202</a></p>
<p dir="auto">This problem seems specific to getByRole.</p>
<p dir="auto">I also was able to reproduce this issue in 1.32.0.</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>GOOD Playwright Version: ? (Fixed less than year ago here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1279838184" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/15034" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/15034/hovercard" href="https://github.com/microsoft/playwright/issues/15034">#15034</a>)</li>
<li>BAD Playwright Version: 1.34.3</li>
<li>Operating System: Mac</li>
<li>Extra: None</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">React code</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export function App(props) {
  return (
    &lt;div className='App'&gt;
      &lt;h1&gt;Hello React.&lt;/h1&gt;
      &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;

      &lt;Table /&gt;
    &lt;/div&gt;
  );
}


const contentsStyle = {
  color: &quot;red&quot;,
  display: &quot;contents&quot;
};

function Table() {
  return (
    &lt;div role=&quot;table&quot;&gt;
      &lt;div role=&quot;row&quot; style={contentsStyle}&gt;
        &lt;div role=&quot;cell&quot;&gt;
          &lt;p&gt;Cell content&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div role=&quot;row&quot;&gt;
        &lt;div role=&quot;cell&quot;&gt;
          &lt;p&gt;Cell content&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">'App'</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Hello React.<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>Start editing to see some magic happen!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-ent">Table</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</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">contentsStyle</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">color</span>: <span class="pl-s">"red"</span><span class="pl-kos">,</span>
  <span class="pl-c1">display</span>: <span class="pl-s">"contents"</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-v">Table</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"table"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"row"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">contentsStyle</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"cell"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Cell content<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"row"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"cell"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Cell content<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Test code to reproduce:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { test, expect } from &quot;@playwright/test&quot;;

test(&quot;locate table rows&quot;, async ({ page }) =&gt; {
  await page.goto(url);
  await expect(page.getByRole(&quot;row&quot;)).toHaveCount(2);
});
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span><span class="pl-kos">,</span> <span class="pl-s1">expect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@playwright/test"</span><span class="pl-kos">;</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">"locate table rows"</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <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">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">"row"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveCount</span><span class="pl-kos">(</span><span class="pl-c1">2</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">The <code class="notranslate">page.getByRole('row')</code> can not see element with style <code class="notranslate">display: "contents";</code> applied.</p>
<p dir="auto">In the code example above, there are two rows in table, one of them has no styles and one of them has <code class="notranslate">display: "contents";</code>. The test can locate only one of these two rows.</p>
<p dir="auto">It works fine in Webkit, but not in Chrome and Firefox (see screenshot of test run below).</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1619732/243371387-f5ea3fe5-b672-453e-872a-60e20fa88ed2.png"><img src="https://user-images.githubusercontent.com/1619732/243371387-f5ea3fe5-b672-453e-872a-60e20fa88ed2.png" alt="Screenshot 2023-06-05 at 15 44 32" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1619732/243371398-3eb34b79-3439-452c-9183-0ffcfd1e95ab.png"><img src="https://user-images.githubusercontent.com/1619732/243371398-3eb34b79-3439-452c-9183-0ffcfd1e95ab.png" alt="Screenshot 2023-06-05 at 15 44 43" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1619732/243371405-37d572d9-0343-4468-8c29-08dbdf0a6d56.png"><img src="https://user-images.githubusercontent.com/1619732/243371405-37d572d9-0343-4468-8c29-08dbdf0a6d56.png" alt="Screenshot 2023-06-05 at 15 44 52" style="max-width: 100%;"></a></p>