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.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
add-testid
description
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)
