🖥️ Frontend for QA

Learn frontend for testers: read React and Angular source, picture the DOM it produces, and choose durable locators (data-testid, role) instead of fragile XPath and hash classes.

A page that lets a tester look over the frontend developer's shoulder: use component/DOM/render/hydration terms with the same meaning the developer does, read a React/Angular source file and picture the DOM it produces, and pick the most durable locator for any element while asking the developer for the right thing (data-testid, role). One example throughout: the Bug Tracker Board.

What you can learn on this page

  • 🌐 How the Browser Works — The gap between source code and the page you see is like the gap between a BUILDING'S BLUEPRINT and the CONSTRUCTED BUILDING: the blueprint is a static drawing on paper (`index.html`), while the building is the living structure erected from it, with people wal
  • 🧱 HTML: The Raw Material of Locators — HTML is the SKELETON and LABELING system of a building: a `<button>` is a door, a `<nav>` a corridor, and `id`/`class`/`data-*` are the name tags hung on the doors. What you call a locator is really the question "which tag do I read to find th
  • 🎨 CSS: Why It Breaks Locators — CSS is the PAINT and DECORATION layer of a building — and that is exactly why it is dangerous ground for a locator. Classes exist for styling; when a developer changes a color, or modern tools (CSS Modules, styled-components) add a random hash (`__x7f2a`) to t
  • ⚡ JavaScript: Who Changes the DOM — JavaScript is the electrical and automation system of the building: it is the power that makes the page LIVE afterward, makes something happen when a button is pressed, and produces new BugCards when data arrives from the server. Why is JS the layer that conce
  • 🔌 How Frontend and Backend Talk — The conversation between frontend and backend is like the waiter-kitchen relationship in a RESTAURANT: the browser (waiter) carries a request to `/api/v1/bugs`, the server (kitchen) returns JSON, and JS arranges that JSON onto the DOM (the plate). Why should a
  • ⚛️ React: Reading the Source — A React component is like a MOLD in a LEGO-BRICK FACTORY: you write the `BugCard` mold once, then a card is stamped from that mold for each bug. The "material" poured into the mold is the prop (the bug's data), and the mold's output is the real DOM p
  • 🅰️ Angular: Reading the Source — Angular, unlike React, splits the component in TWO: the logic in a `.ts` file, the UI in an `.html` template. This is like the split between the SCRIPT (`.ts` — who does what) and the STAGE LAYOUT (`.html` — what stands where) in a theater play. Why does it co
  • 🎯 Locator Mastery (Heart of the Page) — This group is the HEART of the page: everything you learned in groups A-G (DOM, HTML, CSS, JS, frontend<->backend, React, Angular) converges here into ONE skill — being able to look at any element and pick the most durable locator. Across this group's 8