<p dir="auto">This issue is observed in Chromium .......as the browser window is limited and infinite scroll comes into action as we need to navigate down to the next screen to find the element.<br>
Onclick action is performed once the element is found.<br>
But the unstable condition is thrown in between these 2 events. Auto scrolling is by default enabled.<br>
This works fine in firefox browser. Below i will highlight the debugger code against firefox(works fine) vs chrome(does not work)</p>



<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: Version 1.35.1</li>
<li>Operating System: [macOS 13.2, etc.]</li>
<li>Browser: [All, Chromium]</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto">import { test, expect } from '@playwright/test';</p>
<p dir="auto">test('test', async ({ page }) =&gt; {<br>
await page.goto('<a href="https://qe.east.cbna.dev1.dev.aws.swacorp.com/" rel="nofollow">https://qe.east.cbna.dev1.dev.aws.swacorp.com/</a>');<br>
await page.goto('<a href="https://sso.fed.dev.aws.swacorp.com/as/authorization.oauth2?redirect_uri=https%3A%2F%2Fqe.east.cbna.dev1.dev.aws.swacorp.com%2Fcallback&amp;client_id=p501608&amp;response_type=code&amp;state=mxaSNWViPd&amp;scope=openid%20email%20profile%20address%20phone&amp;code_challenge=MLS4NB8jPuB2T-eF5UpbgiaB4kdfSIxi4GHP_w4fl94&amp;code_challenge_method=S256" rel="nofollow">https://sso.fed.dev.aws.swacorp.com/as/authorization.oauth2?redirect_uri=https%3A%2F%2Fqe.east.cbna.dev1.dev.aws.swacorp.com%2Fcallback&amp;client_id=p501608&amp;response_type=code&amp;state=mxaSNWViPd&amp;scope=openid%20email%20profile%20address%20phone&amp;code_challenge=MLS4NB8jPuB2T-eF5UpbgiaB4kdfSIxi4GHP_w4fl94&amp;code_challenge_method=S256</a>');<br>
await page.locator('#username').click();<br>
await page.locator('#username').fill('');<br>
await page.locator('#username').click();<br>
await page.locator('#username').fill('e14242');<br>
await page.locator('#password').click();<br>
await page.locator('#password').fill('pauoRD9H');<br>
await page.getByText('Submit').click();<br>
await page.goto('<a href="https://qe.east.cbna.dev1.dev.aws.swacorp.com/" rel="nofollow">https://qe.east.cbna.dev1.dev.aws.swacorp.com/</a>');<br>
await page.goto('<a href="https://qe.east.cbna.dev1.dev.aws.swacorp.com/dashboard" rel="nofollow">https://qe.east.cbna.dev1.dev.aws.swacorp.com/dashboard</a>');<br>
await page.getByTestId('card-button-IFVacationAuction').click();<br>
await page.getByTestId('tab-label-1').click();<br>
await page.getByTestId('cl-nav-link--1').click();<br>
await page.getByTestId('search-employeeId').click();<br>
await page.getByTestId('search-employeeId').fill('5050');<br>
await page.getByTestId('search-employeeId').press('Tab');<br>
await page.getByTestId('button-anchor').click();<br>
await page.getByRole('menuitem', { name: 'Update Accrual' }).click();<br>
await page.getByTestId('adjustedAccruedDays').click();<br>
await page.getByTestId('adjustedAccruedDays').fill('30');<br>
await page.getByTestId('textarea--adjustmentComment').click();<br>
await page.getByTestId('modal-save').click();<br>
await page.getByTestId('cl-nav-link--3').click();<br>
<strong>await page.getByTestId('actions-3').getByTestId('button-anchor').click();<br>
await page.getByRole('menuitem', { name: 'Re-award Base' }).click();</strong><br>
});</p>
<p dir="auto">When the code is run via playwright the application becomes unstable....here is the piece of code.. in the automation script for the above 2 lines highlighted in bold produced by playwright debugger.</p>
<p dir="auto">against Chrome - auto scrolling comes into picture and that intercept the click event.....<br>
LOG<br>
waiting for getByTestId('actions-7').getByTestId('button-anchor')<br>
locator resolved to &lt;button type="button" id="button-anchor" class="css-16nx…&gt;…<br>
attempting click action<br>
waiting for element to be visible, enabled and stable<br>
forcing action<br>
element is visible, enabled and stable<br>
scrolling into view if needed<br>
done scrolling<br>
performing click action<br>
click action done<br>
waiting for scheduled navigations to finish<br>
navigations have finished</p>
<p dir="auto">In this case the reaward-base sub menu is not available or visible. Although the same sub menu appears in the safari browser perfectly fine.<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/28334629/254282830-b1040856-79cc-4132-96e7-2498c39a9ac9.png"><img width="1728" alt="image" src="https://user-images.githubusercontent.com/28334629/254282830-b1040856-79cc-4132-96e7-2498c39a9ac9.png" style="max-width: 100%;"></a></p>
<p dir="auto">Above code in safari browser....works fine and this is in the logs</p>
<p dir="auto">locator.click<br>
TIME<br>
wall time:<br>
7/18/2023, 8:28:08 AM<br>
duration:<br>
16ms<br>
PARAMETERS<br>
locator:<br>
getByTestId('actions-7').getByTestId('button-anchor')<br>
strict:<br>
true<br>
force:<br>
true<br>
LOG<br>
waiting for getByTestId('actions-7').getByTestId('button-anchor')<br>
locator resolved to &lt;button type="button" id="button-anchor" class="css-16nx…&gt;…<br>
attempting click action<br>
waiting for element to be visible, enabled and stable<br>
forcing action<br>
element is visible, enabled and stable<br>
scrolling into view if needed<br>
done scrolling<br>
performing click action<br>
click action done<br>
waiting for scheduled navigations to finish<br>
navigations have finished..<br>
In this case the reaward-base sub menu is available - refer the screen shot below<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/28334629/254280905-947b6983-629c-4488-9d85-e008b018975d.png"><img width="1728" alt="image" src="https://user-images.githubusercontent.com/28334629/254280905-947b6983-629c-4488-9d85-e008b018975d.png" style="max-width: 100%;"></a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto">[https://github.com/your_profile/playwright_issue_title]</p>
<p dir="auto">or</p>
<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">defineConfig</span><span class="pl-kos">,</span> <span class="pl-s1">devices</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-k">export</span> <span class="pl-k">default</span> <span class="pl-en">defineConfig</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">projects</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'chromium'</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-kos">{</span> ...<span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">'Desktop Chrome'</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><span class="pl-kos">;</span></pre></div>
<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="it('should check the box using setChecked', async ({ page }) =&gt; {
  await page.setContent(`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should check the box using setChecked'</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">setContent</span><span class="pl-kos">(</span><span class="pl-s">`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`</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">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">check</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">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeChecked</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>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">[Describe expected behavior]</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">[Describe actual behavior]</p>
<p dir="auto">Issue Description: I am writing some tests for a kanban board app built with react. i have a test that verifies the following behavior doesn't occur:</p>
<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description test_against.this.behavior.mov" class="m-1">test_against.this.behavior.mov</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/2349518/236545085-9b89d163-8e65-4d6f-bdf2-10f518ebb0d5.mov" data-canonical-src="https://user-images.githubusercontent.com/2349518/236545085-9b89d163-8e65-4d6f-bdf2-10f518ebb0d5.mov" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<p dir="auto">This involves dragging a task to a spot, then dragging it away from that spot, and then dropping it.</p>
<p dir="auto">The issue i'm facing with playwright is that I am able to drag the task to the first spot, but i am unable to move away from it. However, If I remove the first mouse down event, i move as many times as i want. This leads me to believe that once I have triggered a mouse down event, I am only able to move once. Any further moves are not possible.</p>
<p dir="auto">Video of moves without mousedown</p>
<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description without_mousedown.webm" class="m-1">without_mousedown.webm</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/2349518/236546294-8bd1310a-79fe-48e3-946a-15efeabd8f3e.webm" data-canonical-src="https://user-images.githubusercontent.com/2349518/236546294-8bd1310a-79fe-48e3-946a-15efeabd8f3e.webm" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<p dir="auto">Video of moves with mousedown</p>
<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description with_mousedown.webm" class="m-1">with_mousedown.webm</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/2349518/236546252-bba8250e-592a-4d0e-9aac-d45992667d80.webm" data-canonical-src="https://user-images.githubusercontent.com/2349518/236546252-bba8250e-592a-4d0e-9aac-d45992667d80.webm" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.31.1</li>
<li>Operating System: macOS 13.3.1</li>
<li>Browser: All</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>
<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto"><a href="https://github.com/sbmsr/playwright-mousedown-issue">https://github.com/sbmsr/playwright-mousedown-issue</a></p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>run <code class="notranslate">npm install</code></li>
<li>run <code class="notranslate">npm dev:client</code> to start local vite server</li>
<li>run <code class="notranslate">npm dev:sever</code> to start backend</li>
<li>run <code class="notranslate">npm test</code> to run the tests</li>
<li>comment the mouse.down on line 84, and view the video to see that the mouse moves fine without it</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">I expect the mouse to drag the task to two places on the screen.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">The mouse drags the task to the first intended place, but not the second.</p>