Firefox Browser Testing Guide: Selenium, Playwright, Cross-Browser CSS, and Extension Testing

Firefox is an essential part of any serious web testing workflow. It runs SpiderMonkey (not V8), uses Gecko's layout engine (not Blink), and implements some web standards differently from Chrome. Testing in Firefox catches real bugs that Chrome users will never see. Here's how to use Firefox effectively for browser testing.

Why Firefox Testing Matters

Firefox has ~15-20% global market share — a significant real user base. More importantly:

• Firefox's Gecko engine processes CSS Grid, Flexbox, and some animations differently than Chrome's Blink
• Firefox's SpiderMonkey JS engine can expose spec-compliance bugs that V8 masks
• Firefox extensions (uBlock Origin especially) change how your site loads for a large portion of privacy-conscious users
• Firefox's stricter CORS and CSP enforcement catches security misconfigurations earlier

Firefox DevTools for Testing

The built-in DevTools (F12) cover most testing needs:

Responsive Design Mode (Ctrl+Shift+M): more device options than Chrome DevTools, including custom user agents and touch simulation. Useful for testing CSS breakpoints.

Network Throttling: Network tab → throttling dropdown. Firefox offers "Good 3G", "Regular 3G", "Poor 2G" presets. Add custom profiles for specific use cases (office WiFi simulation, etc.).

Inspector: Firefox's style inspector shows computed values inline and lets you edit CSS live. The CSS specificity visualization is clearer than Chrome's equivalent.

Performance Profiler: profiler.firefox.com or F12 → Performance → Record. Firefox's profiler shows main thread activity, network timing, and JS call trees with better source-map support than Chrome DevTools.

Testing Extensions That Block Ads/Trackers

Most privacy-conscious Firefox users have uBlock Origin. To test your site as they see it:

1. Install uBlock Origin in a test Firefox profile
2. Enable "EasyList" + "EasyPrivacy" + "uBlock filters" (default install)
3. Navigate to your site — note any broken layouts from blocked scripts
4. Check the uBlock Origin popup to see what's being blocked

Common issues:

• Analytics scripts blocked → breaks conversion tracking (expected)
• CDN fonts blocked by privacy lists → fallback fonts render differently
• A/B testing tools blocked → users always see control variant
• Chat widgets blocked → support button disappears

Test with blocking enabled. Design your site so core functionality works without third-party scripts.

Selenium/WebDriver with Firefox

Firefox's WebDriver implementation (geckodriver) is the reference implementation for the WebDriver spec:

from selenium import webdriver
from selenium.webdriver.firefox.options import Options

options = Options()
options.headless = True
driver = webdriver.Firefox(options=options)
driver.get('https://example.com')
print(driver.title)
driver.quit()

Download geckodriver: github.com/mozilla/geckodriver — keep it updated to match your Firefox version.

For Firefox-specific capabilities:

options.set_preference("network.proxy.type", 1)
options.set_preference("network.proxy.http", "127.0.0.1")
options.set_preference("network.proxy.http_port", 8080)

Playwright with Firefox

Playwright supports all three engines (Chromium, Firefox, WebKit). For cross-browser testing:

const { chromium, firefox, webkit } = require('playwright');

async function testAcrossBrowsers(url) {
  for (const browserType of [chromium, firefox, webkit]) {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const title = await page.title();
    console.log(`${browserType.name()}: ${title}`);
    await browser.close();
  }
}

Playwright's Firefox uses a patched build that enables CDP (Chrome DevTools Protocol) for automation, so it's slightly different from production Firefox, but layout and JS behavior are accurate.

CSS Cross-Browser Testing

Firefox frequently renders CSS differently from Chrome. Key areas to test:

Flexbox: Firefox is stricter about flex item min-size. min-width: 0 on flex items is often needed in Firefox when it's not in Chrome.

CSS Grid: mostly consistent now, but older code may show gaps.

CSS Subgrid: Firefox led adoption; Chrome support came later. Test if using subgrid.

Scrollbar appearance: Firefox uses the OS scrollbar style on macOS and Windows, which affects layout when scrollbars are always-visible.

:focus-visible: Firefox has historically been stricter about keyboard focus indicators. Test tab navigation in both browsers.

Scroll behavior: Firefox has slightly different scroll anchoring behavior in some edge cases.

JavaScript Compatibility Testing

SpiderMonkey (Firefox) and V8 (Chrome) implement the same ECMAScript spec but there are edge cases:

• RegExp named capture groups: behavior differences in some edge cases
• Garbage collection timing: Firefox collects earlier in some scenarios, which can expose bugs where Chrome's later collection masks them
• Module evaluation order: differences can reveal dependency order bugs
• Error message strings: new TypeError().message often differs — don't test against error message text

Run eslint with env: { browser: true, es2022: true } — this doesn't catch engine differences but catches obvious issues.

Testing Firefox-Specific Extensions

If your web app needs to work with common Firefox extensions:

• uBlock Origin: test with default and "medium mode" settings
• Privacy Badger: some first-party domains are flagged
• Firefox Multi-Account Containers: test if your auth flows work across containers (they should, but some OAuth implementations break)
• Tree Style Tab: vertical tabs change browser chrome but not your page

Firefox Developer Edition

Firefox Developer Edition is a separate release channel with DevTools improvements that haven't shipped to stable yet. Worth installing alongside stable Firefox for testing:

• Experimental DevTools features (like the CSS Grid Inspector, which has better visualization)
• Slightly newer JS features
• Less stable but good for development

Download at https://www.mozilla.org/en-US/firefox/developer/

Automated Visual Testing

For visual regression testing across Firefox:

Percy/Chromatic now support Firefox via Selenium/Playwright integrations. Run visual snapshots in both Chrome and Firefox to catch CSS rendering differences.

Playwright's screenshot API:

const browser = await firefox.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot-firefox.png', fullPage: true });

Diff against Chrome screenshots to find cross-browser rendering differences.

The Firefox Profile for Testing

Create a dedicated testing profile with:

• No saved passwords (to test login forms fresh)
• Extensions installed (uBlock at default, maybe Privacy Badger)
• No cookies (or clear before each test run)
• DevTools open by default

firefox -P testing to launch the testing profile directly.

For CI/CD integration with headless Firefox:

# Run tests headless
MOZ_HEADLESS=1 firefox --headless https://example.com
# Or via Playwright/Selenium which handle headless mode themselves