Complete Guide to Playwright Assertions with Examples | Hard vs Soft Assertions| Day 5 | Playwright with JavaScript in 30 Days Challenge | Tech Bharat
Assertions in Playwright
Assertions are used to perform validations on web pages during test execution.
They help verify:
- Page URL
- Page title
- Element visibility
- Text validation
- Attribute validation
- Checkbox status
- API responses
- And many more
Official Documentation:
Playwright Assertions Documentation
Types of Assertions
1. Hard Assertions
Hard assertions are the default assertions in Playwright.
If any assertion fails:
- Execution stops immediately
- Remaining code will not execute
- Test will be marked as failed
Example:
await expect(locator).toBeVisible();
2. Soft Assertions
Soft assertions allow test execution to continue even if the assertion fails.
Useful when:
- You want to validate multiple things in a single test
- You do not want execution to stop immediately
Example:
await expect.soft(locator).toBeVisible();
Commonly Used Playwright Assertions
Page Assertions
toHaveURL()
Verifies the page URL.
await expect(page).toHaveURL('https://example.com');
toHaveTitle()
Verifies the page title.
await expect(page).toHaveTitle('Home Page');
Locator Assertions
toBeVisible()
Checks whether the element is visible.
await expect(locator).toBeVisible();
toBeHidden()
Checks whether the element is hidden.
await expect(locator).toBeHidden();
toBeEnabled()
Checks whether the element is enabled.
await expect(locator).toBeEnabled();
toBeDisabled()
Checks whether the element is disabled.
await expect(locator).toBeDisabled();
toBeChecked()
Used for checkbox or radio button validation.
await expect(locator).toBeChecked();
toBeEditable()
Checks whether the element is editable.
await expect(locator).toBeEditable();
toBeEmpty()
Checks whether the element or input field is empty.
await expect(locator).toBeEmpty();
toContainText()
Checks whether the element contains partial text.
await expect(locator).toContainText('Welcome');
toHaveText()
Checks exact text of the element. toHaveText can be only used with Locator object
await expect(locator).toHaveText('Welcome to Playwright');
toHaveAttribute()
Checks whether the element has a specific attribute.
await expect(locator).toHaveAttribute('type', 'text');
toHaveValue()
Checks the value of an input field.
await expect(locator).toHaveValue('Tech Bharat');
toHaveCount()
Checks the exact number of matching elements.
await expect(locator).toHaveCount(5);
toHaveClass()
Checks the CSS class of an element.
await expect(locator).toHaveClass('active');
toHaveCSS()
Checks a CSS property value.
await expect(locator).toHaveCSS('color', 'rgb(255, 0, 0)');
toHaveId()
Checks the ID attribute of an element.
await expect(locator).toHaveId('username');
toBeFocused()
Checks whether the element is focused.
await expect(locator).toBeFocused();
toBeInViewport()
Checks whether the element is visible inside the viewport.
await expect(locator).toBeInViewport();
API Assertion
toBeOK()
Checks whether the API response status is successful.
await expect(response).toBeOK();
Negative Assertions
We can also use negative assertions using the not keyword.
Example:
await expect(locator).not.toBeVisible();
await expect(locator).not.toHaveText('Error');
await expect(locator).not.toHaveCount(10);
Complete List of Important Assertions
await expect(locator).toBeAttached();
await expect(locator).toBeChecked();
await expect(locator).toBeDisabled();
await expect(locator).toBeEditable();
await expect(locator).toBeEmpty();
await expect(locator).toBeEnabled();
await expect(locator).toBeFocused();
await expect(locator).toBeHidden();
await expect(locator).toBeInViewport();
await expect(locator).toBeVisible();
await expect(locator).toContainText();
await expect(locator).toContainClass();
await expect(locator).toHaveAccessibleDescription();
await expect(locator).toHaveAccessibleName();
await expect(locator).toHaveAttribute();
await expect(locator).toHaveClass();
await expect(locator).toHaveCount();
await expect(locator).toHaveCSS();
await expect(locator).toHaveId();
await expect(locator).toHaveJSProperty();
await expect(locator).toHaveRole();
await expect(locator).toHaveScreenshot();
await expect(locator).toHaveText();
await expect(locator).toHaveValue();
await expect(locator).toHaveValues();
await expect(locator).toMatchAriaSnapshot();
await expect(page).toHaveScreenshot();
await expect(page).toHaveTitle();
await expect(page).toHaveURL();
await expect(response).toBeOK();
Hard Assertion vs Soft Assertion Example
Hard Assertion
Execution stops if assertion fails.
await expect(locator).toHaveText('Login');
Soft Assertion
Execution continues even if assertion fails.
await expect.soft(locator).toHaveText('Login');
Best Practices
✅ Use assertions after every important action
✅ Prefer stable locators before assertions
✅ Use toContainText() when partial text is enough
✅ Use soft assertions carefully
✅ Avoid unnecessary waits before assertions
✅ Assertions automatically wait in Playwright, so explicit waits are usually not required
Complete code
import { test, expect } from '@playwright/test';
test('Verify different Playwright assertions', async ({ page }) => {
// Navigate to application
await page.goto('https://demoblaze.com/');
// toHaveURL() : Used to verify the URL of the page
await expect(page).toHaveURL('https://demoblaze.com/');
// toHaveTitle() : Used to verify the title of the page
await expect(page).toHaveTitle('STORE');
// Click on Login button
await page.locator('#login2').click();
// Wait for element to appear
await page.waitForSelector('#nava');
// toBeVisible() : Checks whether the element is visible or not
const logo = page.locator('#nava');
await expect(logo).toBeVisible();
// toBeEnabled() : Verifies whether the element is enabled
// We cannot perform actions if the element is disabled
const userName = page.locator('#loginusername');
await expect(userName).toBeEnabled();
// toHaveAttribute() : Verifies the attribute value of an element
await expect(userName).toHaveAttribute('type', 'text');
// toHaveText() : Verifies the complete text of an element
const loginText = page.locator('#logInModalLabel');
await expect(loginText).toHaveText('Log in');
// toContainText() : Verifies partial text
await expect(loginText).toContainText('Log');
// toHaveValue() : Verifies the value present inside an input field
await userName.fill('Tech Bharat');
await expect(userName).toHaveValue('Tech Bharat');
// toBeEmpty() : Verifies whether an input field is empty
const password = page.locator('#loginpassword');
await expect(password).toBeEmpty();
// toHaveCount() : Verifies the number of matching elements
const links = page.locator('a');
await expect(links).toHaveCount(15);
// toBeChecked() : Used for checkbox or radio button validation
// Example:
// const checkbox = page.locator('#rememberMe');
// await expect(checkbox).toBeChecked();
// toBeDisabled() : Verifies whether the element is disabled
// Example:
// await expect(locator).toBeDisabled();
});
- Join our Telegram channel: https://t.me/thetechbharat
- Join our WhatsApp Group: https://chat.whatsapp.com/BBu2ZXxqASr7AHilRfSUzh?mode=gi_t
- Follow us for more info: www.linkedin.com/in/rajat-bhatti
- Subscribe to our YouTube channel: https://www.youtube.com/@Techbharat12
Post a Comment