The QA Learning Curve #11: Arrays — Storing and Working With Lists of Data

A lot of test automation is really just “do this for every item in a list.” Arrays are how JavaScript stores that list in the first place. This post covers the basics like creating one, accessing values, and the methods you’ll actually use.

Creating an array

Syntax:

let arrayName = [item1, item2, item3];

Example:

let testCases = ["login", "signup", "checkout"];
let statusCodes = [200, 404, 500];

An array is just an ordered list, wrapped in square brackets, with each item separated by a comma. Items can be strings, numbers, objects even other arrays.

Accessing values by index

Syntax:

arrayName[index]

Example:

let testCases = ["login", "signup", "checkout"];
console.log(testCases[0]); // "login"
console.log(testCases[1]); // "signup"
console.log(testCases[2]); // "checkout"

Arrays start counting from 0, not 1. So the first item is testCases[0], not testCases[1]. This trips people up constantly — asking for testCases[3] here would return undefined, since there's no fourth item at that position.

Finding the length

Syntax:

arrayName.length

Example:

let testCases = ["login", "signup", "checkout"];
console.log(testCases.length); // 3

.length tells you how many items are in the array. Useful for loops, and for checking that a list actually has the number of items you expect it to.

Adding and removing items

Syntax:

arrayName.push(item);    // adds to the end
arrayName.pop();         // removes from the end

Example:

let testCases = ["login", "signup"];
testCases.push("checkout");
console.log(testCases); // ["login", "signup", "checkout"]

testCases.pop();
console.log(testCases); // ["login", "signup"]

push adds a new item to the end of the array. pop removes the last item. Both change the original array directly, rather than creating a new one.

forEach — looping through every item

Syntax:

arrayName.forEach(function (item) {
  // code to run for each item
});

Example:

let testCases = ["login", "signup", "checkout"];
testCases.forEach(function (testCase) {
  console.log("Running:", testCase);
});
// prints: Running: login, Running: signup, Running: checkout

forEach runs the given code once for every item in the array, handing you each one in order — no need to manage a counter or index yourself.

map — creating a new array from an existing one

Syntax:

let newArray = arrayName.map(function (item) {
  return transformedItem;
});

Example:

let statusCodes = [200, 404, 500];
let statusLabels = statusCodes.map(function (code) {
  return "Status: " + code;
});
console.log(statusLabels);
// ["Status: 200", "Status: 404", "Status: 500"]

Unlike forEach, map doesn't just run code for each item — it builds and returns a brand new array, made up of whatever each function call returns. The original array is left untouched.

filter — picking out only some items

Syntax:

let newArray = arrayName.filter(function (item) {
  return condition;
});

Example:

let statusCodes = [200, 404, 500, 201, 403];
let errorCodes = statusCodes.filter(function (code) {
  return code >= 400;
});
console.log(errorCodes); // [404, 500, 403]

filter builds a new array containing only the items where the condition returns true. Everything else gets left out.

Why this matters for testing

Test data almost always comes as a list — a list of test cases, a list of expected results, a list of elements on a page. Knowing how to loop through one (forEach), reshape one (map), or narrow one down (filter) covers most of what you'll actually do with arrays in Playwright automation, especially when writing data-driven tests.

Key Takeaways

1. Arrays are ordered lists, and indexing starts at 0, not 1.
2. .length gives you the number of items in an array.
3. push and pop add or remove items from the end of an array.
4. forEach runs code for each item; map returns a new transformed array; filter returns a new array with only the matching items.

Still learning, still figuring things out, but excited to keep sharing as I go.