Playwright AssertionsDocs

toBeChecked toBeDisabled toBeEditable toBeEmpty toBeEnabled toBeFocused

toBeHidden toBeVisible toContainText toHaveAttribute toHaveClass toHaveCss

toHaveId toHaveText toHaveValue toHaveValues toHaveTitle toHaveURL

toBeChecked

Ensures the Locator points to a checked input.

Example Test :

<input type="checkbox" checked="true" data-testid="input-checkbox-checked"/>
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<input type="radio" checked="true" value="foo" data-testid="input-radio-checked" />
<input type="radio" value="foo" data-testid="input-radio-unchecked" />

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeChecked', async ({ page }) => {
  await page.goto('/playwright-native');
  const inputCheckboxChecked = page.getByTestId('input-checkbox-checked')
  const inputCheckboxUnchecked = page.getByTestId('input-checkbox-unchecked')
  await expect(inputCheckboxChecked).toBeChecked()
  await expect(inputCheckboxUnchecked).not.toBeChecked()
  const inputRadioChecked = page.getByTestId('input-radio-checked')
  const inputRadioUnchecked = page.getByTestId('input-radio-unchecked')
  await expect(inputRadioChecked).toBeChecked()
  await expect(inputRadioUnchecked).not.toBeChecked()
})

toBeDisabled

Docs

Ensures the Locator points to a disabled element. Element is disabled if it has 'disabled' attribute or is disabled via 'aria-disabled'. Note that only native control elements such as HTML button, input, select, textarea, option, optgroup can be disabled by setting 'disabled' attribute. 'disabled' attribute on other elements is ignored by the browser.

link

Example Test :

<button data-testid="button-native-disabled" type="submit" disabled>
  Button Native Disabled
</button>
<input type="text" data-testid="input-native-disabled" placeholder='Input Native Disabled' disabled/>
<a href="#" disabled>link</a>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeDisabled', async ({ page }) => {
  await page.goto('/playwright-native');
  const button = page.getByTestId('button-native-disabled')
  const input = page.getByTestId('input-native-disabled')
  const aTag = page.getByRole('link', { name: 'link' })
  await expect(button).toBeDisabled()
  await expect(input).toBeDisabled()
  await expect(aTag).not.toBeDisabled()
})

toBeEditable

Docs

Ensures the Locator points to an editable element.

Example Test :

<input type="text" value="input editable" data-testid="input-native-editable" placeholder='Input Native Enabled' />

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeEditable', async ({ page }) => {
  await page.goto('/playwright-native');
  const input = page.getByTestId('input-native-editable')
  await expect(input).toBeEditable()
})

toBeEmpty

Docs

Ensures the Locator points to an empty editable element or to a DOM node that has no text.

Example Test :

<span data-testid="not-empty">
  <span data-testid="empty"></span>
</span>
<span data-testid="with-whitespace"> </span>
<span data-testid="with-comment">{/* comment */}</span>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeEmpty', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('empty')).toBeEmpty()
  await expect(page.getByTestId('not-empty')).toBeEmpty()
  await expect(page.getByTestId('with-whitespace')).toBeEmpty()
  await expect(page.getByTestId('with-comment')).toBeEmpty()
})

toBeEnabled

Docs

Ensures the Locator points to an enabled element.

Example Test :

<button data-testid="button-native-enabled" type="submit">
  Button Native Enabled
</button>
<input type="text" data-testid="input-native-enabled" placeholder='Input Native Disabled' />

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeEnabled', async ({ page }) => {
  await page.goto('/playwright-native');
  const button = page.getByTestId('button-native-enabled')
  const input = page.getByTestId('input-native-enabled')
  await expect(button).toBeEnabled()
  await expect(input).toBeEnabled()
})

toBeFocused

Docs

Ensures the Locator points to a focused DOM node.

Example Test :

<button data-testid="button-tobefocused" type="submit">
  Button toBeFocused
</button>
<input type="text" data-testid="input-tobefocused" placeholder='Input toBeFocused' />

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeFocused', async ({ page }) => {
  await page.goto('/playwright-native');
  const button = page.getByTestId('button-tobefocused')
  const input = page.getByTestId('input-tobefocused')
  await button.click()
  await expect(button).toBeFocused()
  await input.click()
  await expect(input).toBeFocused()
})

