The ultimate free Visual QA and Website Testing tool for capturing, annotating, and sharing UI bugs.
Wpro Visual QA Annotator is a powerful, open-source testing toolkit designed for web developers, QA engineers, and designers. It allows you to capture full-page website screenshots across multiple responsive breakpoints (Desktop, Laptop, Tablet, Mobile) and visually annotate bugs, layout issues, and design feedback directly in your browser.
Say goodbye to messy bug reports and confusing feedback loops. With Wpro, you can draw boxes, add arrows, and write text notes over exact pixel representations of your web application, then export them instantly.
- 📸 Multi-Viewport Screenshots: Automatically capture full-page screenshots of any URL across Desktop (1920x1080), Tablet (768x1024), and Mobile (375x812) viewports simultaneously.
- 🎨 Visual Annotation Tools: Draw rectangles, arrows, and text directly onto the screenshots to highlight UI bugs or design inconsistencies.
- 🔄 Side-by-Side Sync: Compare different responsive viewports side-by-side with synchronized scrolling.
- 📥 Instant Export: Download your annotated screenshots in high-resolution PNG format to attach to Jira, GitHub Issues, Linear, or Slack.
- ⚡ Next.js & Playwright Powered: Built on modern web technologies ensuring lightning-fast captures and a smooth drawing experience.
- Quality Assurance (QA): Quickly report visual bugs, layout shifts, and responsive design issues with precise visual context.
- Web Development: Verify that your CSS and frontend implementations match the Figma designs across all devices.
- Design & UI/UX: Provide visual feedback and design reviews to development teams without needing external design software.
- Client Feedback: Allow clients to easily point out changes they want on their website.
To run the Wpro Visual QA Annotator locally:
# 1. Clone the repository
git clone https://github.com/your-username/qa-testing-tool.git
cd qa-testing-tool
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:3000 with your browser to access the Wpro dashboard and QA Tool.
- Framework: Next.js (App Router)
- Styling: Tailwind CSS
- Screenshot Engine: Playwright
- Canvas APIs: Native HTML5 Canvas for ultra-fast, zero-dependency annotation drawing.
Contributions are welcome! If you have ideas for new annotation tools, integrations (like automatic Jira ticket creation), or improvements to the screenshot engine, please feel free to submit a Pull Request or open an Issue.
This project is open-source and available under the MIT License.
Keywords: Visual QA tool, website testing, UI testing, responsive testing, bug reporting tool, screenshot annotation, QA automation, Next.js QA tool, Playwright screenshots, web design feedback, frontend testing.