JavaScript Basics for Testers

Why it matters

In a modern web application most of what users do runs through JavaScript, and when it fails the page usually still looks fine: a button does nothing, a spinner keeps turning, a price shows NaN. Often the only evidence is a red message in the browser console, which users never see. A tester who never opens the console misses these failures, or files reports such as "the button doesn't work" that a developer cannot act on.

JavaScript also makes timing part of the behaviour: many defects appear only on a slow network, after an error response or after a second click.

Variables, values and functions

A variable is a named place for a value: const total = 150; cannot be reassigned, let qty = 1; can. Values have types: strings ('150'), numbers (150), booleans (true), objects ({ price: 25 }), arrays ([3, 5]), and undefined (no value set) or null (empty on purpose). A function is a named block of steps that runs when something calls it; reading one often shows which cases the developer forgot, such as a cart item without a product in the example below.

• '5' + 1 gives '51': when either side is a string, + joins instead of adding, and a value read from a text field stays a string until the code converts it. A cart can show 51 items instead of 6.
• 'abc' * 2 gives NaN (not a number), and any calculation with NaN gives NaN, which can end up on screen as a price.
• A missing value used as text appears as the word "undefined" or as an empty label.

// cart.js: the kind of function you will read in a page
function lineTotal(item) {
  const price = item.product.price;  // a number, e.g. 25
  const qty = Number(item.qty);      // the field gives a string, e.g. '2'
  return price * qty;
}

lineTotal({ product: { price: 25 }, qty: '2' });  // 50
lineTotal({ product: undefined, qty: '2' });      // throws a TypeError

Events and asynchronous code

Most page code waits for events. The script attaches a handler to an element, for example button.addEventListener('click', applyCoupon), and the browser calls it each time the event happens. Common events are click, input, change, submit and keydown. A handler runs only for its own events: a check that listens for key presses never runs when a value is pasted with the mouse or filled in by autofill.

Talking to a server takes time, so that code is asynchronous. fetch() sends an HTTP request and at once returns a promise, an object standing for a result that is not there yet. A promise is pending until it is fulfilled with a value or rejected with an error; meanwhile, code that uses await pauses inside its async function and the rest of the page stays usable.

When the answer arrives, the promise is fulfilled with a response object, usually named res: res.ok is true only for statuses 200 to 299, and await res.json() reads the body as JSON, the text format most APIs use for data, written much like a JavaScript object. The fetch() promise is rejected only when the request itself fails, for example on a network error. A 404 or 500 response still fulfils it, so the code must check res.ok.

• The user can act while a request is pending: click again, edit the field, leave the page. Check for duplicate requests and for a waiting state.
• Answers can arrive out of order: in a search box, a slow answer for "ri" can overwrite the newer one for "riyadh".
• Test at least success, an error status and no answer at all (offline or a timeout); a slow answer shows the waiting state.

Try it: API Status Code Simulator Try it: Mock Error Response Generator

How JavaScript breaks a page

When code throws an exception and nothing catches it, the browser abandons the code that was running, that function and every function that called it, and reports the error in the console. Other handlers and scripts keep running, so the rest of the page usually works and only the feature that hit the error goes quiet. In ISTQB terms you observe a failure, caused by a defect that a person introduced through an error (a mistake); JavaScript simply calls its exceptions errors. Typical failures:

• A button does nothing: its handler threw before it changed anything.
• A spinner never stops or a button stays disabled: the line that resets them comes after the one that failed.
• Strange values, often with no error at all, because the code ran to the end with the wrong data: NaN, undefined, [object Object], 51 instead of 6.
• A whole widget is missing: its script file did not load or has a syntax error, so none of its code ran.
• It fails only for some data: an empty list, a missing optional field, a deleted product.

Reading a console error

Open the developer tools (F12 in most desktop browsers) and choose the Console panel; the DevTools lesson covers the other panels. Clear it, repeat the action and read only the new red errors. Below is what lineTotal from the first section reports, in Chrome's wording, when a cart item has no product.

• Type: TypeError (an operation on the wrong kind of value, often undefined), ReferenceError (an unknown name), SyntaxError (code or JSON that cannot be parsed), RangeError (a value out of range).
• Message: here, reading price of undefined, so item.product was missing. Ask which data caused it, for example a product removed from the catalogue. Wording differs between browsers; the type does not.
• Location: file, line and column, cart.js:58:30.
• Stack trace: where the error was thrown on top, each caller below. Read it bottom-up for the story (a button click ran an unnamed handler, which called renderCart, then lineTotal). Uncaught means nothing caught it; (in promise) means a rejected promise.
• Live sites usually minify their code, often into one long line (app.3f9c1.js:1:20431); source maps lead developers back to the original, and a formatter makes it readable for you.

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at lineTotal (cart.js:58:30)
    at renderCart (cart.js:31:17)
    at HTMLButtonElement.<anonymous> (cart.js:12:5)

Try it: JavaScript Formatter

Worked example: the "Apply coupon" button that never finishes

In exploratory testing of the checkout, the expired coupon WELCOME10 leaves the spinner turning forever; a valid coupon works. With the console cleared, the tester repeats the steps and collects the evidence below.

• The server refused the coupon correctly, with 422 (Unprocessable Content: the request was well formed, but the server would not process its content) and an error code.
• The fetch() promise was still fulfilled, and the code never checks res.ok. The error body has no discount, so line 42 throws a TypeError, and line 43, which hides the spinner, never runs.
• Report: "Expired coupon leaves the spinner running and shows no message", with steps, expected result (spinner removed, an expired-coupon message), actual result, the console text and the request and response. Then test the other outcomes: unknown code, server error, slow answer, no network, double click.

Console
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'percent')
    at applyCoupon (checkout.js:42:44)

Network
POST /api/coupons/apply  ->  422   {"error":"COUPON_EXPIRED"}

checkout.js
38  async function applyCoupon() {
39    spinner.hidden = false;
40    const res = await fetch(url, options);
41    const data = await res.json();
42    total.textContent = format(data.discount.percent);
43    spinner.hidden = true;
44  }

Try it: Mock API Response Generator

Frequently asked questions

References

• ECMAScript® Language Specification (ECMA-262)Ecma International / TC39The JavaScript language standard, including the RegExp grammar and semantics, JSON.parse/JSON.stringify and the Date object.
• Fetch StandardWHATWGDefines CORS: preflight requests, the Access-Control-* headers and which responses a browser may expose to a page.
• ISTQB GlossaryISTQBThe standard definitions of testing terms — test case, regression testing, severity, priority, boundary value analysis and the rest.
• JavaScript — MDNMDN Web Docs (Mozilla)MDN's JavaScript guide and reference: the language's syntax, types, objects and built-ins as browsers implement them.