locale qa agent missed truncated german strings overflowing button and the test failed

Fix the locale QA agent missing truncated German strings overflowing buttons

TL;DR

German strings run long and the agent only checks pixels, so add an overflow assertion per element. Truncated text looks fine in a screenshot diff when the baseline is also truncated. Check scrollWidth against clientWidth on key elements, and fail when text overflows.

The error

Locale QA agent: missed truncated German button labels
buttons show "Speichern..." cut off, test passed anyway

Fix it

Step 1: Reproduce the overflow check manually

node -e "console.log('in the browser: document.querySelectorAll(\"button\").forEach(b => b.scrollWidth > b.clientWidth && console.log(b.textContent))')"

Expected: You see which buttons overflow.

Step 2: Add overflow assertions to the QA agent

grep -n "assert\|check" scripts/qa-agent.js | head -5

Expected: You find where to add the check.

Step 3: Fail on scrollWidth exceeding clientWidth

node -e "console.log('pattern: for each button, nav item, and chip: fail when scrollWidth exceeds clientWidth plus 1px tolerance')"

Expected: Overflows become failures.

Step 4: Re-run the German QA pass

node scripts/qa-agent.js --locale de | tail -3

Expected: Truncated buttons now fail the test.

When to use this

• A QA agent misses truncated German strings
• Buttons overflow but tests pass

When NOT to use this

• The truncation is intentional with ellipsis styling, allowlist those
• Text overflows in all languages, fix the layout

Tool and version compatibility

• DOM overflow measurement, scrollWidth vs clientWidth
• German long-word expansion

Variant phrasings

overflow in nav items not buttons

Same assertion on nav selectors. Any fixed-width element with translated text qualifies.

ellipsis is the design

Then assert the ellipsis renders, title attribute holds the full text. Truncation with affordance is fine.

Why it happens

Screenshot diffs compare against baselines, and if the baseline already shows truncated text, the diff passes. Pixel comparison cannot know the text is cut, only DOM measurement can.

Edge cases

• 1px tolerance avoids subpixel false positives
• Dynamic content needs the check after data loads, not on initial render
• Some languages overflow by design in tight chips, set per-component budgets

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_OXUaNOSceguqHl-FVYP5iA