Regex 101 for Playwright Testers

1. Why testers need regex

A regular expression is a pattern that describes a set of strings. Instead of asking "is this text equal to X", you ask "does this text have this shape". Test automation is full of shape questions:

• Dynamic values. The toast says Order TTA-1043 placed today and Order TTA-2210 placed tomorrow. Equality fails, the shape never changes.
• URLs. You care that the page ended on /cart.html, not about the host, port, or query string in front of it.
• Locators. A button that reads Add to cart on desktop and ADD TO CART on mobile is one pattern with the i flag.
• Log scraping and API responses. Pull the order id out of a message, count the timestamps, check a SKU format.

Two ways to write one in JavaScript:

// Literal: slashes instead of quotes. Compiled once, preferred.
const re1 = /TTA-\d{4}/;

// Constructor: for patterns built at runtime. Backslashes must be doubled.
const re2 = new RegExp("TTA-\\d{4}");

2. Your first match

The engine walks the input one character at a time, trying to start a match at each position. The moment the whole pattern fits, it stops and reports. Nothing magical, just a very fast cursor.

Two calls cover ninety percent of day-to-day use:

const toast = "Order TTA-1043 placed";

/TTA-\d{4}/.test(toast);          // true   (yes or no)
toast.match(/TTA-\d{4}/);          // ["TTA-1043", ...]  (give me the text)

3. Character classes: describing one character

A class matches exactly one character out of a set. Everything bigger is built from these.

Special characters that mean something to the engine (. * + ? ( ) [ ] { } ^ $ | \ /) must be escaped with a backslash when you want them literally:

/cart\.html/.test("cart.html");   // true, the dot is literal
/cart.html/.test("cartXhtml");    // ALSO true. Unescaped dot = any character

4. Quantifiers: how many times

A quantifier sits after a class or group and says how many repetitions are allowed.

Greedy by default, lazy on request

Quantifiers grab as much as they can and give back only if the rest of the pattern cannot fit. Add ? after the quantifier to make it lazy: grab as little as possible.

const html = '<td>Cart</td><td>Total</td>';

html.match(/<td>.*<\/td>/)[0];   // '<td>Cart</td><td>Total</td>'  greedy ate both cells
html.match(/<td>.*?<\/td>/)[0];  // '<td>Cart</td>'                lazy stopped at the first close

5. Anchors and boundaries: where the match may sit

Classes and quantifiers describe the text. Anchors describe the position. They consume no characters.

/^PASS$/.test("PASS");      // true: whole string is exactly PASS
/^PASS$/.test("PASSED");    // false
/PASS/.test("BYPASSED");    // true: unanchored = substring, this bites in assertions

6. The flags

Flags sit after the closing slash and change how the whole pattern behaves.

const log = "12:01:04 login ok\n12:01:09 cart ok\n12:01:15 checkout FAIL";

log.match(/^\d\d:\d\d:\d\d/gm);   // ["12:01:04", "12:01:09", "12:01:15"]
// g = all of them, m = ^ works on every line, not just the first

7. Groups, captures, and alternation

Parentheses do two jobs at once: they group a sub-pattern so a quantifier or alternation can apply to it, and they capture what they matched so you can pull it out.

const toast = "Order TTA-1043 placed for [email protected]";

// Numbered captures
const m = toast.match(/Order (TTA-(\d+))/);
m[0];  // "Order TTA-1043"   the whole match
m[1];  // "TTA-1043"         group 1
m[2];  // "1043"             group 2

// Named captures read like documentation
const g = toast.match(/Order (?<orderId>TTA-\d+)/).groups;
g.orderId;  // "TTA-1043"

// Alternation scoped by a group
/\/(cart|checkout|order-confirmation)\.html/.test("/checkout.html");  // true

8. String methods that take a regex

The regex is the pattern. These are the verbs.

// Replacement can reference the captures: $1 or $<name>
"TTA-1043".replace(/TTA-(\d+)/, "order #$1");          // "order #1043"

// Scrub every timestamp before a snapshot comparison
log.replaceAll(/\d{2}:\d{2}:\d{2}/g, "<TIME>");

// Pull every order id, with groups
for (const m of text.matchAll(/TTA-(?<num>\d+)/g)) {
  console.log(m.groups.num);
}

9. Lookarounds: match here, but only if

A lookaround checks what comes before or after the position without consuming it. The check happens, the cursor does not move.