toBeHidden

Docs

Ensures that Locator either does not resolve to any DOM node, or resolves to a non-visible one.

Visibility Hidden Example

Example Test :

<div data-testid="visibility-hidden" style={{ visibility: 'hidden' }}>
  Visibility Hidden Example
</div>
<div data-testid="display-none" style={{ display: 'none' }}>Display None Example</div>
<div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeHidden', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('does-not-exist')).toBeHidden()
  await expect(page.getByText('Visibility Hidden Example')).toBeHidden()
  await expect(page.getByText('Display None Example')).toBeHidden()
  await expect(page.getByText('Hidden Attribute Example')).toBeHidden()
})

toBeVisible

Docs

Ensures that Locator points to an attached and visible DOM node.

Html Element

Zero Opacity Example

Hidden Parent Example

Visible Example

Title of hidden text

Hidden Details Example

Title of visible text

Visible Details Example

Example Test :

<span data-testid="html-element">
  <span>Html Element</span>
</span>
<svg data-testid="svg-element" className="border border-red-500 rounded mt-2"></svg>
<div data-testid="zero-opacity" style={{ opacity: 0 }}>Zero Opacity Example</div>
<div style={{ opacity: 0 }}>
  <span data-testid="hidden-parent">Hidden Parent Example</span>
</div>
<div data-testid="visible">Visible Example</div>
<details>
  <summary>Title of hidden text</summary>
  Hidden Details Example
</details>
<details open>
  <summary>Title of visible text</summary>
  <div>Visible Details Example</div>
</details>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('html-element')).toBeVisible()
  await expect(page.getByTestId('svg-element')).toBeVisible()
  await expect(page.getByText('Zero Opacity Example')).toBeVisible()
  await expect(page.getByText('Hidden Parent Example')).toBeVisible()
  await expect(page.getByText('Visible Example')).toBeVisible()
  await expect(page.getByText('Hidden Details Example')).toBeVisible()
  await expect(page.getByText('Visible Details Example')).toBeVisible()
})

toContainText

Docs

Ensures the Locator points to an element that contains the given text. You can use regular expressions for the value as well. If you pass an array as an expected value, the expectations are:

Locator resolves to a list of elements.
Elements from a subset of this list contain text from the expected array, respectively.
The matching subset of elements has the same order as the expected array.
Each text value from the expected array is matched by some element from the list.

to Contain Text

Item Text 1
Item Text 2
Item Text 3

Example Test :

<div data-testid="div-tocontaintext">to Contain Text</div>
<ul>
  <li>Item Text 1</li>
  <li>Item Text 2</li>
  <li>Item Text 3</li>
</ul>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toContainText', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('div-tocontaintext')).toContainText('to Contain Text')
  await expect(page.getByTestId('div-tocontaintext')).toContainText('Text')
  await expect(page.locator('ul > li')).toContainText(['Text 1', 'Text 3']);
})

toHaveAttribute

Docs

Ensures the Locator points to an element with given attribute.

Example Test :

<button data-testid="ok-button" type="submit" disabled>
  Ok Button
</button>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveAttribute', async ({ page }) => {
  await page.goto('/playwright-native');
  const button = page.getByTestId('ok-button')
  await expect(button).toBeDisabled()
  await expect(button).toHaveAttribute('disabled', "")
  await expect(button).toHaveAttribute('type', 'submit')
  await expect(button).not.toHaveAttribute('type', 'button')
})

toHaveClass

Docs

Ensures the Locator points to an element with given CSS classes. This needs to be a full match or using a relaxed regular expression.

Example Test :

<button data-testid="delete-button" className="btn extra btn-danger text-sm text-white py-1 px-2 block rounded my-3 bg-blue-500 hover:bg-blue-600 hover:cursor-pointer transition-all">
  Delete item
