Please, use built-in Playwright assertions.
The playwright-expect is an assertion library for TypeScript and JavaScript intended for use with a test runner such as Jest or Playwright Test. It lets you write better assertions for end-to-end testing.
TL;DR:
expect-playwright is a great library, but it contains a few methods.
playwright-expect is a great library too, with all major methods and extra features such as waits, ignore case sensitive, trim. All in all, It has everything that you demand to accomplish end-to-end testing needs.
Please, read more about motivation and main features.
- rich and easy to use;
- exhaustive messages and diff highlights;
- can ignore case sensitive and trim values before asserting;
- waits for expectation to succeed;
- works in Jest and Playwright Test;
- built-in types for TypeScript and JavaScript autocompletion.
npm i -D playwright-expect// playwright.config.ts
import { expect } from '@playwright/test';
import { matchers } from 'playwright-expect';
// add custom matchers
expect.extend(matchers);// playwright.config.js
const { expect } = require('@playwright/test');
const { matchers } = require('playwright-expect');
// add custom matchers
expect.extend(matchers);Please, read API documentation
- toBeDisabled
- toBeEnabled
- toBeChecked
- toBeFocused
- toBeVisible
- toContainText
- toContainTitle
- toContainUrl
- toContainValue
- toHaveCount
- toHaveText
- toHaveTitle
- toHaveUrl
- toHaveValue
- toMatchText
All methods, which expects element can accept element in three ways:
- [page, selector] (recommended)
- ElementHandle
- Promise<ElementHandle>
// Using ElementHandle
const title = await page.$('h1');
await expect(title).toHaveText('Home');
// Using Promise<ElementHandle>
await expect(page.$('h1')).toHaveText('Home');
// Using an array of page and selector. Furthermore, you can pass options such as ignoreCase and trim
await expect([page, 'h1']).toHaveText('home', { ignoreCase: true });
// Even more, you can wait for the element before asserting
await expect([page, '.notification']).toHaveText('Success', { timeout: 15000 });
// Also, it could be useful to fail fast, by default it waits for the 10 seconds
await expect([page, '.notification']).toHaveText('success', { timeout: 1000, trim: true });NOTE: You can wait for the element only using the [page, selector] approach
// Using ElementHandle
const button = await page.$('#next');
await expect(title).toBeVisible();
// Using Promise<ElementHandle>
await expect(page.$('#next')).toBeVisible(true); // true here is optional
// Using an array of page and selector
await expect([page, '#next']).toBeVisible(false);// Using ElementHandle
const button = await page.$('#next');
await expect(title).toBeEnabled();
// Using Promise<ElementHandle>
await expect(page.$('#next')).toBeEnabled();
// Using an array of page and selector
await expect([page, '#next']).toBeEnabled(false);
// Also, you can use `not` to verify opposite
await expect([page, '#next']).not.toBeEnabled();
// Even more, you can check that element is disabled
await expect(page.$('#next')).toBeDisabled();await expect(page).toHaveUrl('https://duckduckgo.com/');
// Also, you can wait for the url
await expect(page).toHaveUrl('https://duckduckgo.com/', { timeout: 5000 });
await expect(page).toContainUrl('duck');await expect(page).toHaveTitle('DuckDuckGo — Privacy, simplified.');
await expect(page).toContainTitle('Privacy');
// ignore case sensitive
await expect(page).toContainTitle('privacy', {ignoreCase: true});Yevhen Laichenkov elaichenkov@gmail.com