// The number, only when a rupee marker precedes it
"Total: Rs 1299 (3 items)".match(/(?<=Rs )\d+/)[0];   // "1299", not the 3

// Password rule: 8+ chars, at least one digit, at least one uppercase
const strong = /^(?=.*\d)(?=.*[A-Z]).{8,}$/;
strong.test("Playwright1");   // true
strong.test("playwright");    // false: no digit, no uppercase

10. Regex in Playwright: every surface

Playwright accepts a regex almost everywhere it accepts a string, and the two behave differently. Knowing which surface does what is the practical payoff of this whole page.

Locators

// Case-proof accessible name
page.getByRole('button', { name: /add to cart/i });

// Text with a dynamic number in it
page.getByText(/\d+ items in your cart/);

// Filter rows by pattern
page.locator('tr').filter({ hasText: /out of stock/i });

// Inside a CSS selector, the Playwright-only pseudo-class
page.locator('td:text-matches("TTA-\\d+", "i")');

Assertions

await expect(page).toHaveURL(/\/cart\.html$/);
await expect(badge).toHaveText(/^\d+$/);
await expect(row).toHaveClass(/\bselected\b/);
await expect(input).toHaveValue(/@example\.com$/);

Navigation, network, and test selection

// Wait for any checkout step
await page.waitForURL(/\/checkout(-two)?\.html/);

// Mock two endpoints with one route
await page.route(/\/api\/(cart|orders)/, route =>
  route.fulfill({ json: { ok: true } })
);

// Run only smoke-tagged tests: --grep takes a regex
// npx playwright test --grep "@smoke"
// npx playwright test --grep "@smoke" --grep-invert "@slow"

getByText semantics, precisely

11. Recipes: regex you will actually paste into test code

// The scrub-then-compare pattern for anything dynamic
const clean = (s) => s
  .replaceAll(/\d{2}:\d{2}:\d{2}/g, "<TIME>")
  .replaceAll(/TTA-\d+/g, "<ORDER>");

expect(clean(actualToast)).toBe(clean(expectedToast));

12. Pitfalls that cost real debugging hours

• The stateful g flag. A /g regex remembers lastIndex between calls. Call re.test() twice on the same string and the second call starts where the first stopped, and can return false on a string that matches. Never put g on a regex you use with test().
• new RegExp("\d+") silently loses the backslash. Write "\\d+", or keep patterns as literals.
• Unanchored assertion regexes. toHaveText(/Cart/) passes on "Cart (3)" and "Discart". If you meant equality, write /^Cart$/.
• .* across the whole line. Greedy dots swallow everything and backtrack char by char. Prefer negated classes: [^<]*, [^,]*, [^"]*.
• Escaping the URL dot. /cart.html/ also matches "cartXhtml". Every literal dot in a URL pattern is \..
• matchAll without g throws. TypeError: matchAll must be called with a global RegExp. Same for replaceAll with a regex.
• Catastrophic backtracking. Nested unlimited quantifiers like /(\w+\s*)+$/ can hang on a long non-matching input. If a pattern needs three levels of nesting, simplify it or split the check into two.
• Regex on HTML structure. Matching text shapes inside a cell is fine. Parsing nested markup with regex is how you get unmaintainable tests: that is what locators are for.

13. Ten drills, with solutions

Write each answer yourself before opening the solution. Every drill is a real test-code situation.

"Success! Order TTA-1043 placed".match(/TTA-\d+/)[0];   // "TTA-1043"

await expect(page).toHaveURL(/\/cart\.html$/);

await page.getByRole('button', { name: /^add to cart$/i }).click();

/^\d+\.\d{2}$/.test(cellText);

page.locator('tr').filter({ hasText: /out of stock/i });

const { count } = "3 items in your cart".match(/(?<count>\d+) items/).groups;
Number(count);   // 3

log.replaceAll(/\d{2}:\d{2}:\d{2}/g, "<TIME>");

/^[A-Z]{3}-\d{4}$/.test(sku);

"chromium, firefox ,webkit".split(/\s*,\s*/);
// ["chromium", "firefox", "webkit"]

# both options take a regex
npx playwright test --grep "@smoke" --grep-invert "@slow"

14. Cheat sheet

Regex describes the text. Locating the element that holds the text is its own craft: the CSS Selector Cheat Sheet and the XPath Master Cheat Sheet cover that side. Practice both against the tables practice page and the rest of the Playwright practice library.