This library provides utility matchers for Jest in combination with Playwright. All of them are exposed on the expect object. You can use them either directly or invert them via the .not property like shown in a example below.
npm install -D expect-playwrightTo activate it in your Jest environment you have to include it in your configuration.
{ "setupFilesAfterEnv": ["expect-playwright"] }To activate with the Playwright test runner, use expect.extend() in the config to add the expect-playwright matchers.
// playwright.config.ts import { expect } from "@playwright/test" import { matchers } from "expect-playwright" expect.extend(matchers) // ...The Playwright API is great, but it is low level and not designed for integration testing. So this package tries to provide a bunch of utility functions to perform the common checks easier.
Example which should wait and compare the text content of a paragraph on the page.
// before await page.waitForSelector("#foo") const textContent = await page.$eval("#foo", (el) => el.textContent) expect(textContent).stringContaining("my text") // after by using expect-playwright await expect(page).toMatchText("#foo", "my text")- toBeDisabled
- toBeEnabled
- toHaveSelector
- toHaveSelectorCount
- toMatchText
- toEqualText
- toEqualValue
- toEqualUrl
- toHaveFocus
This function checks if a given element is disabled.
You can do this via a selector on the whole page:
expect(page: Page).toBeDisabled(selector: string, options?: PageWaitForSelectorOptions)
await expect(page).toBeDisabled("#my-element")Or by passing a Playwright ElementHandle:
expect(element: ElementHandle).toBeDisabled(options?: PageWaitForSelectorOptions)
const element = await page.$("#my-element") await expect(element).toBeDisabled()This function checks if a given element is enabled.
You can do this via a selector on the whole page:
expect(page: Page).toBeEnabled(selector: string, options?: PageWaitForSelectorOptions)
await expect(page).toBeEnabled("#my-element")Or by passing a Playwright ElementHandle:
expect(element: ElementHandle).toBeEnabled(options?: PageWaitForSelectorOptions)
const element = await page.$("#my-element") await expect(element).toBeEnabled()expect(page: Page).toHaveSelector(selector: string, options?: PageWaitForSelectorOptions)
This function waits as a maximum as the timeout exceeds for a given selector once it appears on the page.
await expect(page).toHaveSelector("#foobar")When used with not, toHaveSelector will wait until the element is not visible or not attached. See the Playwright waitForSelector docs for more details.
await expect(page).not.toHaveSelector("#foobar")expect(page: Page).toHaveFocus(selector: string, options?: PageWaitForSelectorOptions)
This function checks if the given selector has focus.
await expect(page).toHaveFocus("#foobar") // or via not, useful to only wait 1 second instead of for the default timeout by Playwright which is 30 seconds. await expect(page).not.toHaveFocus("#foobar", { timeout: 1 * 1000, })expect(page: Page).toHaveSelector(value: string)
This function checks if the given URL matches the current page's URL
await expect(page).toEqualUrl("https://github.com")expect(page: Page).toHaveSelector(selector: string, value: number, options?: PageWaitForSelectorOptions)
This function checks if the count of a given selector is the same as the provided value.
await expect(page).toHaveSelectorCount(".my-element", 3)This function checks if the textContent of a given element matches the provided pattern.
You can do this via a selector on the whole page:
expect(page: Page).toMatchText(selector: string, pattern: RegExp | string, options?: PageWaitForSelectorOptions)
await expect(page).toMatchText("#my-element", "MyPattern") await expect(page).toMatchText("#my-element", /MyPattern/)Or without a selector which will use the body element:
expect(page: Page).toMatchText(pattern: RegExp | string)
await expect(page).toMatchText(/Playwright/) await expect(page).toMatchText("Playwright")Or by passing a Playwright ElementHandle:
expect(element: ElementHandle).toMatchText(value: string)
const element = await page.$("#my-element") await expect(element).toMatchText("Playwright")This function checks if the textContent of a given element is the same as the provided value.
You can do this via a selector on the whole page:
expect(page: Page).toEqualText(selector: string, value: string, options?: PageWaitForSelectorOptions)
await expect(page).toEqualText("#my-element", "Playwright")Or without a selector which will use the body element:
expect(page: Page).toEqualText(value: string, options?: PageWaitForSelectorOptions)
await expect(page).toEqualText("Playwright")Or by passing a Playwright ElementHandle:
expect(element: ElementHandle).toEqualText(value: string, options?: PageWaitForSelectorOptions)
const element = await page.$("#my-element") await expect(element).toEqualText("Playwright")This function checks if the value of a given element is the same as the provided value.
You can do this via a selector or the element directly:
expect(page: Page).toEqualValue(selector: string, value: string, options?: PageWaitForSelectorOptions)
await expect(page).toEqualValue("#my-element", "Playwright")Or by passing a Playwright ElementHandle:
expect(element: ElementHandle).toEqualValue(value: string, options?: PageWaitForSelectorOptions)
const element = await page.$("#my-element") await expect(element).toEqualValue("Playwright")import playwright from "playwright-chromium" describe("GitHub Playwright project", () => { it("should should have Playwright in the README heading", async () => { const browser = await playwright.chromium.launch() const page = await browser.newPage() await page.goto("https://github.com/microsoft/playwright") await expect(page).toMatchText("#readme h1", "Playwright") // or also all of them via the not property await expect(page).not.toMatchText("this-is-no-anywhere", { timeout: 1 * 1000, }) await browser.close() }) })There are typings available. For that just import
import "expect-playwright"at the top of your test file or include it globally in your tsconfig.json.