Assertions in Playwright

Cerosh Jacob
2 min readAug 25, 2023

--

Playwright has a number of test assertions that can be used to verify the state of a web page or application. These assertions can be used to ensure that the correct elements are displayed, that the correct values are entered, and that the correct actions are performed.

Some unique features of Playwright assertions compared to Cypress and Selenium are:

  • Playwright assertions are asynchronous, meaning they wait until the expected condition is met before returning. This is useful for verifying the state of a web page or application after an asynchronous action has been performed.
  • Playwright assertions can be chained together, making it easier to write complex assertions. For instance, you could write an assertion that checks if an element is visible and displays the correct text.
  • Playwright allows you to create custom assertions, which can help you verify the state of a web page or application in a way that is not supported by built-in assertions.

Playwright has test assertions in the expect function, including async matches that wait until the expected condition is met.

await expect(locator).toBeChecked();

Ensure that the Locator points to a checked input.

await expect(locator).toBeEnabled();

Ensure that the Locator points to an enabled element.

await expect(locator).toContainText('substring');

This function verifies if the Locator points to an element with the expected text. It can handle regular expressions too. If an array is given, the Locator should point to a list of elements. Elements in a matching subset of this list should contain text from the expected array in the same order. Each value from the expected array must have at least one match in the list.

await expect(locator).toHaveValue(/[0-9]/);

Ensures the Locator points to an element with the specified input value, which can include regular expressions.

await expect(page.getByText('Welcome')).toBeVisible();

Ensure that the Locator points to an attached and visible DOM node.

await expect(page).toHaveTitle(/.*checkout/);

Ensures the page has the given title.

await expect(page).toHaveURL(/.*checkout/);

This function ensures that the page is navigated to the specified URL.

await expect(locator).toHaveAttribute('name', 'value');

Ensures that the Locator points to an element with the specified attribute and value.

await expect(locator).toHaveCSS('color', 'red');

Ensures that the Locator points to an element with the specified CSS property and value.

await expect(locator).toHaveClass('active');

Ensures that the Locator points to an element with the specified CSS class.

await expect(locator).toHaveTexts(['One', 'Two', 'Three']);

Ensures that the Locator points to an element with the specified text values.

await expect(page).toWaitForSelector('.element'); 

Waits for the element with the specified selector to be visible.

await expect(page).toWaitForCondition(() => page.title === 'My Page');

Waits for the page title to become equal to the specified value.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

--

--

No responses yet