In this tutorial, we'll create a Playwright script in TypeScript to validate that today's date is present on a web page. This is useful for testing dynamic content, such as date displays in web applications.

Writing the Validation Script

We'll write a script to navigate to a web page, extract text from an element, and verify if it contains today's date. For this example, we'll assume the page displays the date in a format like "April 30, 2025" (you can adjust the format as needed).

Create a file named src/validate-date.ts with the following code:

import { chromium, Browser, Page } from 'playwright';
async function validateTodaysDate(): Promise {
    // Launch browser
    const browser: Browser = await chromium.launch();
    const page: Page = await browser.newPage();
    try {
        // Navigate to the page (replace with your target URL)
        await page.goto('https://example.com');
        // Get today's date in the format "April 30, 2025"
        const today: string = new Date().toLocaleDateString('en-US', {
            month: 'long',
            day: 'numeric',
            year: 'numeric'
        });
        // Locate the element containing the date (adjust selector as needed)
        const dateElement = await page.locator('h1'); // Example: 
April 30, 2025
        const pageDate: string = await dateElement.textContent() || '';
        // Validate the date
        if (pageDate.includes(today)) {
            console.log(`Success: Today's date "${today}" is displayed on the page.`);
        } else {
            console.error(`Failure: Expected "${today}", but found "${pageDate}".`);
        }
    } catch (error) {
        console.error(`Error: ${(error as Error).message}`);
    } finally {
        // Close browser
        await browser.close();
    }
}
// Run the script
validateTodaysDate();
            

This script:

• Launches a Chromium browser using Playwright.
• Formats today's date using toLocaleDateString to match the expected format.
• Navigates to the target page and extracts text from a specified element (e.g., an h1 tag).
• Checks if the element's text contains today's date.
• Logs success or failure and handles errors.

Note: Replace https://example.com with your target URL and adjust the locator selector (e.g., 'h1') to match the element containing the date on your page.

Running the Script

Compile and run the TypeScript script using:

npx ts-node src/validate-date.ts
            

Example output if the date is found:

Success: Today's date "April 30, 2025" is displayed on the page.
            

If the date is not found or an error occurs, you'll see an appropriate error message.

Conclusion

Using Playwright with TypeScript, you can reliably validate dynamic content like today's date on a web page. TypeScript's type safety helps catch errors early, while Playwright's powerful APIs simplify browser automation. Customize the selector and date formats to fit your use case, and consider integrating with Playwright's test framework for robust testing.

For further exploration, try adding visual regression testing or combining with CI/CD pipelines to automate date validation in your workflows.