Assertions

An assertion is a statement that checks if a condition is true. If the condition is false, the test fails, helping you find issues in your application.

Using Assertions in Playwright

Playwright's testing library includes the expect API, which simplifies writing assertions. You can assert:

• Element visibility or state.
• Page content.
• URLs or navigation.
• Network responses.

Common Assertions in Playwright

1. Checking Element Visibility

Verify if an element is visible on the page.

Example:

await expect(page.locator('button#submit')).toBeVisible();

Check if the element is hidden:

await expect(page.locator('div#loading')).toBeHidden();

2. Checking Element Text

Ensure the text of an element matches your expectation.

Exact Match:

await expect(page.locator('h1')).toHaveText('Welcome to Playwright!');

Partial Match:

await expect(page.locator('p.description')).toContainText('Playwright');

3. Checking Input Values

Verify the value of an input field.

Example:

await expect(page.locator('input#email')).toHaveValue('user@example.com');

4. Checking Page URL

Assert that the browser navigated to the correct URL.

Example:

await expect(page).toHaveURL('https://example.com/dashboard');

5. Checking Element Attributes

Ensure an element has specific attributes or values.

Example:

await expect(page.locator('img#logo')).toHaveAttribute('src', '/images/logo.png');

Advanced Assertions

1. Checking Element States

Playwright can verify if an element is enabled, disabled, checked, or unchecked.

Example:

await expect(page.locator('button#submit')).toBeEnabled(); // Button is enabled
await expect(page.locator('input#agree')).toBeChecked();  // Checkbox is checked

2. Assertions with Timeouts

Sometimes, elements take time to appear or change. Playwright automatically waits before failing an assertion.

Example:

await expect(page.locator('div#success-message')).toBeVisible({ timeout: 5000 });

3. Multiple Assertions (Chaining)

You can chain multiple assertions to check several conditions.

Example:

const button = page.locator('button#submit');
await expect(button).toBeVisible();
await expect(button).toBeEnabled();

Assertions for Network Requests

1. Wait for a Specific Request

Verify that a network request matches your expectations.

Example:

const response = await page.waitForResponse('https://api.example.com/data');
expect(response.status()).toBe(200);

2. Check Response Data

Inspect the content of a network response.

Example:

const response = await page.waitForResponse('https://api.example.com/data');
const responseBody = await response.json();
expect(responseBody.success).toBe(true);

Error Messages in Assertions

If an assertion fails, Playwright provides a clear error message showing:

• What was expected.
• What was actually found.
• Example Error:

Error: expected element to be visible, but it was hidden
Selector: button#submit

Debugging Assertions

1. Use Playwright Debugger

Run tests with the PWDEBUG=1 environment variable to pause and inspect the browser.

2. Add Screenshots for Failures

Capture screenshots when an assertion fails to understand what went wrong.

try {
    await expect(page.locator('button#submit')).toBeVisible();
} catch (error) {
    await page.screenshot({ path: 'error-screenshot.png' });
    throw error; // Re-throw the error
}