Add data-testid attributes to QloApps Smarty templates and rebuild the app. Use when the user asks to add test IDs, add data-testid, or improve element locators in templates.
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.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Add data-testid attributes to QloApps Smarty templates and rebuild the app. Use when the user asks to add test IDs, add data-testid, or improve element locators in templates.
Adding data-testid Attributes
Follow this workflow to add data-testid attributes to QloApps Smarty templates and make them available in the running app.
Step 1 — Identify the Target Element
1.1 Find the template file
QloApps uses Smarty .tpl templates. Templates live in two main locations:
Smarty templates often have {if}...{else}...{/if} or {foreach} blocks that render the same element differently depending on state. You must add the data-testid in all branches so the attribute is always present.
Example — occupancy_field.tpl has a {foreach} branch (for existing occupancies) and an {else} branch (default state). Both need the test ID:
Some templates are {include}-d into others (e.g., occupancy_field.tpl is included in both searchForm.tpl and room_type_list.tpl). Don't add the same data-testid in the parent and the included partial — put it in one place only.
Step 3 — Rebuild and Clear Cache
The templates are baked into the Docker image (not volume-mounted), so you must rebuild and clear the Smarty cache.
[!CAUTION]
If you skip the cache clear, the old compiled templates will still be served even after a rebuild.
Step 4 — Verify
4.1 Check in browser via JavaScript
Open the page in a browser and run in DevTools console (or via Playwright):
document.querySelector('[data-testid="your-name"]')
// Should return the correct element, not null
4.2 Verify the tag is correct
const el = document.querySelector('[data-testid="your-name"]');
console.log(el.tagName); // Should be BUTTON, SELECT, A, etc. — not DIV (unless intentional)
