General Assembly logo

Lab 15: Simulating a QA Review Process

Introduction

In previous labs, you focused on building and refining websites and applications. In this lab, you’ll step into a Quality Assurance (QA) engineer’s role and perform a structured manual review of a website using browser developer tools.

You will identify layout, performance, and accessibility issues, document findings like a professional QA analyst, and then use AI as a reporting assistant to generate a polished QA report. The final deliverable will be a locally stored, professional QA report (text or PDF) suitable for stakeholders or handoff to developers.

This lab simulates a real-world QA workflow used in software teams before release.

Learning Objectives

By the end of this lab, you will be able to:

  • Conduct a structured manual QA review of a website
  • Use browser developer tools to inspect layout, performance, and accessibility
  • Identify common UI, UX, performance, and accessibility defects
  • Write clear, reproducible QA findings with expected vs actual behavior
  • Use AI to generate a professional QA report from raw findings
  • Define recommended fixes and retest procedures
  • Export and store QA documentation locally in formatted text or PDF form

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • A working website to test (Your own project from a previous lab is recommended)

  • A modern browser:

    • Chrome, Edge, or Firefox

  • Basic familiarity with:

    • HTML & CSS
    • Browser Developer Tools

  • A local text editor or word processor

  • Access to an AI assistant (ChatGPT or equivalent)

Setup Instructions

Step 1 - Choose a Test Target

Select one website to test:

  • Your own lab project (preferred), or
  • A simple static site you previously built

Ensure the site has:

  • Multiple sections or pages
  • Images and layout elements
  • At least one form or interactive component

Open the site in your browser.

Lab Structure

This lab consists of

  1. QA Planning & Checklist
  2. Layout & UI Testing
  3. Performance & Accessibility Review
  4. AI-Generated QA Report
    1. Export & Reflection

Phase 1 - QA Planning & Checklist

Before testing, create a QA checklist in a local text file.

Required Sections

QA Review Scope
- Browser(s) tested
- Viewports tested
- Pages reviewed

Test Categories
- Layout & Responsiveness
- Performance
- Accessibility

Viewports to Test (Minimum)

  • Desktop (≥1200px width)
  • Tablet (~768px)
  • Mobile (~375px)

Phase 2 - Layout & UI Testing

Use Developer Tools → Elements & Responsive Mode.

Tasks

  • Resize viewport and inspect:

    • Text overflow
    • Broken layouts
    • Misaligned elements

  • Check:

    • Navigation behavior
    • Image scaling
    • Form alignment
    • Hover/focus states

Document Each Issue Using This Format

Issue ID: UI-01
Category: Layout
Description: Navigation overlaps hero text on mobile view
Steps to Reproduce:
1. Open site
2. Set viewport to 375px
3. Scroll to top
Expected Result:
Navigation does not obscure content
Actual Result:
Navigation overlaps headline text
Severity: Medium

Capture at least 3 layout/UI issues (real or minor).

Phase 3 - Performance & Accessibility Review

Performance Testing (DevTools → Network / Performance)

  • Reload page with DevTools open

  • Observe:

    • Large images
    • Render-blocking resources
    • Load time spikes

Document at least 2 performance observations.

Accessibility Testing (DevTools → Lighthouse or Accessibility Panel)

Check for:

  • Missing alt text
  • Low contrast text
  • Improper heading order
  • Missing form labels
  • Keyboard navigation issues

Document at least 2 accessibility issues.

Phase 4 - AI-Generated QA Report

Now you will act as a QA lead compiling findings for stakeholders.

Step 1 - Prepare Raw Findings

Copy all documented issues into one file under a heading:

Raw QA Findings

Step 2 - Use AI to Generate the Report

Use the following prompt template:

You are a senior QA engineer.

Using the following QA findings, generate a professional QA report that includes:

1. Executive Summary
2. Testing Scope & Environment
3. Summary of Findings (grouped by Layout, Performance, Accessibility)
4. Detailed Issue Table
5. Recommended Fixes
6. Retest & Verification Procedures
7. Overall Quality Assessment

Write the report in a professional, clear tone suitable for developers and stakeholders.

QA Findings:
[PASTE YOUR FINDINGS HERE]

Review and lightly edit the output for accuracy.

Phase 5 - Export & Reflection

Export Requirements

Choose one:

  • Save as a formatted .txt or .md file
  • Export as a PDF (recommended for realism)

Ensure the report includes:

  • Headings
  • Issue severity
  • Clear retest instructions

Reflection Questions (Answer Briefly)

Include answers at the bottom of your report or in a separate file:

  1. Which category (layout, performance, accessibility) had the most issues?
  2. Which issue would you prioritize fixing first and why?
  3. How did AI help — and where did it still require human judgment?
  4. How would this QA process change for a large production system?

Tips for Success

  • Be realistic: minor issues are still valid QA findings
  • Focus on clarity and reproducibility
  • Think like a QA engineer, not a developer
  • AI is a documentation assistant, not the tester
  • Clear reports are as valuable as bug discovery

What to Expect

Skills Gained

  • Real-world QA workflow experience
  • DevTools confidence
  • Accessibility awareness
  • Professional documentation practice
  • Practical AI-assisted engineering skills

Lab Workflow Summary

Select Site
   ↓
Manual UI Testing (DevTools)
   ↓
Performance & Accessibility Review
   ↓
Document Issues
   ↓
AI-Generated QA Report
   ↓
Export & Reflect