@decocms/parity 0.11.3 → 0.11.4

package/CHANGELOG.md

@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.11.4](https://github.com/decocms/parity/compare/v0.11.3...v0.11.4) (2026-06-17)
+
+### Added
+
+* **`cartOpenedIndicator` selector key.** Used by the upcoming post-add-to-cart validator — list of selectors that, when matched and visible after clicking buy, confirm the cart actually opened (notification toast, drawer, etc). Default candidates include `[aria-label='Fechar notificação']` / `[aria-label='Fechar carrinho']` patterns from Deco TanStack plus generic role/`[role='dialog']` fallbacks.
+
+### Fixed
+
+* **Deco TanStack selectors covered before the LLM is even called.** Defaults extended for the bagaggio-class storefront — patterns observed live against `bagaggio-tanstack.deco-cx.workers.dev`:
+  - **buyButton:** lowercase `comprar` variants + `button[type='button']:has-text('comprar')` (the CSS renders uppercase via `text-transform`; the markup is lowercase).
+  - **minicartTrigger:** `[aria-label='Sacola']` + lowercase aria substring.
+  - **cepInputPdp:** `input[name='postalCode']`, `#postalCodeInput`, `input[inputMode='numeric'][maxLength='8']`.
+  - **sizeSwatch:** `[aria-label*='Tamanho '][aria-label*='Disponível']` — the " - Disponível" suffix means in-stock; sold-out variants don't carry it.
+* **HTML compaction passed to the LLM is now actually useful.** Both `compactHtmlForSelectors` and `compactHtmlForRecovery` now:
+  - Strip the Tailwind utility-class soup (`class="w-full h-12 flex items-center bg-primary ..."` becomes `class=""`) so the LLM sees semantic anchors (`data-*`, `aria-*`, `role`, semantic class names) instead of drowning in token noise.
+  - Strip URL-encoded JSON in `data-event` / `data-track` / `data-analytics` attrs (Deco sites carry multi-kb analytics blobs there).
+  - Drop inline `style=""`.
+  - Add `data-product-list` and `[aria-label]` to the kept-element whitelist so the Deco TanStack patterns survive the compaction.
+* **LLM prompts know about Deco TanStack now.** `discover-selectors` and `recover-step` system prompts both document the bagaggio-class patterns explicitly (product card via `aria-label='view product'`, lowercase CTA text, `[aria-label='Sacola']` minicart, `[aria-label='Tamanho X - Disponível']` size swatches, `name='postalCode'` CEP input) so when defaults miss the LLM has structured guidance instead of having to re-discover the pattern each time.
+
+### Verification (live against bagaggio)
+
+Before this PR: journey stopped at step 3 (`enter-pdp` — fixed in 0.11.3) and again at step 4 (`select-variant`).
+After this PR: journey completes steps 1-5 (`visit-home`, `navigate-plp`, `enter-pdp`, `select-variant`, `shipping-calc-pdp`). Step 6 (`add-to-cart`) now surfaces a real bug — "Selecione um tamanho" is still visible after the variant click, meaning the variant selector matched a tab/expand element instead of the actual radio. Follow-up tracked separately.
+
 ## [0.11.3](https://github.com/decocms/parity/compare/v0.11.2...v0.11.3) (2026-06-17)
 
 ### Fixed

package/dist/cli.js

@@ -4441,6 +4441,7 @@ var ParityRc = z.object({
     quantityIncrement: z.string().optional(),
     quantityInput: z.string().optional(),
     minicartCount: z.string().optional(),
+    cartOpenedIndicator: z.string().optional(),
     searchTrigger: z.string().optional(),
     searchInput: z.string().optional(),
     searchSuggestions: z.string().optional(),
@@ -11247,7 +11248,26 @@ function compactHtmlForRecovery(html, maxChars = 12000) {
   try {
     const $ = cheerio6.load(html);
     $("script, style, noscript, svg, picture source, link, meta").remove();
-    const allowed = $("header, nav, main, footer, dialog, [role='dialog'], form, button, a, input, [data-buy-button], [data-checkout], [data-minicart], [role='button']").map((_, el) => $.html(el)).get().join(`
+    $("*").each((_, el) => {
+      const attrs = el.attribs ?? {};
+      for (const name of Object.keys(attrs)) {
+        if (name === "data-event" || name === "data-track" || name === "data-analytics") {
+          const value = attrs[name] ?? "";
+          if (value.length > 100)
+            attrs[name] = "[…]";
+        }
+        if (name === "style")
+          delete attrs[name];
+      }
+      if (attrs.class) {
+        const tokens = attrs.class.split(/\s+/).filter(Boolean);
+        const kept = tokens.filter((t) => isSemanticClassToken(t));
+        attrs.class = kept.join(" ");
+        if (!attrs.class)
+          delete attrs.class;
+      }
+    });
+    const allowed = $("header, nav, main, footer, dialog, [role='dialog'], form, button, a, input, [data-buy-button], [data-checkout], [data-minicart], [data-product-list], [role='button'], [aria-label]").map((_, el) => $.html(el)).get().join(`
 `);
     const truncated = allowed.length > maxChars ? `${allowed.slice(0, maxChars)}
 <!-- TRUNCATED -->` : allowed;
@@ -11256,6 +11276,23 @@ function compactHtmlForRecovery(html, maxChars = 12000) {
     return html.slice(0, maxChars);
   }
 }
+function isSemanticClassToken(token) {
+  if (token.length === 0 || token.length > 40)
+    return false;
+  if (token.includes(":") || token.includes("[") || token.includes("/"))
+    return false;
+  if (/^[a-z]{1,4}(-[a-z]{1,3})?-\d/.test(token))
+    return false;
+  if (/^[a-z]{1,2}\d+$/.test(token))
+    return false;
+  if (/^(w|h|p|m|px|py|pt|pb|pl|pr|mt|mb|ml|mr|gap|flex|grid|text|bg|border|rounded|shadow|opacity|cursor|min|max)-/i.test(token) && !/^(text|bg|border)-(primary|secondary|accent|brand|warning|error|success|muted|base|surface)$/i.test(token)) {
+    return false;
+  }
+  if (/^(flex|grid|block|inline|hidden|relative|absolute|fixed|static|sticky|visible|invisible|truncate|uppercase|lowercase|capitalize|italic|underline|overline|line-through|no-underline|antialiased|subpixel-antialiased|whitespace|break-words|break-all|object-cover|object-contain|object-fill|object-none|object-scale-down|select-none|select-text|select-all|pointer-events-none|pointer-events-auto|appearance-none|resize-none|leading-none|font-bold|font-medium|font-semibold|font-light|tracking-wide|tracking-tight)$/.test(token)) {
+    return false;
+  }
+  return true;
+}
 var RECOVERY_SYSTEM_PROMPT = `
 Você ajuda a recuperar passos de teste E2E (Playwright) que falharam contra sites de e-commerce.
 
@@ -11277,22 +11314,36 @@ REGRAS CRÍTICAS:
 3. **Se o step é 'shipping-calc-cart' ou 'shipping-calc-pdp':**
    - O alvo é um \`<input>\` (não button/link) visível com label/placeholder mencionando "CEP", "Frete", "Calcular", "Entrega", "Zip".
    - Prefira inputs cujo container/pai está visível (não escondido em accordion fechado).
+   - **Pattern Deco TanStack**: \`<input id="postalCodeInput" name="postalCode" inputMode="numeric" maxLength="8" pattern="\\\\d{8}">\`. Selectors válidos: \`input[name='postalCode']\`, \`#postalCodeInput\`, \`input[inputMode='numeric'][maxLength='8']\`.
 
-4. **Seletores preferidos** (nesta ordem):
+4. **Se o step é 'enter-pdp' ou 'navigate-plp' e o alvo é um product card:**
+   - **Pattern Deco TanStack**: \`<div data-product-list><div class="card"><a aria-label="view product" href="<product-name>/p">...</a></div></div>\`.
+   - Selectors válidos: \`[data-product-list] a[aria-label='view product']\`, \`a[aria-label='view product']\`, \`[data-product-list] a[href$='/p']\`.
+
+5. **Se o step é 'select-variant' (tamanho/cor obrigatório no PDP):**
+   - **Pattern Deco TanStack**: \`<button aria-label="Tamanho P - Disponível">\` ou \`<button aria-label="Tamanho M - Disponível">\`. Sufixo " - Disponível" = em estoque; "Esgotado" / sem sufixo = indisponível.
+   - Selectors válidos: \`[aria-label*='Tamanho '][aria-label*='Disponível']\`, \`button[aria-label*='Tamanho ']:not([disabled])\`.
+   - Para cor: \`[aria-label*='Cor '][aria-label*='Disponível']\`.
+
+6. **Se o step é 'add-to-cart' / 'comprar':**
+   - **Pattern Deco TanStack**: o markup é \`<button type="button">comprar</button>\` em lowercase (CSS faz uppercase via \`text-transform\`). Use \`button:has-text('comprar')\` ou \`button[type='button']:has-text('comprar')\`.
+   - **NUNCA confunda com "comprar junto"** (botão de cross-sell adjacente) — qualifique pelo texto exato ou pelo \`type='submit'\`.
+
+7. **Seletores preferidos** (nesta ordem):
    - Text-based Playwright: \`button:has-text('Finalizar')\`, \`a:has-text('Continuar para pagamento')\`
-   - data-attributes específicos: \`[data-checkout-button]\`, \`[data-cart-finalize]\`, \`[data-fs-cart-button]\`
-   - ARIA: \`[aria-label*='finalizar' i]\`, \`[role='button'][aria-label*='checkout' i]\`
+   - data-attributes específicos: \`[data-checkout-button]\`, \`[data-cart-finalize]\`, \`[data-fs-cart-button]\`, \`[data-product-list]\`
+   - ARIA: \`[aria-label*='finalizar' i]\`, \`[role='button'][aria-label*='checkout' i]\`, \`[aria-label='Sacola']\` (Deco TanStack minicart)
    - Classes específicas de plataforma: \`.vtex-minicart-2-x-checkoutButton\`, \`.fs-cart__checkout\`
    - Por último, escopo hierárquico curto: \`[role='dialog'] button.cta\`, \`.minicart-drawer button[type='submit']\`
 
-5. **EVITE:**
+8. **EVITE:**
    - IDs hash-gerados (\`#r-abc123\`)
-   - Tailwind utility classes encadeadas (\`.flex.items-center.bg-blue\`)
+   - Tailwind utility classes encadeadas (\`.flex.items-center.bg-blue\`) — o HTML compactado já tirou essas, então se você só vê tokens utility a class foi removida e essa não é uma âncora confiável
    - Seletores genéricos sem qualificador (\`a[href*=...]\`, \`button[type=submit]\` sozinho)
    - Seletores que casam o ELEMENTO ERRADO em outra parte do DOM (ex: link de "checkout your reviews" no footer)
    - Seletores muito profundos (>4 níveis hierárquicos)
 
-6. **Quando incerto, retorne selector="" (string vazia).** É preferível que o flow declare a falha honestamente a chutar um seletor errado que apenas clica em coisa aleatória.
+9. **Quando incerto, retorne selector="" (string vazia).** É preferível que o flow declare a falha honestamente a chutar um seletor errado que apenas clica em coisa aleatória. Em especial: se a página parece ser uma LANDING PAGE (sem buy form, sem schema:Product, sem preço) e o step pede um buy/variant/cep selector, retorne string vazia — não force uma sugestão.
 
 Responda SEMPRE via tool_use suggest_recovery.
 `.trim();
@@ -11440,7 +11491,13 @@ REGRAS:
    - Se o HTML tem classes \`vtex-\` → VTEX. Use convenções VTEX (\`.vtex-cart-item, .vtex-minicart\`).
    - Se tem \`fs-\` ou \`data-fs-*\` → FastStore/VTEX IO.
    - Se tem \`shopify-\` ou usa Liquid markup → Shopify.
-   - Se tem \`data-deco\`, \`data-section\`, \`data-product-card\` → Deco storefront (variantes custom).
+   - Se tem \`data-deco\`, \`data-section\`, \`data-product-card\` → Deco storefront classic (Fresh/Preact).
+   - Se tem \`data-product-list\`, \`<a aria-label="view product">\`, e Tailwind utility classes
+     (\`card w-full card-compact ...\`) → **Deco TanStack** (React port). Patterns conhecidos:
+       * product card: \`[data-product-list] a[aria-label='view product']\` ou \`a[href$='/p']\`
+       * minicart trigger: \`[aria-label='Sacola']\` (note: nome em português)
+       * post-add-to-cart drawer/toast: \`[aria-label='Fechar carrinho']\` ou \`[aria-label='Fechar notificação']\`
+       * CTAs ficam lowercase no markup (\`comprar\`, não \`Comprar\`) com text-transform via CSS
    - Caso desconhecido, use heurísticas genéricas.
 
 4. Para "cep_input_pdp" e "cep_input_cart": retorne string vazia se não existir esse recurso na plataforma.
@@ -11480,6 +11537,25 @@ function compactHtmlForSelectors(html, maxChars = 30000) {
     const $ = cheerio7.load(html);
     $("script, style, noscript, svg, picture source, link[rel='stylesheet']").remove();
     $("[type='application/ld+json']").remove();
+    $("*").each((_, el) => {
+      const attrs = el.attribs ?? {};
+      for (const name of Object.keys(attrs)) {
+        if (name === "data-event" || name === "data-track" || name === "data-analytics") {
+          const value = attrs[name] ?? "";
+          if (value.length > 100)
+            attrs[name] = "[…]";
+        }
+        if (name === "style")
+          delete attrs[name];
+      }
+      if (attrs.class) {
+        const tokens = attrs.class.split(/\s+/).filter(Boolean);
+        const kept = tokens.filter((t) => isSemanticClass(t));
+        attrs.class = kept.join(" ");
+        if (!attrs.class)
+          delete attrs.class;
+      }
+    });
     const sections = [];
     const head = $("head").clone();
     head.find("title, meta[name='generator'], meta[name='vtex'], meta[name='platform'], link[rel='canonical']").each((_, el) => {
@@ -11488,7 +11564,7 @@ function compactHtmlForSelectors(html, maxChars = 30000) {
     $("header, nav, [role='banner']").each((_, el) => {
       sections.push($.html(el));
     });
-    const shelf = $("[data-product-card], [data-deco='view-product'], article a[href*='/p/'], article a[href*='/products/']").closest("section, ul, div").first();
+    const shelf = $("[data-product-card], [data-deco='view-product'], [data-product-list], article a[href*='/p/'], article a[href*='/products/'], a[aria-label='view product']").closest("section, ul, div").first();
     if (shelf.length > 0)
       sections.push($.html(shelf));
     $("form").each((_, el) => {
@@ -11508,6 +11584,23 @@ function compactHtmlForSelectors(html, maxChars = 30000) {
     return html.slice(0, maxChars);
   }
 }
+function isSemanticClass(token) {
+  if (token.length === 0 || token.length > 40)
+    return false;
+  if (token.includes(":") || token.includes("[") || token.includes("/"))
+    return false;
+  if (/^[a-z]{1,4}(-[a-z]{1,3})?-\d/.test(token))
+    return false;
+  if (/^[a-z]{1,2}\d+$/.test(token))
+    return false;
+  if (/^(w|h|p|m|px|py|pt|pb|pl|pr|mt|mb|ml|mr|gap|flex|grid|text|bg|border|rounded|shadow|opacity|cursor|min|max)-/i.test(token) && !/^(text|bg|border)-(primary|secondary|accent|brand|warning|error|success|muted|base|surface)$/i.test(token)) {
+    return false;
+  }
+  if (/^(flex|grid|block|inline|hidden|relative|absolute|fixed|static|sticky|visible|invisible|truncate|uppercase|lowercase|capitalize|italic|underline|overline|line-through|no-underline|antialiased|subpixel-antialiased|whitespace|break-words|break-all|object-cover|object-contain|object-fill|object-none|object-scale-down|select-none|select-text|select-all|pointer-events-none|pointer-events-auto|appearance-none|resize-none|leading-none|font-bold|font-medium|font-semibold|font-light|tracking-wide|tracking-tight)$/.test(token)) {
+    return false;
+  }
+  return true;
+}
 async function discoverSelectorsFromUrl(url, html, opts = {}) {
   const host = safeHost(url);
   const cacheDir = opts.cacheDir ?? CACHE_DIR;
@@ -11704,6 +11797,7 @@ var SelectorKey = z2.enum([
   "quantityIncrement",
   "quantityInput",
   "minicartCount",
+  "cartOpenedIndicator",
   "searchTrigger",
   "searchInput",
   "searchSuggestions",
@@ -11886,17 +11980,22 @@ var DEFAULT_SELECTORS = {
     "main a[href*='/p?']"
   ],
   buyButton: [
+    "[data-buy-button]",
+    "[data-testid='add-to-cart']",
+    "button[type='button']:has-text('comprar')",
+    "button[type='submit']:has-text('comprar')",
     "button:has-text('Comprar')",
+    "button:has-text('comprar')",
     "button:has-text('Adicionar')",
     "button:has-text('Add to cart')",
     "button:has-text('Add to bag')",
-    "[data-buy-button]",
-    "[data-testid='add-to-cart']",
     "button[type='submit']:has-text('Comprar')"
   ],
   minicartTrigger: [
     "[data-minicart-trigger]",
     "[data-testid='minicart-trigger']",
+    "[aria-label='Sacola']",
+    "[aria-label*='sacola' i]",
     "[aria-label*='carrinho' i]",
     "[aria-label*='cart' i]",
     "header button:has([data-cart-icon])",
@@ -11906,6 +12005,10 @@ var DEFAULT_SELECTORS = {
     "input[name='shipping-zipcode']",
     "input[name='zipcode']",
     "input[name='cep']",
+    "input[name='postalCode']",
+    "#postalCodeInput",
+    "input[inputMode='numeric'][maxLength='8']",
+    "input[pattern='\\\\d{8}']",
     "input[placeholder*='CEP' i]",
     "input[placeholder*='Postal' i]",
     "[data-shipping-input] input"
@@ -11936,6 +12039,9 @@ var DEFAULT_SELECTORS = {
   sizeSwatch: [
     "[data-size]:not([disabled]):not([aria-disabled='true']):not(.unavailable):not(.sold-out)",
     "[data-variant-size]:not([disabled]):not([aria-disabled='true']):not(.unavailable)",
+    "[aria-label^='Tamanho ']:has-text('Disponível')",
+    "[aria-label*='Tamanho '][aria-label*='Disponível']",
+    "[aria-label*='Tamanho ']:not([disabled]):not([aria-disabled='true'])",
     "button[aria-label*='tamanho' i]:not([aria-disabled='true']):not([disabled])",
     "button[aria-label*='size' i]:not([aria-disabled='true']):not([disabled])",
     "[data-testid='size-selector'] button:not([disabled]):not(.unavailable)",
@@ -12040,6 +12146,21 @@ var DEFAULT_SELECTORS = {
     "[class*='searchSuggestions']:visible",
     "[class*='suggestions' i] [class*='item' i]"
   ],
+  cartOpenedIndicator: [
+    "[aria-label='Fechar notificação']:visible",
+    "[aria-label*='notificação' i]:visible",
+    "[role='status']:visible",
+    "[role='alert']:visible",
+    "[aria-label='Fechar carrinho']:visible",
+    "[aria-label*='fechar carrinho' i]:visible",
+    "[role='dialog']:has([class*='cart' i]):visible",
+    "[role='dialog']:has([class*='minicart' i]):visible",
+    "[data-cart-drawer][aria-expanded='true']",
+    "[data-minicart][aria-expanded='true']",
+    "[data-cart-drawer]:not([hidden]):visible",
+    "[role='dialog']:has-text('adicionado')",
+    "[role='dialog']:has-text('added')"
+  ],
   cartItemRow: [
     "[data-cart-item]",
     "[data-testid='cart-item']",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/parity",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "E2E parity validator for site migrations. Compares prod vs cand and reports UI, functional, SEO, visual, and Web Vitals deltas with an LLM-ranked HTML report.",
   "type": "module",
   "license": "MIT",