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.,
1234567becomes1,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.,1234567becomes1,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-DEfor 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!