HTML, CSS, and JavaScript for Testers

Why Testers Need Frontend Knowledge #

You do not need to become a frontend developer. But you need to speak enough of the language to have productive conversations with developers, write precise bug reports, and understand what you are testing.

When a tester says “the button is in the wrong place,” a developer has to guess what is happening. When a tester says “the submit button has margin-top: 0 instead of margin-top: 16px, causing it to overlap the form field on screens narrower than 768px,” the developer can fix it in seconds.

This lesson teaches you the minimum frontend knowledge that delivers maximum testing value.

HTML: The Structure #

HTML (HyperText Markup Language) defines the structure and content of a web page. Think of it as the skeleton of the page.

Essential HTML Elements for Testing #

<!-- Headings define document structure -->
<h1>Main Title</h1>
<h2>Section Title</h2>

<!-- Paragraphs and text -->
<p>This is a paragraph of text.</p>
<span>Inline text element</span>

<!-- Links -->
<a href="https://example.com" target="_blank">Click here</a>

<!-- Images -->
<img src="photo.jpg" alt="Description of the image">

<!-- Forms -->
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

<!-- Lists -->
<ul>
  <li>Unordered item</li>
</ul>
<ol>
  <li>Ordered item</li>
</ol>

<!-- Containers -->
<div class="wrapper">Block container</div>
<section>Semantic section</section>
<nav>Navigation area</nav>
<footer>Footer area</footer>

What Testers Should Check in HTML #

Semantic correctness: Are headings used in proper order (h1, then h2, not jumping to h4)? This affects accessibility and SEO.

Form attributes: Does every input have a label? Are required attributes set on mandatory fields? Is the correct type used (email, number, tel)?

Link integrity: Do href attributes point to valid URLs? Do external links have target="_blank" with rel="noopener noreferrer" for security?

Image accessibility: Does every <img> have a meaningful alt attribute? This is not just good practice — it is a legal requirement in many jurisdictions.

Data attributes: Modern frameworks use data-testid or similar attributes for test automation. Check that these exist where needed.

The DOM: HTML in Memory #

When the browser loads HTML, it creates the DOM (Document Object Model) — a live tree structure in memory. JavaScript can modify the DOM, which is why pages change without reloading.

Understanding the DOM matters because:

• The HTML source code and the live DOM can be different (JavaScript modifies it)
• Automated testing tools interact with the DOM, not the source HTML
• “View Source” shows the original HTML; DevTools Elements tab shows the live DOM

CSS: The Presentation #

CSS (Cascading Style Sheets) controls how HTML elements look — colors, sizes, positions, animations, and responsive behavior.

CSS Concepts Testers Must Know #

The Box Model: Every element is a box with content, padding, border, and margin. Most layout bugs trace back to incorrect box model values.

+---------------------------+
|         margin            |
|  +---------------------+ |
|  |      border          | |
|  |  +-----------------+ | |
|  |  |    padding       | | |
|  |  |  +-----------+  | | |
|  |  |  |  content  |  | | |
|  |  |  +-----------+  | | |
|  |  +-----------------+ | |
|  +---------------------+ |
+---------------------------+

Display types: block elements take full width, inline elements flow with text, flex and grid create modern layouts.

Positioning: static (default), relative, absolute, fixed, sticky — each changes how an element is placed on the page.

Media queries: Rules that apply styles based on screen size. This is how responsive design works.

/* Styles for screens narrower than 768px */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

Common CSS Bugs to Watch For #

JavaScript: The Behavior #

JavaScript makes web pages interactive — handling clicks, validating forms, fetching data, updating the page without reloading.

JavaScript Concepts for Testers #

Event handling: When a user clicks a button, JavaScript catches the event and executes code. Bugs occur when event handlers are missing, attached to the wrong element, or fire multiple times.

Asynchronous operations: API calls, timers, and animations are asynchronous — they do not execute instantly. Many bugs occur because code runs before data arrives.

// This is a common bug pattern:
const data = fetchUserData(); // Returns a Promise, not data
console.log(data.name); // Error: data is a Promise object

// Correct approach:
const data = await fetchUserData(); // Waits for data
console.log(data.name); // Works correctly

State management: Modern frameworks (React, Vue, Angular) manage application state. When state updates incorrectly, the UI shows wrong information — stale data, phantom items, or missing updates.

Using the Browser Console #

