Notes from the testing trenches
Mastering Frontend Testing
Frontend Tester is your go-to resource for in-depth articles, tutorials, and best practices on UI testing, browser testing, visual regression, Playwright, Selenium, Cypress, accessibility testing, and AI-generated tests. Whether you're a seasoned developer or a new tester, we provide practical insights to help you deliver high-quality web applications.
Recent notes
A practical guide to testing ResizeObserver-driven UI updates in real browsers, including how to trigger size changes, wait for layout to settle, and catch re-render loops.
Practical patterns for testing prefers-reduced-motion in browser automation, including animation cancellation checks, motion-safe UI state assertions, and avoiding brittle timing tests.
A practical guide to testing login autofill, cleared inputs, and password manager side effects in real browsers, with Playwright examples and a focus on stable assertions.
A practical guide to test scroll lock in browser automation for modals, drawers, and popovers, including body freezing, scroll restoration, and mobile overscroll edge cases.
A practical guide to testing contenteditable editors in real browsers, with guidance on paste sanitization, selection ranges, undo and redo, DOM normalization, and stable Playwright assertions.
Learn why frontend tests fail after localization changes, how date, number, currency, and timezone formatting affect DOM and screenshots, and how to debug i18n regressions.
A practical evaluation of Endtest for download and print flow testing, covering print previews, new tabs, file downloads, window switching, and what evidence teams should collect when automation hits browser limits.
Learn how browser permission prompts work, what Playwright, Selenium, and Cypress can control, and how to test camera, mic, location, and notification flows without flaky assertions.
A practical selection guide for choosing a load testing tool for frontend latency budgets, with a focus on reproducible latency thresholds, threshold-based load testing, and release gating for performance.
A practical selection guide for choosing a browser testing platform for shadow DOM testing, accessible names testing, and component library regression checks.
A practical walkthrough for isolating visual regression noise from font rendering, subpixel rounding in screenshots, and GPU differences in browser tests, with browser-level debugging steps and mitigation strategies.
A practical debugging guide for browser tests fail after font loading, emoji fallback layout shift, and variable fonts testing, with Playwright examples and failure-mode analysis.
A practical checklist for evaluating a browser testing platform for AI generated tests, human review gates, and release controls, with tradeoffs for flaky UI tests, auditability, and maintenance.
Evaluate a browser testing platform for onboarding flows by checking draft persistence, cross-tab behavior, state recovery, and evidence capture for long multi-step journeys.
Learn why frontend tests fail after a design system token refactor, how design token drift creates noisy failures, and how to separate real regressions from expected style changes.
Learn how to wire AWS S3 into browser tests for fixture downloads, upload verification, and artifact retention, plus when a maintained platform can reduce the plumbing burden.
Selection guide for browser testing platforms that need to verify ARIA live regions, status announcements, toast messages, validation errors, and other screen-reader-adjacent UI changes in real browsers.
A practical tutorial for testing CSS view transitions, route animations, and motion-safe UI changes with Playwright, Selenium, and visual regression checks that wait for stable states.
A practical selection guide for choosing a browser testing platform for React hydration timing, Suspense fallbacks, streaming UI, and hydration flakiness in real browsers.
A practical guide to testing SameSite cookies, partitioned cookies, and third-party cookie changes in Playwright, Selenium, and real browsers, with debugging steps and edge cases.
A practical guide to test CSS scroll snap, sticky headers, and scroll-linked UI in real browsers, with Playwright examples, mobile bug traps, and debugging tips.
A practical guide to test CSS container queries, catch layout shift regression, and cover responsive breakpoints with Playwright, visual checks, and CSS-aware assertions.
Learn why browser tests behave differently on Linux CI runners than on local Mac machines, from fonts and rendering to viewport sizing, headless mode, timing, and environment setup.
Learn how to debug browser tests that fail after CSS view transitions or animated route changes, with practical steps for Playwright, Cypress, Selenium, and visual flakiness.
An opinionated analysis of why frontend test suites slow down as teams add mocks, fixtures, and shared helpers, plus practical ways to find and fix hidden performance costs.
A buyer-focused checklist for choosing a browser testing platform for WebRTC testing, covering camera permission testing, microphone prompts, call preview flows, device handling, and repeatable real-browser validation.
A practical debugging guide for browser tests that fail only on mobile Safari, covering scroll lock issues, sticky header bugs, and safe area insets in Playwright, Selenium, and Cypress.
A practical checklist for testing CSS anchor positioning and popover interactions, covering placement, clipping, focus, browser quirks, visual regression, and cross-browser automation.
Learn how to test browser autofill in web apps across login, checkout, and profile forms with Playwright, Selenium, and Cypress, while avoiding flaky selectors, timing issues, and state pollution.
Learn how to test browser back forward cache behavior, catch state restoration bugs, and verify page lifecycle handling with Playwright, Selenium, and cross-browser workflows.
A practical guide to browser tests fail after React hydration, covering hydration mismatch testing, DOM shape changes, flaky frontend tests, selector drift, and timing fixes.
Learn how to test AI chat widgets in browser automation, including streaming AI responses, stop and regenerate controls, partial renders, and stable selectors without flaky UI tests.
A practical workflow for test accessibility regressions in component libraries with keyboard navigation testing, a11y regression checks, and browser-based validation across real browsers.
A practical buyer guide for choosing a browser testing platform for multi-theme UI coverage, design token drift detection, and design system regression across light, dark, and branded themes.
A practical framework for evaluating AI test generation workflows by selector quality, debuggability, and maintenance cost before brittle UI tests reach production.
A release-focused browser storage migration checklist for testing cookies, localStorage, sessionStorage, and IndexedDB changes, covering auth, saved state, onboarding, rollback, and automation.
A practical browser testing checklist for third-party scripts, cookie consent, tag manager behavior, and script load order regressions across modern frontends.
Learn how to test client-side routing in browser automation, verify SPA back button behavior, and catch scroll restoration bugs with practical Playwright and Selenium patterns.
A practical debugging playbook for browser tests that fail in Chrome headless but pass in real browsers, covering rendering differences, timing issues, fonts, GPU behavior, and browser mode assumptions.
A practical guide to test media queries in browser automation, covering viewport units testing, orientation change UI testing, and stable mobile layout regression testing across Playwright, Selenium, Cypress, and visual validation workflows.
Learn practical patterns to test Shadow DOM, slots, and web components with stable locators, accessibility-first queries, and maintainable Playwright, Selenium, and Cypress tests.
A practical comparison of automated accessibility testing vs manual audit, including WCAG testing coverage, false positives, workflow tradeoffs, and when to use both.
Learn how to add accessibility checks Selenium teams can run in CI using axe-core and Selenium, plus practical patterns for reporting, scoping, and fail thresholds.
A practical guide to visual testing alternatives for end-to-end QA, including visual testing tools, E2E platforms, and screenshot testing options for frontend and QA teams.
A practical accessibility testing checklist for web apps, covering WCAG checks, keyboard support, forms, modals, color contrast, screen readers, and automation tips for QA and frontend teams.
Compare Percy alternatives for visual regression testing, including open-source and SaaS screenshot comparison tools for frontend teams and QA engineers.
A practical guide to Applitools alternatives, comparing visual testing tools for Playwright, Selenium, Cypress, and CI workflows, plus tradeoffs for QA and frontend teams.
Learn how to add accessibility checks to Playwright tests with axe-core, what to assert, how to scope scans, and how to make automated accessibility Playwright checks maintainable in CI.
Learn how to add visual testing with Selenium using screenshot comparison, baselines, diff thresholds, CI storage, and stable selectors. Includes practical code examples and tradeoffs.
Learn how service workers, browser cache, and offline state create flaky UI tests in CI and repeated runs, plus practical debugging and mitigation techniques.
Learn how to build a frontend test signal score to separate trustworthy browser tests from flaky UI suites, visual regression noise, and noisy CI failures.
Learn how to test CSS Grid and Flexbox layouts across viewport changes, content wrapping, and real browsers with practical responsive layout testing techniques.
A practical guide to test microfrontends in browser automation with isolated selectors, stable test IDs, iframe-aware strategies, and shared state controls.
Compare automated accessibility testing tools for web apps, including strengths, limitations, CI fit, and how QA and frontend teams can choose the right option.
A practical browser testing checklist for font loading, FOUT testing, and layout shift regressions, with Playwright examples, failure modes, and CI-friendly checks.
Learn how to debug browser tests that fail after frontend dependency updates in React, Next.js, and design systems, with practical steps for timing, hydration, CSS, and locator issues.
A practical guide to test React Suspense and streaming UI without flaky false failures. Learn how to validate skeleton loading tests, intermediate states, and final render state in Playwright, Cypress, and CI.
A practical rubric for evaluating AI-generated test steps before CI and release gate adoption, with checks for selector quality, assertion value, and failure clarity.
A practical web app notifications testing checklist for toast notifications, badge counts, email triggers, and in-app alerts, with timing, persistence, localization, dismissal, and state sync coverage.
Practical techniques for test infinite scroll in browser automation, including virtualized list testing, lazy loaded content testing, scroll assertions, and ways to avoid brittle waits.
Compare the best accessibility testing tools for QA, frontend, and compliance teams. Learn where automated accessibility testing helps, where it falls short, and how to choose the right stack.
Learn how to test drag-and-drop file uploads, preview rendering, invalid file handling, and client-side validation in Playwright, Selenium, and Cypress.
A metrics-first guide to evaluating AI-generated UI tests in CI, including coverage gaps, selector quality, false positives, edit rate, and failure clarity.
A practical browser testing checklist for dark mode, reduced motion, high-contrast mode, prefers-color-scheme, and other accessibility settings, with Playwright examples and QA guidance.
Learn how to test authentication flows in browser automation without leaking session state, including login, logout, MFA, cookie isolation, local runs, and CI patterns for Playwright, Selenium, and Cypress.
Learn practical patterns for local storage testing, session storage testing, and IndexedDB testing across refreshes, tabs, and logout flows using Playwright, Selenium, and Cypress.
Learn how to test CSS View Transitions with Playwright, Selenium, and visual regression tooling while avoiding flaky screenshots, timing issues, and motion-related noise.
A practical guide to debug layout shift in browser tests, isolate CLS in tests, and reduce unstable screenshots caused by fonts, async content, and responsive breakpoints.
Learn practical strategies for handling dynamic elements in visual testing, including screenshot comparison dynamic elements, stabilizing UI state, and visual testing exclusions.
Learn the difference between visual testing and functional testing, when to use each, where they fail, and how QA and frontend teams can combine them for stronger UI coverage.
Learn how to add visual testing with Playwright using screenshot comparison, baselines, masking, thresholds, and CI workflows for reliable visual regression testing.
Compare the best visual testing tools for frontend teams, including screenshot comparison workflows, frontend visual testing tradeoffs, and practical selection criteria.
A practical comparison of screenshot comparison tools for visual regression testing, with tradeoffs, use cases, and decision criteria for frontend teams and QA engineers.
A practical guide to browser testing in CI, including which logs, screenshots, traces, and artifacts to capture before debugging flaky browser tests.
Learn practical ways to test shadow DOM components in Playwright using resilient selectors, nested shadow roots, locator strategy, and long-lived UI test patterns.
Learn how to test CSS container queries with browser assertions and visual regression checks, including practical Playwright patterns, edge cases, and CI strategies.
A practical comparison of the best visual regression testing tools, screenshot comparison tools, and visual QA tools for frontend, QA, and product teams.
Learn why visual regression tests fail in CI without code changes, including font rendering differences, browser rendering variance, container drift, and animation noise.
Learn how to estimate the real cost of maintaining a mixed Playwright, Selenium, and Cypress UI test stack, including duplicated coverage, debugging time, CI runtime, ownership overhead, and migration options.
A practical review checklist for AI-generated UI tests, covering selectors, assertions, waits, maintainability, hidden assumptions, and when to reject brittle generated test code.
A practical browser compatibility testing workflow for design systems and component libraries, including matrix design, release gates, tooling tradeoffs, and CI automation.
Learn a maintainable workflow to test responsive breakpoints in Playwright using viewport states, boundary checks, and layout assertions instead of a huge device matrix.
Learn a practical workflow for browser locale testing, timezone testing in Playwright, and language switcher testing across dates, currencies, text direction, and region-specific flows.
A practical guide to debug hydration mismatches in React and Next.js apps, isolate SSR hydration mismatch causes, and stop browser test failures caused by DOM changes during hydration.
Learn how to choose visual regression testing for React apps, including React visual testing strategies, screenshot comparison workflows, Storybook fit, CI setup, and when Endtest is the simpler choice.
A practical frontend test pyramid strategy for unit, component, browser, and visual layers, with examples for Playwright, Cypress, Selenium, and visual regression coverage.
Learn how to test CSS animations and transitions with stable visual regression tests using motion freezing, timing control, reduced motion, and separate motion assertions.
A practical analysis of why frontend flakiness in CI is often worse than local failures, covering timing, rendering, browser differences, environment drift, and fixes for flaky UI tests.
A practical cross-browser testing checklist for QA managers and frontend teams, covering browser coverage, execution environments, device matrices, automation, visual checks, accessibility, and CI execution.
Learn how to evaluate a cross-browser testing tool using practical criteria for QA leaders, CTOs, and frontend teams, including coverage, debugging, CI fit, and automation depth.
Compare the best cross-browser testing platforms for automated cross-browser testing, browser cloud testing, visual regression, and no-code workflows.
Compare the best automated cross-browser testing tools, including Endtest, Playwright, Selenium, Cypress, BrowserStack, Sauce Labs, LambdaTest, and more.