Modern Number Formatting

The Old Way: Perl's Commify Function

In the days of Perl, developers often wrote custom functions to format numbers with commas for readability. Here's an example of a Perl function called commify that added commas to numbers:

sub commify {
    local($_) = shift;
    1 while s/^(-?d+)(d{3})/$1,$2/;
    return $_;
}

                

This function:

• Takes a number as input.
• Uses a regular expression to insert commas every three digits from the right.
• Handles negative numbers with the -? pattern.
• Returns the formatted string (e.g., 1234567 becomes 1,234,567).

While effective, this approach is verbose and relies on regex, which can be error-prone and hard to maintain.

The Modern Way: Playwright with TypeScript

Today, when working with modern web automation tools like Playwright and TypeScript, you can achieve the same result using JavaScript's built-in toLocaleString() method. This method is simpler, more readable, and supports internationalization out of the box.

Here's how you can format numbers in a Playwright test with TypeScript:

import { test, expect } from '@playwright/test';
test('Format number with commas', async ({ page }) => {
    await page.goto('https://example.com');
    const number = 1234567;
    const formattedNumber = number.toLocaleString('en-US'); // Outputs: "1,234,567"
    // Example: Set the formatted number in an input field
    await page.locator('#number-input').fill(formattedNumber);
    // Verify the value
    const inputValue = await page.locator('#number-input').inputValue();
    expect(inputValue).toBe('1,234,567');
});

In this example:

• toLocaleString('en-US') formats the number with commas according to the US locale (e.g., 1234567 becomes 1,234,567).
• The formatted number is used in a Playwright test to fill an input field and verify its value.
• No custom regex or loops are needed, making the code cleaner and less prone to errors.

Why toLocaleString() is Better

Using toLocaleString() over the Perl commify function offers several advantages:

• Simplicity: No need for complex regex or manual string manipulation.
• Internationalization: Supports different locales (e.g., de-DE for German formatting with periods: 1.234.567).
• Built-in: Native to JavaScript, so no custom code is required.
• Type Safety: When used in TypeScript, you get type checking for numbers and locale strings.

For example, to format a number for a German audience:

const number = 1234567;
const formattedNumber = number.toLocaleString('de-DE'); // Outputs: "1.234.567"

                

Using toLocaleString() in Playwright

In a real-world Playwright scenario, you might need to format numbers when testing forms, displaying data, or verifying UI elements. Here's a more complete example:

import { test, expect } from '@playwright/test';
test('Test number formatting in a form', async ({ page }) => {
    await page.goto('https://example.com/form');
    const rawNumber = 9876543.21;
    const formattedNumber = rawNumber.toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }); // Outputs: "9,876,543.21"
    // Fill a form input with the formatted number
    await page.locator('#price-input').fill(formattedNumber);
    // Submit the form
    await page.locator('#submit-btn').click();
    // Verify the displayed result
    const displayText = await page.locator('#price-display').textContent();
    expect(displayText).toContain('9,876,543.21');
});

This test formats a number with two decimal places, fills a form, submits it, and verifies the result in the UI.

Conclusion

The transition from Perl's commify to JavaScript's toLocaleString() in a Playwright and TypeScript environment showcases how modern web development simplifies tasks that once required custom solutions. With toLocaleString(), you get a robust, maintainable, and internationally aware solution for number formatting, perfectly suited for browser automation with Playwright.

So, next time you're formatting numbers in your Playwright tests, skip the regex and reach for toLocaleString() - your code will thank you!