<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.34]</li>
<li>Operating System: [macOS 13.2]</li>
<li>Browser: [Chromium]</li>
<li>Other info:</li>
</ul>
<p dir="auto">the uta site is:</p>
<p dir="auto">[https://github.com/your_profile/playwright_issue_title]](<a href="https://bonigarcia.dev/selenium-webdriver-java/drag-and-drop.html" rel="nofollow">https://bonigarcia.dev/selenium-webdriver-java/drag-and-drop.html</a>)</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.33</li>
<li>Operating System: Windows 10</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Issue Description</h3>
<p dir="auto">I want to verify the contents of tips when hovers over some locators.</p>
<ul dir="auto">
<li>Headed Mode
<ul dir="auto">
<li>Locator is visible without scrolling: √</li>
<li>Locator needs scrolling &amp; depends on hover() itself to <code class="notranslate">scrollIntoView</code>: ×</li>
<li>Locator needs scrolling &amp; manually trigger <code class="notranslate">scrollIntoView</code> in advance: √</li>
</ul>
</li>
<li>Headless Mode
<ul dir="auto">
<li>First condition above: √</li>
<li>Last two items above: ×</li>
</ul>
</li>
</ul>
<p dir="auto">Why the 3rd condition worked in Headed while not worked in Headless? How the <code class="notranslate">scrollIntoVieW</code> method works?</p>
<p dir="auto">The element needs to be hovered is <strong>a bit special</strong>, it may not depend on :hover, having tested in Chrome DevTools: added force state to it but the content didn't appeared too, so it maybe binds to other listeners.</p>
<p dir="auto">I wonder if there is a solution to deal with such condition? Could <code class="notranslate">locator.hover()</code>continuously triggers until <code class="notranslate">expect()</code> statements to be done?</p>
<h3 dir="auto">Source code</h3>
<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="await page.getBytext('other locator nearby to trigger scrollIntoView').click();
await expect(page.getByText('${tip}')).toHaveCount(0);
await page.locator('xxx-label:visible').locator('.tool-tip').hover();
await expect(page.getByText('${tip}')).toHaveCount(1);"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getBytext</span><span class="pl-kos">(</span><span class="pl-s">'other locator nearby to trigger scrollIntoView'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</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-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByText</span><span class="pl-kos">(</span><span class="pl-s">'${tip}'</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">0</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">locator</span><span class="pl-kos">(</span><span class="pl-s">'xxx-label:visible'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.tool-tip'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">hover</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-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByText</span><span class="pl-kos">(</span><span class="pl-s">'${tip}'</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">1</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>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">All passed</p>
<p dir="auto"><strong>Actual</strong></p>
<ul dir="auto">
<li>Headed Mode
<ul dir="auto">
<li>Locator is visible without scrolling: √</li>
<li>Locator needs scrolling &amp; depends on hover() itself to <code class="notranslate">scrollIntoView</code>: ×</li>
<li>Locator needs scrolling &amp; manually trigger <code class="notranslate">scrollIntoView</code> in advance: √</li>
</ul>
</li>
<li>Headless Mode
<ul dir="auto">
<li>First condition above: √</li>
<li>Last two items above: ×</li>
</ul>
</li>
</ul>