Product Feature

Visual Bug Tracking & Capture

OverlayQA is a visual bug tracking tool that captures UI issues with full technical context from your browser. Click any element on a live webpage to capture its CSS selector, computed style values, a screenshot, and viewport metadata. Every issue is packaged into a structured, dev-ready ticket for your project tracker.

Visual bug tracking with OverlayQA replaces vague reports like "the button looks wrong" with precise, actionable tickets. Every captured issue includes the element's DOM selector, computed CSS properties (padding, font-size, color, border-radius, and more), a cropped screenshot of the element in context, and the page URL, viewport dimensions, and browser metadata. Developers get everything they need to reproduce and fix the issue without asking follow-up questions.

Once captured, export issues to Jira, Linear, Asana, Trello, or Notion with a single click. All technical context travels with the issue, so nothing is lost between QA and development. You can also generate a shareable link to send your issue table to stakeholders who do not use a project tracker.

Why visual bug tracking matters

• Eliminates vague bug reports — Every issue includes the exact element, its CSS properties, and a screenshot, so developers never have to guess what "it looks off" means.
• CSS context included — Computed values like padding, font-size, color, and border-radius are captured alongside the element, giving developers the specifics they need to fix the issue.
• Metadata captured without manual effort — Page URL, viewport dimensions, browser, and OS are recorded with every capture, eliminating the need to copy-paste environment details.
• Export to your tracker in one click — Send structured issues to Jira, Linear, Asana, Trello, or Notion without reformatting. The technical context is preserved end to end.

Frequently asked questions about visual bug capture

What is visual bug capture?

Visual bug capture pins an issue to the exact element on a live page. One click captures a screenshot, the element's CSS selector, computed styles, viewport size, and browser metadata, so developers get reproducible technical context instead of a cropped screenshot.

What technical context is captured with each bug?

Each capture includes a screenshot, the CSS selector, computed CSS values (padding, margin, font size, font family, colors, border radius), the page URL, viewport dimensions, and browser and OS metadata. If a Figma file is connected, the linked frame travels with the issue too.

Does visual bug capture work on localhost and staging?

Yes. The extension runs in your browser, so it captures on localhost, staging, and production. Issues captured from dev or staging URLs get LOCAL or STAGING environment badges, so the team knows where each bug was found.

Where do captured bugs go?

Captured bugs save to your OverlayQA project as structured issues with sequential IDs like OQ-127. From there you can triage in bulk, comment with @mentions, and export to Jira, Linear, Notion, Asana, or Trello with all captured context attached.

Do I have to write the bug report myself?

No. Describe what looks wrong and AI drafts a structured issue with a title, severity, and category. The AI assist is opt-in: it runs when you ask for a draft, not automatically while you type.