E2E: driving a Web Awesome form control from Playwright needs 'await el.updateComplete' before dispatching #462

New issue

Open

opened 2026-08-27 06:39:42 +00:00 by mph · 1 comment

mph commented

2026-08-27 06:39:42 +00:00

Owner

From MEDECA-378 triage (lesson L27). A durable pattern for any project using Web Awesome (Lit-based) controls with htmx or plain form reads.

Symptom: setting the value and dispatching the event synchronously -

el.value = 'Red';
el.dispatchEvent(new Event('change', {bubbles: true}));

reaches the server with the OLD (blank) value. htmx reads FormData before Web Awesome's Lit reactive update cycle has flushed, and that cycle is what calls ElementInternals.setFormValue(), i.e. the thing that makes the field visible to FormData at all.

Fix: await el.updateComplete between the assignment and the dispatch.

Why it is worth writing down rather than rediscovering: the failure is silent. The request still succeeds, just with the wrong query string - no error in the console, in the network log, or in the test output. The scenario fails later, somewhere unrelated-looking.

The same fact was already established in this codebase for a submit button reading wa-input/wa-select values; MEDECA-378 confirmed it for a change-triggered htmx read too. It is not specific to one control or one trigger - it follows from Lit's update cycle, so treat it as the rule for every Web Awesome form control.

Possible homes: an E2E-authoring guide, or the scatatags-webawesome repo's docs if that is the narrower fit.

Type: feature
Filed from: /home/mph/Devel/projects/medeca-modul-poptavky-MEDECA-378 on branch MEDECA-378

From MEDECA-378 triage (lesson L27). A durable pattern for any project using Web Awesome (Lit-based) controls with htmx or plain form reads. Symptom: setting the value and dispatching the event synchronously - el.value = 'Red'; el.dispatchEvent(new Event('change', {bubbles: true})); - reaches the server with the OLD (blank) value. htmx reads FormData before Web Awesome's Lit reactive update cycle has flushed, and that cycle is what calls ElementInternals.setFormValue(), i.e. the thing that makes the field visible to FormData at all. Fix: await el.updateComplete between the assignment and the dispatch. Why it is worth writing down rather than rediscovering: the failure is silent. The request still succeeds, just with the wrong query string - no error in the console, in the network log, or in the test output. The scenario fails later, somewhere unrelated-looking. The same fact was already established in this codebase for a submit button reading wa-input/wa-select values; MEDECA-378 confirmed it for a change-triggered htmx read too. It is not specific to one control or one trigger - it follows from Lit's update cycle, so treat it as the rule for every Web Awesome form control. Possible homes: an E2E-authoring guide, or the scatatags-webawesome repo's docs if that is the narrower fit. --- **Type:** feature **Filed from:** `/home/mph/Devel/projects/medeca-modul-poptavky-MEDECA-378` on branch `MEDECA-378`

claude commented

2026-10-16 00:37:15 +00:00

Member

Intake: needs-input

1. Which repository should carry the Web Awesome `await el.updateComplete` rule for Playwright?

iw-cli has no Playwright tests and no guide for writing E2E tests. Its E2E suite is BATS, under test/. No file in this repository mentions updateComplete. The issue names two homes, and both are outside iw-cli:

Possible homes: an E2E-authoring guide, or the scatatags-webawesome repo's docs if that is the narrower fit.

The nearest file in iw-cli is the skill for the dashboard's own controls: https://code.iterative.works/iterative-works/iw-cli/src/branch/main/.claude/skills/dashboard-htmx-controls/SKILL.md. Only an agent that works on the iw-cli dashboard reads it.

a) Move it to the dev-docs plugin (iterative-works/dev-docs), for example the webapp-scenario-verification skill or a new E2E-authoring page. Every project that loads the plugin reads it. The issue moves to that repository, and this issue closes.
b) Move it to the scatatags-webawesome docs. Only projects that use that library read it. The issue moves, and this issue closes.
c) Keep it in iw-cli as a lesson in dashboard-htmx-controls/SKILL.md. MEDECA and other consumer projects do not read that skill.

Recommended: a), because the rule applies to every project that uses Web Awesome, and the plugin is the one surface those projects already read.

Answer in a comment on this issue, per number, for example "1: a", or in your own words; intake reads it on its next iteration.

Intake: needs-input ### 1. Which repository should carry the Web Awesome `await el.updateComplete` rule for Playwright? iw-cli has no Playwright tests and no guide for writing E2E tests. Its E2E suite is BATS, under `test/`. No file in this repository mentions `updateComplete`. The issue names two homes, and both are outside iw-cli: > Possible homes: an E2E-authoring guide, or the scatatags-webawesome repo's docs if that is the narrower fit. The nearest file in iw-cli is the skill for the dashboard's own controls: https://code.iterative.works/iterative-works/iw-cli/src/branch/main/.claude/skills/dashboard-htmx-controls/SKILL.md. Only an agent that works on the iw-cli dashboard reads it. - **a) Move it to the dev-docs plugin** (`iterative-works/dev-docs`), for example the webapp-scenario-verification skill or a new E2E-authoring page. Every project that loads the plugin reads it. The issue moves to that repository, and this issue closes. - **b) Move it to the scatatags-webawesome docs.** Only projects that use that library read it. The issue moves, and this issue closes. - **c) Keep it in iw-cli** as a lesson in `dashboard-htmx-controls/SKILL.md`. MEDECA and other consumer projects do not read that skill. **Recommended: a)**, because the rule applies to every project that uses Web Awesome, and the plugin is the one surface those projects already read. Answer in a comment on this issue, per number, for example "1: a", or in your own words; intake reads it on its next iteration.

claude added the

needs-input

label

2026-10-16 00:37:15 +00:00