feat(visual-regression): protótipo testes visuais Playwright

[alinelariguet]

feat(visual-regression): protótipo testes visuais Playwright

Summary

Adds a visual regression testing prototype using Playwright against the existing sample components in po-angular. The setup uses a dedicated visual-app Angular project (registered in angular.json, rooted at e2e/visual/), completely separate from projects/app/ (which remains untouched for internal behavior validation). Playwright captures screenshots and compares them pixel-by-pixel against committed baselines.

Architecture:

• visual-app — standalone Angular project in angular.json with root at e2e/visual/, its own tsconfig.visual.json (with @po-ui/ng-components path mappings to UI source), bootstrap files in e2e/visual/app/
• Co-localized folder structure: each component gets its own folder under e2e/visual/ containing spec files, and baselines are organized per-component under e2e/visual/__snapshots__/<component>/
• projects/app/ is not modified — reverted to original master state

Folder structure:

e2e/visual/
├── app/                        # Angular app bootstrap (main.ts, app.module.ts, app.component.ts)
├── tsconfig.visual.json        # TypeScript config with @po-ui/ng-components paths
├── __snapshots__/              # Baseline PNGs organized per component
│   ├── po-button/
│   ├── po-input/               # Contains both basic and states baselines
│   └── ...
├── po-button/
│   └── po-button.visual.spec.ts
├── po-input/
│   ├── po-input-basic.visual.spec.ts
│   ├── po-input-states.visual.spec.ts   # 13 state combinations
│   ├── po-input-states.component.ts
│   └── po-input-states.component.html
└── ...  (11 component folders total)

What's included:

• playwright.config.ts — Chromium-only, auto-starts ng serve visual-app, maxDiffPixelRatio: 0.01, animations disabled
• 11 basic visual test specs covering: po-button, po-button-group, po-input, po-checkbox, po-switch, po-select, po-table, po-tag, po-accordion, po-divider, po-progress
• po-input-states deep-dive — a dedicated VisualTestPoInputStatesComponent that renders po-input in 13 distinct property combinations, each with its own Playwright test and baseline snapshot:
  • basic (no properties), label, label + helper, label + help-text, label + helper + help-text, helper (no label), disabled, readonly, required, required + errorMessage, loading, loading + helper, loading + label + helper
• Baseline PNG snapshots in e2e/visual/__snapshots__/ organized per component
• npm scripts: test:visual, test:visual:update, test:visual:report

Demo — regression detection working:

Updates since last revision

• Major restructuring (requested by luiz.vasconcellos):
  • Created separate visual-app Angular project in angular.json (root at e2e/visual/) — no longer uses projects/app/
  • Reverted projects/app/ to original master state (no visual test code remains there)
  • Reorganized e2e/visual/ with co-localized folder structure: each component gets its own folder containing spec + component files + baselines
  • Updated playwright.config.ts to serve visual-app instead of app
• Bug fixes (identified by Devin Review bot):
  • Fixed p-label on loading/loading+helper states (removed — those states should not have labels)
  • Fixed p-required-field-error-message binding — changed from bare attribute to [p-required-field-error-message]="true" (bare attribute evaluates to empty string, preventing error message display)
  • Fixed p-show-required binding — changed from bare attribute to [p-show-required]="true" (bare attribute evaluates to empty string, preventing required indicator asterisk)
• Regenerated all 24 baselines (11 basic samples + 13 po-input states) — all tests pass

Review & Testing Checklist for Human

• Baseline snapshot portability: The committed PNGs were generated on Linux/Chromium. Run npx playwright install chromium then npm run test:visual on your machine — baselines will mismatch on Windows. Regenerate with npm run test:visual:update. Decide whether baselines should be committed or generated in CI only.
• Test locally end-to-end: Run npx playwright install chromium then npm run test:visual — all 24 tests should pass. Try modifying a component's template/style and confirm the test fails with a visual diff. Verify the HTML report shows clear before/after comparison.
• Verify bug fixes: Check the baselines for state-loading and state-loading-helper (should have no label), and state-required and state-required-error (should show asterisk and error message respectively). Compare with the previous broken versions if possible.
• Separate visual-app project: Verify that registering the new visual-app project in angular.json doesn't interfere with existing builds or CI workflows. Try npm run build:ui:lite and other standard build commands to ensure no regressions.
• tsconfig.visual.json paths resolution: The paths use relative references like ./projects/ui/src/public-api from e2e/visual/tsconfig.visual.json. Verify that these resolve correctly when building/serving visual-app.
• Deep relative imports: e2e/visual/app/app.module.ts imports sample components using paths like ../../../projects/ui/src/lib/components/po-button/samples/.... These are fragile if folder structure changes. Verify they work correctly.
• po-button-group locator inconsistency: This test uses page.locator('po-button-group') instead of page.locator('sample-po-button-group-basic') like all other tests. Verify this is acceptable or investigate the root cause.

Notes

• This is a prototype — the basic samples cover 11 representative components, and the po-input states deep-dive demonstrates how to test property interactions. Expanding to all ~100+ samples and adding CI integration would be the next steps.
• No CI pipeline changes are included; the webServer config in playwright.config.ts handles local dev automatically. Visual tests do not run in CI yet.
• First-time setup: Run npx playwright install chromium before running tests. On Windows, baselines will need regeneration with npm run test:visual:update.
• Requested by @alinelariguet, with architectural feedback from luiz.vasconcellos
• Session: https://totvs.devinenterprise.com/sessions/5c85ab5d7935486484961f45a8077db3

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 potential issue.

View 3 additional findings in Devin Review.

[devin-ai-integration]

🟡 po-button-group visual test uses wrong locator for screenshot, inconsistent with all other tests

All 10 other visual test specs use the sample wrapper selector (sample-po-<component>-basic) as the locator for toHaveScreenshot, but po-button-group.visual.spec.ts uses the inner component selector po-button-group instead of the expected sample-po-button-group-basic. This means the screenshot captures only the inner <po-button-group> element rather than the full routed sample component host element. Compare with e.g. e2e/visual/po-button.visual.spec.ts:7 which correctly uses page.locator('sample-po-button-basic').

Suggested change

	await expect(page.locator('po-button-group')).toHaveScreenshot('po-button-group-basic.png');
	await expect(page.locator('sample-po-button-group-basic')).toHaveScreenshot('po-button-group-basic.png');

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Good catch — this was intentional. The sample-po-button-group-basic host element had zero dimensions when I tested, so using it as the locator for toHaveScreenshot produced an empty screenshot. That's why I fell back to po-button-group directly. This is already noted in the PR description under "Review & Testing Checklist" as something to verify.

If the sample wrapper renders correctly in another environment, we can switch to sample-po-button-group-basic for consistency.