Skip to main content

web-component-testing

Guides real-browser tests for FigUI3 custom elements. Use when adding or debugging tests for fig-* web components, attribute/property contracts, value synchronization, event payloads, disabled behavior, or custom element registration.

Quellinformationen

Repository
rogie/figui3
Letzte Quellaktivität
1. Juni 2026 um 17:43
Erkannte Sprache von SKILL.md
Englisch
Sterne
70
Forks
1

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
web-component-testing
description
Guides real-browser tests for FigUI3 custom elements. Use when adding or debugging tests for fig-* web components, attribute/property contracts, value synchronization, event payloads, disabled behavior, or custom element registration.
# Web Component Testing Use Playwright in a real browser for `fig-*` components. Avoid jsdom for component behavior because this repo depends on Custom Elements, layout, focus, dialogs, pointer events, media elements, and CSS. ## Contract Priorities 1. Assert registration with `customElements.get(tag)` or customized built-in upgrade. 2. Mount representative markup and wait for `customElements.whenDefined(tag)`. 3. Fail on page errors and unexpected console errors. 4. Test both attribute writes and property writes for value-like APIs. 5. Capture `input`, `change`, and component-specific events from real interactions. 6. Assert `event.detail` shape for data controls. 7. Verify disabled controls do not emit normal interaction changes where applicable. ## Interaction Pattern - Prefer user-like interactions: `click`, `keyboard`, pointer drag, native input dispatch. - Use host properties for public APIs: `el.value`, `el.checked`, `el.selected`, `el.open`. - Use internal DOM only when no public interaction exists. - Keep each failure tagged with component name and scenario id. ## Fixture Guidance - Keep fixtures minimal and deterministic. - Include required children for compound controls. - Avoid network-dependent assertions; external media URLs are acceptable for smoke fixtures but not for pass/fail timing. - For customized built-ins, create with markup such as `<dialog is="fig-dialog">`.
Auf GitHub ansehen