Playwright's expect function offers a variety of assertions to validate webpage elements, states, and behaviors. Below are the most popular ones, with TypeScript examples.

1. toBeVisible

Verifies that an element is visible on the webpage. This is useful for checking if UI components render correctly.

import { test, expect } from '@playwright/test';
test('should display header', async ({ page }) => {
  await page.goto('https://example.com');
  const header = page.locator('h1');
  await expect(header).toBeVisible();
});

This test navigates to a webpage and checks if an h1 element is visible.

2. toHaveText

Asserts that an element contains the specified text. It can match exact text or a regular expression.

test('should have correct button text', async ({ page }) => {
  await page.goto('https://example.com');
  const button = page.locator('button#submit');
  await expect(button).toHaveText('Submit');
});

Use this to verify text content in buttons, labels, or other elements.

3. toHaveAttribute

Checks if an element has a specific attribute with an expected value, such as class, id, or custom attributes.

test('should have disabled attribute', async ({ page }) => {
  await page.goto('https://example.com');
  const input = page.locator('input#username');
  await expect(input).toHaveAttribute('disabled', '');
});

This is ideal for testing element states like disabled or checked inputs.

4. toBeEnabled / toBeDisabled

Verifies whether an element is enabled or disabled, commonly used for form controls.

test('should have enabled submit button', async ({ page }) => {
  await page.goto('https://example.com');
  const button = page.locator('button#submit');
  await expect(button).toBeEnabled();
});

Use toBeDisabled for the opposite case.

5. toHaveValue

Asserts that an input element (e.g., input, textarea) has a specific value.

test('should have input value', async ({ page }) => {
  await page.goto('https://example.com');
  const input = page.locator('input#username');
  await input.fill('testuser');
  await expect(input).toHaveValue('testuser');
});

Introduction

Automating web testing often involves interacting with elements that lack unique identifiers like IDs or classes. In such cases, Playwright's powerful locator filtering capabilities can save the day. In this post, we'll explore how to filter locators by text content in TypeScript, using a real-world example from the American Freight Refrigerators & Freezers page.

Our goal is to capture the number of items displayed on the page, where the text (e.g., "Showing 24 results") is not tied to a unique ID. We'll use Playwright's text-based filtering and parse the result to extract the number.

The Challenge

On the American Freight page, the text indicating the number of results is displayed dynamically, something like:

Showing 24 results

The element containing this text doesn't have a unique ID or class, making it tricky to locate directly. A naive approach might grab multiple elements with similar text, leading to incorrect results. Playwright's locator filtering allows us to narrow down the search by combining text matching with additional conditions.

Screenshot of the page that I am testing.

Solution: Playwright Locator Filtering

Playwright provides the getByText method to locate elements by their text content. We can further refine this using the filter method to ensure we target the exact element. Here's how it works:

1. Use page.getByText('Showing', { exact: false }) to find elements containing the word "Showing".
2. Apply filter({ hasText: 'results' }) to narrow down to elements that also contain "results".
3. Extract the text content and parse it to get the number using a regular expression.

Below is the complete TypeScript code for the test:

import { test, expect } from '@playwright/test';
test('American Freight Refrigerator Numbers', async ({ page }) => {
  await page.goto('https://www.americanfreight.com/plp/appliances/refrigerators-freezers/695');
  // Locate element with text starting with "Showing" and containing "results"
  const locator = page.getByText('Showing', { exact: false });
  const element = locator.filter({ hasText: 'results' });
  const text = await element.innerText();   
  const match = text.match(/Showing (d+) results/);
  const resultsNumber = match ? match[1] : null;
  
  console.log(`Number of results: ${resultsNumber}`);
  expect(resultsNumber).not.toBeNull();
});

Code Breakdown

Let's dissect the key parts of the code:

• Navigating to the Page: await page.goto(...) loads the American Freight page.
• Locating by Text: page.getByText('Showing', { exact: false }) finds all elements containing "Showing". The exact: false option allows partial matches.
• Filtering: locator.filter({ hasText: 'results' }) refines the locator to only include elements that also contain "results".
• Extracting Text: await element.innerText() retrieves the full text content (e.g., "Showing 24 results").
• Parsing the Number: The regex /Showing (d+) results/ captures the number between "Showing" and "results". The result is stored in resultsNumber.

Why Use Locator Filtering?

Locator filtering is a game-changer for several reasons:

• Precision: It allows you to target elements based on multiple conditions, reducing false positives.
• Flexibility: You can combine text, attributes, or even child elements in the filter.
• Robustness: It handles dynamic content where IDs or classes may change.

In our example, filtering ensured we got the exact element with "Showing" and "results", avoiding other elements with similar text.

Tips for Success

• Inspect the Page: Use browser DevTools to confirm the text content and structure before writing your locator.
• Test Your Locator: Use Playwright's locator.count() or locator.all() to verify how many elements match your criteria.
• Handle Edge Cases: Add checks for null or unexpected text formats, as we did with the regex match.
• Debugging: Log the innerText or use Playwright's tracing to inspect the locator's behavior.

Conclusion

Playwright's locator filtering by text content is a powerful tool for tackling elements without unique identifiers. By combining getByText and filter, we successfully extracted the number of refrigerators from the American Freight page. This approach is versatile and can be adapted to many scenarios in web automation.

Try it out in your next Playwright project, and explore other filtering options like has or hasNotText to handle even more complex cases!

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.

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.

One of its many capabilities PlayWright is measuring page performance metrics, such as load times. In this tutorial, we'll walk through how to use Playwright to record the time it takes for a page to fully load.

Writing the Script

Create a file named measure-load-time.js and add the following code to measure the page load time for a website (e.g., example.com):

const { chromium } = require('playwright');
(async () => {
    // Launch browser
    const browser = await chromium.launch();
    const page = await browser.newPage();
    // Record start time
    const startTime = performance.now();
    // Navigate to the page
    await page.goto('https://example.com');
    // Wait for the page to fully load
    await page.waitForLoadState('load');
    // Record end time
    const endTime = performance.now();
    // Calculate load time
    const loadTime = endTime - startTime;
    console.log(`Page load time: ${loadTime.toFixed(2)} ms`);
    // Close browser
    await browser.close();
})();
            

This script:

• Launches a Chromium browser using Playwright.
• Records the start time using performance.now().
• Navigates to the specified URL.
• Waits for the load event, indicating the page is fully loaded.
• Calculates the load time by subtracting the start time from the end time.
• Outputs the result in milliseconds.

Running the Script

Run the script using Node.js:

node measure-load-time.js
            

You should see output similar to:

Page load time: 1234.56 ms
            

The actual time will vary depending on the website, network conditions, and system performance.