UI Visual Testing

Validates Compose code visual implementation accuracy against YAML design specifications.

Bash
# 1. Build and deploy
./gradlew assembleDebug
adb install app/build/outputs/apk/debug/app-debug.apk

# 2. Get UI screenshot
adb shell screencap -p /sdcard/screenshot.png
adb pull /sdcard/screenshot.png

# 3. Verify component against YAML
compare_component("SliderCard", yaml_spec, actual_screenshot)

Testing Checklist

Copy and complete each item:

Progress:
- [ ] Build APK and deploy to device
- [ ] YAML→Code forward verification (every YAML property correctly implemented in code)
- [ ] Code→YAML reverse verification (every code modifier has YAML definition)
- [ ] Trigger all interaction states (selected/unselected, on/off, dialog open/closed)
- [ ] Component-level screenshot cropping comparison
- [ ] Fix issues and re-verify screenshots

1. Build & Deploy

• Rebuild after any code changes
• Use ADB with real device
• Fix build errors before continuing

2. YAML-Code Bidirectional Verification

Forward: YAML → Code For each property in page YAML and component YAML (color, position, size, state, scrim, padding, scroll bounds), verify correct implementation in code.

Reverse: Code → YAML
Enumerate every layout modifier in Composable code (padding, spacing, size, offset, arrangement, alignment, background, border, clip). For each modifier found, verify corresponding definition exists in YAML specs.

Flag these issues:

• Added padding/margin not in YAML
• Hardcoded values instead of Design Tokens
• Styles applied without YAML definition (background, border, shadow)
• Arrangement/spacing without YAML basis

3. Screenshot Cropping Comparison

Rules:

• NO full-page screenshots only - misses subtle differences
• Decompose page into components - list all independent components (cards, selectors, dialogs, headers)
• Crop ADB and Figma screenshots separately for each component:
  • ADB: adb shell screencap then locate component area
  • Figma: Use get_screenshot on specific component node (not page node)
• Compare at component level - check edges, internal spacing, icon shape/size, text position, background fill boundaries, corner radius

Comparison Order (bottom to top):

Level 1: Atomic elements (icons, text labels, switch sliders)
Level 2: Component internals (slider track & fill, card content layout)  
Level 3: Complete components (SliderCard, SwitchCard, OptionButtons)
Level 4: Area layouts (grid spacing, section spacing)
Level 5: Full page (overall alignment, scroll boundaries)

For each level check:

• Boundary alignment - Do child edges align with parent edges or have gaps?
• Size matching - Does rendered size match YAML dp values (Figma px / 2)?
• Color/transparency - Especially semi-transparent backgrounds

4. Interaction State Visual Verification

Test each interactive component in all YAML-defined states:

• selected/unselected, on/off, dialog open/closed, scrolled positions
• Screenshot each state, verify visual changes match YAML variants

Example 1: Component Verification Input: SliderCard component with padding: 16dp in YAML

KOTLIN
// Verify this code implements YAML correctly
Card(
    modifier = Modifier.padding(16.dp)  // ✓ Matches YAML
)

Example 2: Reverse Check Issue Input: Code with extra spacing not in YAML

KOTLIN
// Problem: Extra padding not in YAML
Column(
    modifier = Modifier.padding(8.dp), // ✗ Not defined in YAML
    verticalArrangement = Arrangement.spacedBy(12.dp) // ✗ YAML says 8.dp
)

Example 3: Screenshot Comparison Input: Crop SliderCard from both sources

• ADB screenshot: Component at coordinates (100,200) to (400,300)
• Figma: get_screenshot("SliderCard_Component")
• Compare: Border radius, internal spacing, slider fill color

• Get coordinates before actions - Use inspect_ui to get precise node coordinates before tapping/scrolling
• No blind clicks - Don't rely on memory or estimates, get exact values from UI hierarchy
• Verify after operations - Screenshot after interactions to confirm effects
• Screenshot storage - Save ADB screenshots to system temp directory, not project directory

• Start with YAML-Code verification before screenshots - catches more issues
• Use component-level cropping, not full-page comparison
• Test all interaction states defined in YAML
• When suspicious of differences, get Figma metadata for pixel-precise comparison
• Fix issues incrementally and re-verify

• Relying only on full-page screenshot comparison
• Skipping reverse verification (Code → YAML)
• Not testing all defined interaction states
• Using estimated coordinates instead of inspecting UI hierarchy
• Comparing different zoom levels between ADB and Figma