---
name: validate-ui
description: Visual validation of Dataverse Model-Driven App UI using Playwright MCP. Screenshots forms, views, apps, and Power Pages to verify layout and check browser console for errors. Use after completing a batch of UI changes — offered to user at end of UI work, not auto-triggered per-change.
argument-hint: "[url-to-validate]"
---

# Validate UI with Playwright

Quick visual validation of UI changes using the Playwright MCP. Not a full test suite — a lightweight "does this look right and is it error-free" check.

## Arguments

- `$ARGUMENTS[0]` — URL to navigate to (form, view, app, Power Pages page)

## When to Use

- After completing a batch of form changes (new fields, layout updates, PCF bindings)
- After deploying web resources to a form
- After updating a Model-Driven App sitemap
- After creating or updating Power Pages content
- After deploying PCF controls to forms
- **NOT after every individual change** — batch validation at the end of UI work

## How to Offer This Skill

When you've completed UI-affecting work, ask the user:

> "UI changes are complete. Want me to do a quick visual validation via Playwright? I'll screenshot the form/page, check for console errors, and verify the layout looks right."

Only proceed if the user agrees. Do not auto-trigger.

## Pre-Flight

1. Verify Playwright MCP is connected (check `/mcp` output)
2. If authentication is needed: check for existing `storageState` file, or authenticate via device code flow first
3. Determine the URL to validate — construct from environment URL + entity + record ID, or use a provided URL

## Validation Process

### Step 1: Navigate and Screenshot

```
playwright_navigate(url: "<target-url>")
playwright_screenshot(name: "initial-load", fullPage: true)
```

Wait for the page to fully load (model-driven apps can take a few seconds for form controls to initialize).

### Step 2: Check Console for Errors

```
playwright_console_messages(level: "error")
```

Review any error messages:
- **"Cannot read property of null"** — a field referenced in JS is not on the form
- **"401/403 from /_api/"** — Power Pages permission issue (missing site settings or table permissions)
- **"Xrm.Page is deprecated"** — web resource using deprecated API
- **Script loading errors** — web resource not found or not published

### Step 3: Inspect DOM (if errors found)

If console errors reference specific elements, inspect the relevant DOM:

```
playwright_evaluate(expression: "document.querySelector('[data-id=\"fieldname\"]')?.textContent")
```

For Power Pages:
```
playwright_evaluate(expression: "document.querySelector('.entitylist')?.innerHTML?.substring(0, 500)")
```

### Step 4: Report

Present findings:
- Screenshot (reference the saved screenshot file)
- Console status: clean (no errors) or list of errors found
- If errors: what they mean and suggested fixes
- Quick layout assessment: does the form/page look structured and complete?

## Guardrails

- **This is a spot-check, not a test suite.** Do not write Playwright scripts or create reusable test files. Use direct MCP tool calls only.
- **Do not modify anything during validation.** This skill is read-only — observe and report, do not fix.
- **Limit to 4-6 Playwright tool calls per validation.** Navigate, screenshot, check console, and optionally inspect 1-2 DOM elements. Keep it lightweight.
- **If the page requires authentication** and no storageState exists, ask the user to log in first rather than attempting automated auth flows.

## Validation

After completing the visual check:
- Report: URL validated, screenshot taken, console error count, key findings
- If errors found: list each error with classification (script error, permission error, missing component, deprecated API)
- Recommend next steps if issues were found (e.g., "The OnLoad handler references a field not on this form — check web resource code")