A closed select control can match Figma perfectly and still fail the moment it opens. The option panel may use browser-native styling, escape the viewport, appear behind a modal, lose the selected value, or behave differently with a keyboard. Dropdown QA must cover the trigger, floating panel, content states, and selection lifecycle—not one static screenshot.
Start by identifying what kind of control the design represents. A native HTML select, custom listbox, combobox with text input, disclosure menu, and multi-select solve different problems and carry different interaction expectations. Visual similarity does not make them interchangeable.
Create a state matrix before comparing pixels
List the exact states supported by the implementation:
| Area | States to capture |
|---|---|
| Trigger | default, hover, focus, disabled, invalid, value selected |
| Panel | opening, open, scrolling, above trigger, below trigger |
| Option | default, hover, focused, selected, disabled |
| Content | short list, long list, long label, no results, grouped options |
| Environment | page scroll, modal, narrow viewport, zoom, mobile keyboard |
Add loading, async failure, “create new,” icons, descriptions, or multiple selection only if the product actually supports them. The matrix should reflect the component contract, not every state a generic UI library could theoretically provide.
Use deterministic fixture data. Include a one-character label, a very long label, similar option names, a disabled option, and enough rows to require scrolling. If the menu supports localization, add a locale that expands labels. Keep real customer data out of screenshots and test fixtures.
Match the closed trigger first
At the design viewport, compare the implemented trigger with its Figma reference. Check:
- width, height, padding, border, and corner radius;
- label, placeholder, value, and helper-text alignment;
- icon size, direction, and distance from text;
- focus ring and error treatment;
- truncation or wrapping behavior;
- alignment with neighboring form controls.
Do not “fix” a mismatch by applying a transform to the entire component. That may align the closed trigger while making the floating panel, focus ring, and pointer target wrong. Diagnose whether the difference comes from typography, box sizing, inherited line height, browser appearance, or a genuinely incorrect dimension.
If the product uses a native select, separate browser or operating-system rendering from implementation drift. The native option panel may not be fully styleable. The team should decide whether platform-native behavior is intentional rather than logging every system difference as a CSS bug.
Capture the open panel in boundary conditions
Open the menu near the top, bottom, left, and right edges of the viewport. Verify whether the panel flips above the trigger, shifts horizontally, or constrains its height as designed. Scroll the page and any containing modal while it is open. The panel should remain attached to the correct trigger or close intentionally.
Check stacking against sticky headers, dialogs, drawers, cookie notices, and other overlays. A high z-index alone is not proof; transformed ancestors and separate stacking contexts can still place the panel behind another surface.
Compare the panel width rule with the design. Some menus match the trigger width; others expand for content up to a maximum. Long labels should not push the panel off-screen. If text truncates, the user still needs a way to distinguish options.
Verify selection as a sequence
Capture more than the final selected state:
- Focus the trigger.
- Open the panel.
- Move focus through options.
- Select a value.
- Confirm the trigger updates.
- Reopen and confirm the selected option is identifiable.
- Submit or continue and verify the value persists.
For multi-select controls, test adding, removing, clearing, overflowing chips, and announcing the changed count. For searchable comboboxes, test no results, clearing the query, matching text, async loading, and stale responses.
Keyboard behavior and visual QA meet here. The focused option must be visibly distinct from the selected option when those states differ. Escape, arrow keys, Enter, Space, Tab, and type-ahead behavior should follow the chosen control pattern. A screenshot cannot prove the interaction, so record the manual check alongside the visual comparison.
Compare with Pixelay without hiding real causes
Pixelay lets teams overlay a Figma design on a browser implementation to expose visual drift. Use it on the closed trigger and on stable, deliberately captured open states. Match viewport size, zoom, font loading, content fixture, and scroll position before interpreting the overlay.
Dropdown panels are often rendered in a portal near the document root rather than inside the trigger’s component tree. That can change positioning and stacking without changing the trigger. Capture both regions in the same deterministic state and log them separately if needed.
Toggle the overlay rather than relying only on opacity. It is easier to recognize whether an edge belongs to the design or implementation when alternating between them. The frontend design QA triage workflow helps classify systemic token problems separately from one component bug.
Triage findings by impact
Use precise reports:
At 390×844, opening the Country combobox below the fold positions the panel 24 px under the trigger and hides the final options behind the viewport. Expected: panel flips above with an 8 px gap. Reproduced in Safari and Chrome with fixture
long-country-list.
That report is actionable. “Dropdown looks off” is not.
Prioritize issues that block selection, hide content, detach the panel, obscure focus, or show the wrong value. Next address responsive overflow, inconsistent spacing, typography, and icon alignment. Note environment-specific native rendering separately from cross-browser implementation defects.
Re-test the fix at the original viewport and at representative wider and narrower sizes. Then check the component anywhere it appears inside forms, filters, tables, and dialogs. A local CSS fix may solve one placement while breaking another.
For a related floating surface, the tooltip and popover visual QA workflow covers anchors and boundaries, but dropdowns add selection state, form semantics, and keyboard navigation. Completion means the control matches the intended design and behaves like the specific control pattern users were promised.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle