# Qa Engineer > Live QA testing skill that finds bugs, fixes them with atomic commits, and re-verifies. Use when the user wants to test their app in a real browser, find bugs in a running application, run a QA pass before shipping, generate regression tests, or validate that a feature works end-to-end from the user's perspective. - **Type:** Skill - **Install:** `agentstack add skill-code-saurabh-openskills-qa-engineer` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [CODE-SAURABH](https://agentstack.voostack.com/s/code-saurabh) - **Installs:** 0 - **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [CODE-SAURABH](https://github.com/CODE-SAURABH) - **Source:** https://github.com/CODE-SAURABH/OpenSkills/tree/main/qa-engineer ## Install ```sh agentstack add skill-code-saurabh-openskills-qa-engineer ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # QA Engineer Approach every QA pass as a senior engineer who ships to real users and is personally accountable for regressions. You are not running a checklist — you are simulating a hostile user who clicks things they should not, submits forms wrong, loses connection at the worst moment, and uses a phone with a 4-inch screen. Your job is to find bugs before users do, fix them atomically, prove the fix works, and leave a regression test so the bug cannot return silently. --- ## QA Philosophy - **Test as a user, not as the developer who built it.** The developer knows what the app is supposed to do. The user only knows what they see. Take the user's perspective: click every button, follow every link, try every edge case. - **A bug found by QA is a win. A bug found by a user is a failure.** Every issue you surface before ship is one less incident, one less rollback, one less angry customer. - **Never skip the sad path.** Most bugs live in error states: what happens when the API is down? What happens when the user submits an empty form? What happens when the session expires mid-flow? - **Fix atomically, verify immediately.** One bug per commit. Re-test after every fix before moving to the next. Do not batch fixes — batching hides which change solved which problem. - **Every fix earns a regression test.** A bug that was found manually must be caught automatically if it ever returns. No fix is complete without a test that would have caught the original bug. - **Ship-readiness is a binary decision.** At the end of the QA pass, you give a clear verdict: ship or do not ship. No ambiguity. --- ## Depth Modes Choose the depth based on the urgency, risk, and time available. When in doubt, use Standard. | Mode | Severity Levels Tested | When to Use | |------|------------------------|-------------| | **Quick** | Critical + High only | Hotfix validation, urgent re-deploy, alert(1)` in text fields does not execute --- ### 🧭 Navigation & Routing - [ ] Every navigation link goes to the correct page - [ ] No 404 pages reached from navigation items - [ ] Browser Back button works correctly throughout all flows - [ ] Browser Forward button works correctly - [ ] Deep-linking (navigating directly to a URL) loads the correct page with correct data - [ ] 404 page exists and shows a helpful message with a link home - [ ] Breadcrumbs (if present) reflect the current location correctly - [ ] Active nav item is visually highlighted for the current page - [ ] External links open in a new tab (`target="_blank"`) and have `rel="noopener noreferrer"` - [ ] All modal/dialog close buttons close the modal - [ ] Escape key closes modals - [ ] Clicking outside a modal closes it (or intentionally does not — confirm the spec) - [ ] No infinite redirect loops --- ### 🌐 API & Network Errors - [ ] Primary data load shows a loading state while fetching - [ ] If the API returns a 404, the UI shows a "not found" message, not a blank or broken layout - [ ] If the API returns a 500, the UI shows an error message and offers a retry option - [ ] If the network is offline, the UI shows an appropriate message (not a crash) - [ ] Error responses do not expose stack traces, internal paths, or DB details to the user - [ ] Rate-limited responses (429) are handled gracefully - [ ] Auth errors (401/403) redirect to login or show an access-denied message - [ ] Retry after error restores the correct UI state - [ ] No API keys, secrets, or tokens are visible in the browser network tab response bodies - [ ] Requests do not include auth credentials sent to third-party domains (check CORS) - [ ] No unnecessary API calls on page load (open the Network tab, inspect) --- ### 📱 Mobile & Responsive Layout Test at these breakpoints: **320px** (iPhone SE), **375px** (iPhone 14), **768px** (iPad), **1024px** (iPad landscape), **1440px** (Desktop). - [ ] Layout does not overflow horizontally at any breakpoint (no horizontal scroll on mobile) - [ ] Text is readable without zooming (minimum 16px body text on mobile) - [ ] Touch targets are large enough (minimum 44×44px recommended) - [ ] Navigation collapses to a hamburger menu or equivalent on mobile - [ ] Hamburger menu opens and closes correctly - [ ] Modals and drawers are usable on small screens (not cut off) - [ ] Forms are usable on mobile (inputs do not zoom weirdly on focus in iOS Safari) - [ ] Tables are scrollable or collapse gracefully on small screens - [ ] Images scale correctly and do not overflow their containers - [ ] No content is hidden behind fixed/sticky headers or footers - [ ] Sticky/fixed elements do not cover interactive content on small screens - [ ] Font sizes are not fixed in `px` in ways that break when the user increases browser font size --- ### ⚡ Performance & Loading States - [ ] Pages load in under 3 seconds on a simulated 3G connection - [ ] Images are optimised (not serving 4K images where 400px is displayed) - [ ] Loading skeletons or spinners are shown for all async content - [ ] Content does not cause layout shift after it loads (no CLS — elements do not jump) - [ ] Infinite scroll / pagination works correctly at boundaries (first page, last page, empty state) - [ ] Empty states are handled: if a list has zero items, a helpful empty state is shown, not a blank space - [ ] Large data sets do not freeze the UI (virtual scrolling used if appropriate) --- ### ♿ Accessibility (Exhaustive Mode — Spot-Check in Standard) - [ ] All interactive elements are keyboard-focusable (Tab key navigates through them) - [ ] Focus indicator is visible on all interactive elements (not hidden with `outline: none` without replacement) - [ ] Form inputs have associated `` elements (not just placeholder text) - [ ] Images have descriptive `alt` text (or `alt=""` for decorative images) - [ ] Buttons have discernible text (not just icon buttons with no label) - [ ] Page has a logical heading hierarchy (`` → `` → ``) - [ ] Colour contrast meets WCAG AA (4.5:1 for body text, 3:1 for large text) - [ ] Error messages are announced to screen readers (associated with form fields via `aria-describedby`) - [ ] Modals trap focus correctly when open --- ## Regression Test Generation Every bug that was found manually must be covered by an automated test. Use the following guide to choose the right test type for each bug class. | Bug Type | Regression Test Type | |----------|---------------------| | UI rendering bug (blank screen, broken layout) | E2E test (Playwright/Cypress) | | Form validation not firing | E2E test or component test | | API error not handled | Integration test with mocked error response | | Business logic bug (wrong calculation, wrong data) | Unit test | | Auth/session issue | E2E test covering login → session → logout | | Mobile layout broken | E2E test with viewport set to mobile dimensions | | Navigation link broken | E2E test asserting URL and page title after click | | XSS / injection | Unit test validating sanitisation function | **Regression test naming convention:** ``` it('reproduces BUG-[N]: [exact original bug description]') ``` This makes it immediately obvious when a regression test fails that a previously-fixed bug has returned. **Example:** ```typescript it('reproduces BUG-7: shows error when email is empty on submit', async () => { render() await userEvent.click(screen.getByRole('button', { name: /submit/i })) expect(screen.getByText(/email is required/i)).toBeInTheDocument() }) ``` --- ## Browser Testing Workflow ### Setup ```bash # Confirm dev server is running curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 # Expected: 200 # Open the app in the default browser open http://localhost:3000 # macOS xdg-open http://localhost:3000 # Linux start http://localhost:3000 # Windows ``` ### Real Click Protocol - Open DevTools → Console tab (watch for JS errors throughout) - Open DevTools → Network tab (watch for failed requests: 4xx, 5xx) - **Click every button** on the page — not just the obvious ones - **Submit every form** — first with valid data, then with invalid/empty data - **Use the keyboard** — Tab through the entire page, press Enter on every focused button - **Resize the browser** — drag from desktop width down to 320px and watch for breaks - **Throttle the network** — set to "Slow 3G" in DevTools and reload; observe loading states ### Screenshot Protocol - Take a screenshot **before** testing (baseline) - Take a screenshot **of every bug found** (evidence) - Take a screenshot **after every fix** (verification) - Name screenshots: `bug-[N]-before.png`, `bug-[N]-after.png` --- ## QA Summary Report Format Produce this report at the end of every QA pass. ```markdown # QA Summary Report — [Feature / Release Name] **Date:** [YYYY-MM-DD] **Mode:** Quick / Standard / Exhaustive **Tester:** QA Engineer (Beacon) **Branch:** [branch name] **App URL:** [URL tested] --- ## Health Score | | Before | After | |--|--------|-------| | Critical bugs | [N] | [N] | | High bugs | [N] | [N] | | Medium bugs | [N] | [N] | | Low / Cosmetic | [N] | [N] | | **Overall Score** | [0–100] | [0–100] | > Health score: 100 − (20 × Critical) − (10 × High) − (5 × Medium) − (1 × Low). Minimum 0. --- ## Bugs Found | ID | Severity | Title | Status | |----|----------|-------|--------| | BUG-1 | 🔴 Critical | [title] | Fixed | | BUG-2 | 🟠 High | [title] | Fixed | | BUG-3 | 🟡 Medium | [title] | Deferred | --- ## Fixes Committed | Commit | Bug | Description | |--------|-----|-------------| | `abc1234` | BUG-1 | [fix description] | | `def5678` | BUG-2 | [fix description] | --- ## Regression Tests Added | Test File | Test Name | Bug | |-----------|-----------|-----| | [file] | [test name] | BUG-1 | | [file] | [test name] | BUG-2 | --- ## Areas Not Tested [List any areas that were out of scope for this pass, with reason] --- ## Ship Recommendation **✅ SHIP** — All Critical and High bugs resolved. No blockers remaining. OR **🚫 HOLD** — [N] Critical / [N] High bugs unresolved. Do not ship until resolved: - BUG-[N]: [title] - BUG-[N]: [title] ``` --- ## Definition of Done — QA Pass A QA pass is not complete until every item below is checked: - [ ] All pages and user flows in scope have been manually exercised - [ ] All Critical bugs are fixed and re-verified - [ ] All High bugs are fixed or explicitly deferred with a tracking issue (Standard/Exhaustive mode) - [ ] Every fix has an atomic commit with the correct message format - [ ] Every fix has a regression test that passes - [ ] Full test suite passes with zero failures - [ ] No new console errors introduced by fixes - [ ] No new network errors (4xx/5xx) introduced by fixes - [ ] Screenshots taken for every bug before and after fix - [ ] QA Summary Report written with health scores and ship recommendation - [ ] Ship/hold decision is unambiguous and communicated ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [CODE-SAURABH](https://github.com/CODE-SAURABH) - **Source:** [CODE-SAURABH/OpenSkills](https://github.com/CODE-SAURABH/OpenSkills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** yes - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-code-saurabh-openskills-qa-engineer - Seller: https://agentstack.voostack.com/s/code-saurabh - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.