The console is your testing superpower. Open it with F12 or Cmd+Option+J (Mac) / Ctrl+Shift+J (Windows).

Check for errors: Red messages in the console indicate JavaScript errors. These are bugs, even if the page looks fine.

Query elements: Use document.querySelector('.button-class') to find elements programmatically.

Monitor network: console.log statements from the application reveal the data flow.

Test interactions: You can execute JavaScript directly to trigger actions, change values, or inspect application state.

// Find all broken images on a page
document.querySelectorAll('img').forEach(img => {
  if (!img.complete || img.naturalWidth === 0) {
    console.log('Broken image:', img.src);
  }
});

Hands-On: Inspecting a Real Web Page #

Let us practice the skills from this lesson on a live web page.

Exercise 1: HTML Inspection #

Open any website and use DevTools (F12 > Elements tab):

1. Right-click on the main heading and select “Inspect.” Note the HTML tag (h1, h2, etc.)
2. Find a form on the page. Check each input for:
   • Does it have a label element?
   • Is the type attribute correct (email, password, number)?
   • Are required, minlength, or maxlength attributes set?
3. Find an image. Check if it has a meaningful alt attribute
4. Right-click on a link. Check if href points to a valid destination

Document each finding as you would in a bug report.

Exercise 2: CSS Investigation #

Using the same page:

1. In DevTools, select an element and look at the Styles panel on the right
2. Toggle CSS properties on/off by clicking the checkbox next to each rule
3. Change a margin or padding value and observe the effect
4. Resize the browser window to different widths (1200px, 768px, 375px) and note any layout changes
5. Look for any elements that overflow their containers or overlap other elements

Exercise 3: JavaScript Console Exploration #

Open the Console tab in DevTools:

1. Type document.title and press Enter — this shows the page title
2. Type document.querySelectorAll('a').length — this counts all links on the page
3. Type document.querySelectorAll('img[alt=""]').length — this counts images with empty alt attributes
4. Check for console errors (red messages). Each error is a potential bug
5. Try this accessibility check:

// Find all interactive elements without accessible names
document.querySelectorAll('button, a, input').forEach(el => {
  const name = el.textContent.trim() || el.getAttribute('aria-label') || el.getAttribute('alt') || '';
  if (!name) console.warn('No accessible name:', el.tagName, el.className);
});

Exercise 4: Identifying a Frontend Bug #

Here is a common scenario. A user reports: “The price shows as $NaN on the product page.”

To investigate:

1. Open the Console — look for JavaScript errors
2. Find the price element in the DOM — what is its text content?
3. Search the Network tab for the API response — does it contain valid price data?
4. Check if the JavaScript is parsing the price correctly (string vs. number)

The bug could be:

• Backend: API returns price as a string “19.99” but frontend expects a number
• Frontend: JavaScript uses parseInt instead of parseFloat, losing decimal places
• Data: The product has no price set in the database, returning null

Your investigation determines who should fix it.

Pro Tips for Frontend Testing #

Tip 1: Always check the console. Even if the page looks fine, console errors indicate problems. Performance warnings, deprecation notices, and failed network requests all appear here.

Tip 2: Use device emulation. DevTools has a device toolbar (Ctrl+Shift+M) that simulates different screen sizes and devices. Test at standard breakpoints: 320px, 375px, 768px, 1024px, 1440px.

Tip 3: Disable JavaScript. In DevTools Settings, you can disable JavaScript to test the page’s behavior without it. Does the page show content? Do forms degrade gracefully? This tests accessibility and SEO.

Tip 4: Check font loading. Slow connections may show a flash of unstyled text (FOUT) or invisible text (FOIT) while custom fonts load. Test with network throttling enabled.

Tip 5: Inspect hover and focus states. In DevTools Elements panel, use the :hov button to force hover, focus, active, and visited states. Check that all interactive elements have visible focus indicators for keyboard navigation.

Key Takeaways #

• HTML defines structure — testers should check semantic correctness, form attributes, and accessibility
• CSS controls presentation — common bugs involve overflow, z-index, alignment, and responsive breakpoints
• JavaScript adds interactivity — watch for async errors, event handling bugs, and state management issues
• The DOM is the live representation of the page that testing tools interact with
• The browser console reveals errors invisible to users and is essential for effective debugging
• You do not need to write production code, but reading and understanding frontend code makes you a significantly more effective tester