Playwright Testing for Internationalization Number and Currency Formats

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Test number formatting, currency display, decimal separators, and locale-specific financial data rendering across international markets. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    Locale["Browser Locale"] --> Format["Intl.NumberFormat"]
    Format --> US["$1,234.56 en-US"]
    Format --> DE["1.234,56 € de-DE"]
    Format --> JP["￥1,235 ja-JP"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

const locales = [
  { locale: 'en-US', currency: 'USD', expected: '$1,234.56' },
  { locale: 'de-DE', currency: 'EUR', expected: '1.234,56 €' },
  { locale: 'ja-JP', currency: 'JPY', expected: '￥1,235' },
  { locale: 'en-IN', currency: 'INR', expected: '₹1,234.56' },
];

for (const { locale, currency, expected } of locales) {
  test(currency formats correctly for ${locale}, async ({ browser }) => {
    const context = await browser.newContext({ locale });
    const page = await context.newPage();
    await page.goto(/pricing?currency=${currency});
    await expect(page.getByTestId('price')).toContainText(expected);
    await context.close();
  });
}

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Playwright Testing for"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

How to set browser locale in Playwright?

Pass locale: 'en-US' in newContext() options or set it in playwright.config.ts use section.

How to test Indian number formatting (lakhs/crores)?

Set locale to 'en-IN' and verify numbers format as 12,34,567 instead of 1,234,567.

Can Playwright test Intl.DateTimeFormat outputs?

Yes, navigate to a page with date displays and assert the format matches expected locale pattern.

How to test currency conversion display?

Mock the currency rate API and verify that prices update and format correctly when currency is changed.

How to test RTL number ordering for Arabic?

Set locale to ar-SA and verify that numbers and currency symbols appear in the correct positions.

Summary

Test number formatting, currency display, decimal separators, and locale-specific financial data rendering across international markets. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles