[BUG] Click not working while using htmx

[kblok]

Context:

• Playwright Version: 1.9.2
• Operating System: MacOS
• Node.js version: 15.9
• Browser: Chromium

Creating this issue based on this question.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({headless : false});
  const page = await browser.newPage();
  await page.goto('https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html');
  await page.click("text=load second button");
  await page.click("text=Reload Parent OOB");
  await page.dblclick("text=This should be the end");
  await browser.close();
})();

await page.click("text=Reload Parent OOB"); fails to click the element there. But if you take a look at the log, Playwright thinks it succeeded in doing that.

 pw:api waiting for selector "text=Reload Parent OOB" +1ms
  pw:api   selector resolved to visible <button class="htmx-settling" hx-get="reload-parent-oob.…>Reload Parent OOB</button> +249ms
  pw:api attempting click action +2ms
  pw:api   waiting for element to be visible, enabled and stable +0ms
  pw:api   element is visible, enabled and stable +32ms
  pw:api   scrolling into view if needed +0ms
  pw:api   done scrolling +1ms
  pw:api   checking that element receives pointer events at (120.15,18.48) +0ms
  pw:api   element does receive pointer events +2ms
  pw:api   performing click action +0ms
  pw:api   click action done +1ms
  pw:api   waiting for scheduled navigations to finish +0ms
  pw:api   navigations have finished +1ms
  pw:api <= page.click succeeded +0ms

[yury-s]

Apparently Playwright clicks to fast for the page, and it doesn't consider it a normal click. Using delay makes it work:

await page.click("text=Reload Parent OOB", {delay:100});

[guettli]

@yury-s @kblok adding a delay works, I tested it with time.sleep(0.1). But I would like to fix the root-cause. Do you have a clue what htmx should do different, so that no manual delay is needed?

[yury-s]

Apparently click listener is getting added to the button after "text=Reload Parent OOB" selector resolves. It either needs to be fixed on htmx side (so that if the element in the DOM tree and visible the listener is already added to it) or you need implement an extra check on playwright side that the listener is already attached.

[kblok]

great finding @yury-s!

[pavelfeldman]

Closing as per above. If a framework uses lazy hydration, it needs to enable controls once after the hydration is complete. Otherwise, clicking the buttons when the page is loaded over slow 3G does not work. In that case human is too fast, like Playwright is too fast on broadband.

Interestingly, I just closed another (unrelated) issue that turned out to be an htmx bug: #5894