</button>
<button data-testid="no-classes">No Classes</button>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveClass', async ({ page }) => {
  await page.goto('/playwright-native');
  const deleteButton = page.getByTestId('delete-button')
  const noClasses = page.getByTestId('no-classes')
  await expect(deleteButton).toHaveClass(/extra/)
  await expect(deleteButton).toHaveClass(/btn extra btn-danger text-sm/)
  await expect(deleteButton).not.toHaveClass('btn-link')
  // to check if the element has EXACTLY a set of classes
  await expect(deleteButton).toHaveClass('btn extra btn-danger text-sm text-white py-1 px-2 block rounded my-3 bg-blue-500 hover:bg-blue-600 hover:cursor-pointer transition-all', { exact: true })
  // if it has more than expected it is going to fail
  await expect(deleteButton).not.toHaveClass('btn-danger extra', { exact: true })
  await expect(noClasses).not.toHaveClass(/btn extra btn-danger text-sm/)
})

toHaveCss

Docs

Ensures the Locator resolves to an element with the given computed CSS style.

Example Test :

<button data-testid="button-tohavecss" style={{ display: 'flex' }}>
  toHaveCss
</button>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveCss', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('button-tohavecss')).toHaveCSS('display', 'flex');
})

toHaveId

Docs

Ensures the Locator points to an element with the given DOM Node ID.

Example Test :

<button id="buttonId" data-testid="button-tohaveid">
  toHaveId
</button>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveId', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page.getByTestId('button-tohaveid')).toHaveId('buttonId')
})

toHaveText

Docs

Ensures the Locator points to an element with the given text. If you pass an array as an expected value, the expectations are:

Locator resolves to a list of elements.
The number of elements equals the number of expected values in the array.
Elements from the list have text matching expected array values, one by one, in order.

Text Content

Text 1
Text 2
Text 3

Example Test :

<span data-testid="text-content">Text Content</span>
<ul>
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
</ul>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveText', async ({ page }) => {
  await page.goto('/playwright-native');
  const element = page.getByTestId('text-content')
  await expect(element).toHaveText('Text Content')
  // to match the whole content
  await expect(element).toHaveText(/^Text Content$/)
  // to use case-insensitive match
  await expect(element).toHaveText(/content$/i)
  await expect(element).not.toHaveText('content')
  await expect(page.locator('.tohavetext > li')).toHaveText(['Text 1', 'Text 2', 'Text 3']);
})

toHaveValue

Docs

Ensures the Locator points to an element with the given input value. You can use regular expressions for the value as well.

Example Test :

<input type="text" value="text" data-testid="input-text" />
<input type="number" value={5} data-testid="input-number" />
<input type="text" data-testid="input-empty" />
<select data-testid="select-number" value="second">
  <option value="first">First Value</option>
  <option value="second">Second Value</option>
  <option value="third">Third Value</option>
</select>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveValue', async ({ page }) => {
  await page.goto('/playwright-native');
  const textInput = page.getByTestId('input-text')
  const numberInput = page.getByTestId('input-number')
  const emptyInput = page.getByTestId('input-empty')
  const selectInput = page.getByTestId('select-number')
  await expect(textInput).toHaveValue('text')
  await expect(numberInput).toHaveValue("5")
  await expect(emptyInput).not.toHaveValue("empty")
  await expect(selectInput).toHaveValue('second')
})

toHaveValues

Docs

Ensures the Locator points to multi-select/combobox (i.e. a select with the multiple attribute) and the specified values are selected.

Example Test :

<select id="favorite-colors" multiple>
  <option value="R">Red</option>
  <option value="G">Green</option>
  <option value="B">Blue</option>
</select>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveValues', async ({ page }) => {
  await page.goto('/playwright-native');
  const locator = page.locator("id=favorite-colors");
  await locator.selectOption(["R", "G"]);
  await expect(locator).toHaveValues([/R/, /G/]);
})

toHaveTitle

Docs

Ensures the page has the given title.

Example Test :

<title>Test Playwright Example</title>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveTitle', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page).toHaveTitle(/Playwright Native/)
})

toHaveURL

Docs

Ensures the page is navigated to the given URL.

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toHaveURL', async ({ page }) => {
  await page.goto('/playwright-native');
  await expect(page).toHaveURL(/playwright-native/)
})