HTMX 和剧作家：按钮按下没有任何作用

Question

我有一个非常简单的 htmx 示例，它可以手动运行，但通过 Playwright 失败：

你可以在这里测试：https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html

import os

from playwright.sync_api import sync_playwright

def run(playwright):
    browser = playwright.chromium.launch(headless=False, devtools=True)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html")
    page.click("text=load second button")
    page.click("text=Reload Parent OOB")
    page.dblclick("text=This should be the end")
    # ---------------------
    context.close()
    browser.close()


os.environ['DEBUG'] = 'pw:api'
with sync_playwright() as playwright:
    run(playwright)```

加载第二个按钮有效，但“重新加载父 OOB”失败。

可能是什么原因？

2021-03-19T06:39:17.114Z pw:api navigating to "https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html", waiting until "load"
2021-03-19T06:39:17.317Z pw:api   navigated to "https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html"
2021-03-19T06:39:17.534Z pw:api   "domcontentloaded" event fired
2021-03-19T06:39:17.547Z pw:api   "load" event fired
2021-03-19T06:39:17.554Z pw:api waiting for selector "text=load second button"
2021-03-19T06:39:17.591Z pw:api   selector resolved to visible <button hx-swap="outerHTML" hx-get="second-button.htmx">load second button</button>
2021-03-19T06:39:17.599Z pw:api attempting click action
2021-03-19T06:39:17.599Z pw:api   waiting for element to be visible, enabled and stable
2021-03-19T06:39:17.635Z pw:api   element is visible, enabled and stable
2021-03-19T06:39:17.635Z pw:api   scrolling into view if needed
2021-03-19T06:39:17.636Z pw:api   done scrolling
2021-03-19T06:39:17.638Z pw:api   checking that element receives pointer events at (117.19,18.48)
2021-03-19T06:39:17.643Z pw:api   element does receive pointer events
2021-03-19T06:39:17.643Z pw:api   performing click action
2021-03-19T06:39:17.653Z pw:api   click action done
2021-03-19T06:39:17.653Z pw:api   waiting for scheduled navigations to finish
2021-03-19T06:39:17.656Z pw:api   navigations have finished
2021-03-19T06:39:17.660Z pw:api waiting for selector "text=Reload Parent OOB"
2021-03-19T06:39:17.688Z pw:api   selector resolved to visible <button class="htmx-settling" hx-get="reload-parent-oob.…>Reload Parent OOB</button>
2021-03-19T06:39:17.692Z pw:api attempting click action
2021-03-19T06:39:17.692Z pw:api   waiting for element to be visible, enabled and stable
2021-03-19T06:39:17.716Z pw:api   element is visible, enabled and stable
2021-03-19T06:39:17.717Z pw:api   scrolling into view if needed
2021-03-19T06:39:17.717Z pw:api   done scrolling
2021-03-19T06:39:17.719Z pw:api   checking that element receives pointer events at (120.14,18.48)
2021-03-19T06:39:17.727Z pw:api   element does receive pointer events
2021-03-19T06:39:17.727Z pw:api   performing click action
2021-03-19T06:39:17.730Z pw:api   click action done
2021-03-19T06:39:17.730Z pw:api   waiting for scheduled navigations to finish
2021-03-19T06:39:17.743Z pw:api   navigations have finished
2021-03-19T06:39:17.746Z pw:api waiting for selector "text=This should be the end"
2021-03-19T06:39:18.179Z pw:api   "networkidle" event fired
Traceback (most recent call last):
  File "/home/guettli/projects/lala-env/src/lala/lala/playwright/test.py", line 24, in <module>
    run(playwright)
  File "/home/guettli/projects/lala-env/src/lala/lala/playwright/test.py", line 16, in run
    page.dblclick("text=This should be the end")
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/sync_api/_generated.py", line 6437, in dblclick
    self._sync(
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/_impl/_sync_base.py", line 103, in _sync
    return task.result()
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/_impl/_page.py", line 611, in dblclick
    return await self._main_frame.dblclick(**locals_to_params(locals()))
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/_impl/_frame.py", line 387, in dblclick
    await self._channel.send("dblclick", locals_to_params(locals()))
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/_impl/_connection.py", line 36, in send
    return await self.inner_send(method, params, False)
  File "/home/guettli/projects/lala-env/lib/python3.8/site-packages/playwright/_impl/_connection.py", line 47, in inner_send
    result = await callback.future
playwright._impl._api_types.TimeoutError: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "text=This should be the end"

Answer 1

我找到了一个“解决方案”，但我不喜欢它：

import os
import time

from playwright.sync_api import sync_playwright
def run(playwright):
    browser = playwright.chromium.launch(headless=False, devtools=True)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://thomas-guettler.de/htmx-snippets/load-fragment-via-hx-get.html")
    page.click("text=load second button")
    time.sleep(0.1) # <<<< ===================== If I wait here, it works ===
    page.click("text=Reload Parent OOB")
    page.dblclick("text=This should be the end")
    # ---------------------
    context.close()
    browser.close()


os.environ['DEBUG'] = 'pw:api'
with sync_playwright() as playwright:
    run(playwright)

我想避免在这里等待。

这是 Playwright 或 htmx 中的错误吗？

Answer 2

这听起来像是 htmx 的问题，增加第二次点击的延迟会有所帮助：

page.click("text=Reload Parent OOB", delay=100)

也许 htmx 在鼠标按下和鼠标抬起之间做了一些事情，所以延迟很重要。达里奥在剧作家中打开了an issue。