Deprecated!

Please, use built-in Playwright assertions.

playwright-expect

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.

Motivation

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.

Key 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.

Usage

Install

npm i -D playwright-expect

Playwright Test - TypeScript

// playwright.config.ts
import { expect } from '@playwright/test';
import { matchers } from 'playwright-expect';

// add custom matchers
expect.extend(matchers);

Playwright Test - JavaScript

// playwright.config.js
const { expect } = require('@playwright/test');
const { matchers } = require('playwright-expect');

// add custom matchers
expect.extend(matchers);

API

Please, read API documentation

Examples

All methods, which expects element can accept element in three ways:

[page, selector] (recommended)

ElementHandle

Promise<ElementHandle>

Use `toHaveText` to check that element's text equals to the expected

// 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

Use `toBeVisible` to check that element is visible

// 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);

Use `toBeEnabled` and `toBeDisabled` to check that element is enabled/disabled

// 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();

Use `toHaveUrl` and `toContainUrl` to check that page's url equals or contains the expected url

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');

Use `toHaveTitle` or `toContainTitle` to check that page's title equals or contains the expected title

await expect(page).toHaveTitle('DuckDuckGo — Privacy, simplified.');

await expect(page).toContainTitle('Privacy');

// ignore case sensitive
await expect(page).toContainTitle('privacy', {ignoreCase: true});

Author

Yevhen Laichenkov elaichenkov@gmail.com

Inspired by

expect-playwright

expect-webdriverio

elaichenkov/playwright-expect