{"id":13651243,"url":"https://github.com/playwright-community/expect-playwright","last_synced_at":"2026-03-08T02:30:19.783Z","repository":{"id":43924790,"uuid":"251700778","full_name":"playwright-community/expect-playwright","owner":"playwright-community","description":"Expect utility matcher functions to simplify expect statements for the usage with Playwright Test or Jest Playwright.","archived":false,"fork":false,"pushed_at":"2022-02-13T19:02:08.000Z","size":1380,"stargazers_count":142,"open_issues_count":3,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-01T16:26:29.713Z","etag":null,"topics":["e2e-tests","expect","jest","playwright","playwright-test-runner","testing","testing-tools"],"latest_commit_sha":null,"homepage":"https://playwright-community.github.io/expect-playwright/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/playwright-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-31T18:49:10.000Z","updated_at":"2024-04-11T21:03:59.000Z","dependencies_parsed_at":"2022-08-22T23:00:08.352Z","dependency_job_id":null,"html_url":"https://github.com/playwright-community/expect-playwright","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playwright-community%2Fexpect-playwright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playwright-community%2Fexpect-playwright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playwright-community%2Fexpect-playwright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playwright-community%2Fexpect-playwright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/playwright-community","download_url":"https://codeload.github.com/playwright-community/expect-playwright/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219849223,"owners_count":16556325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e2e-tests","expect","jest","playwright","playwright-test-runner","testing","testing-tools"],"created_at":"2024-08-02T02:00:47.034Z","updated_at":"2026-03-08T02:30:19.656Z","avatar_url":"https://github.com/playwright-community.png","language":"TypeScript","funding_links":[],"categories":["Utils","testing"],"sub_categories":[],"readme":"# expect-playwright\n\n![Node.js CI](https://github.com/playwright-community/expect-playwright/workflows/Node.js%20CI/badge.svg)\n[![codecov](https://codecov.io/gh/playwright-community/expect-playwright/branch/master/graph/badge.svg?token=Eay491HC49)](https://codecov.io/gh/playwright-community/expect-playwright)\n[![NPM](https://img.shields.io/npm/v/expect-playwright)](https://www.npmjs.com/package/expect-playwright)\n\n⚠️ We recommend the official [Playwright test runner](https://playwright.dev/docs/intro#first-test) ⚠️\n\nThe Playwright test runner includes all the matchers in this repo plus many more to make testing your projects easy. This doesn't mean, that we stop with maintaining this package.\n\n---\n\nThis 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.\n\n```txt\nnpm install -D expect-playwright\n```\n\n## Usage\n\n### With [Playwright test runner](https://playwright.dev/docs/test-intro)\n\nTo activate with the Playwright test runner, use `expect.extend()` in the config to add the `expect-playwright` matchers.\n\n```js\n// playwright.config.ts\nimport { expect } from \"@playwright/test\"\nimport { matchers } from \"expect-playwright\"\n\nexpect.extend(matchers)\n\n// ...\n```\n\n### With Jest\n\nTo activate it in your Jest environment you have to include it in your configuration.\n\n```json\n{\n  \"setupFilesAfterEnv\": [\"expect-playwright\"]\n}\n```\n\n## Why do I need it\n\nThe [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.\n\nExample which should wait and compare the text content of a paragraph on the page.\n\n```javascript\n// before\nawait page.waitForSelector(\"#foo\")\nconst textContent = await page.$eval(\"#foo\", (el) =\u003e el.textContent)\nexpect(textContent).stringContaining(\"my text\")\n\n// after by using expect-playwright\nawait expect(page).toMatchText(\"#foo\", \"my text\")\n```\n\nBut that's not all! Our matchers also work inside of iframes and accept an [ElementHandle] which targets an `iframe` element or a [Frame] obtained by calling `element.contentFrame()`. Not only that, but if you pass a promise, we will automatically resolve it for you!\n\n```javascript\n// before\nconst element = await page.$(\"iframe\")\nconst frame = await element.contentFrame()\nawait expect(frame).toBeChecked(\"#foo\")\n\n// after\nawait expect(page.$(\"iframe\")).toBeChecked(\"#foo\")\n```\n\n## API documentation\n\n### Table of Contents\n\n- [toBeChecked](#toBeChecked)\n- [toBeDisabled](#toBeDisabled)\n- [toBeEnabled](#toBeEnabled)\n- [toHaveFocus](#toHaveFocus)\n- [toHaveSelector](#toHaveSelector)\n- [toHaveSelectorCount](#toHaveSelectorCount)\n- [toMatchAttribute](#toMatchAttribute)\n- [toMatchComputedStyle](#toMatchComputedStyle)\n- [toMatchText](#toMatchText)\n- [toMatchTitle](#toMatchTitle)\n- [toMatchURL](#toMatchURL)\n- [toMatchValue](#toMatchValue)\n\n### toBeChecked\n\nThis function checks if a given element is checked.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toBeChecked(\"#my-element\")\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toBeChecked()\n```\n\n### toBeDisabled\n\nThis function checks if a given element is disabled.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toBeDisabled(\"#my-element\")\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toBeDisabled()\n```\n\n### toBeEnabled\n\nThis function checks if a given element is enabled.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toBeEnabled(\"#my-element\")\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toBeEnabled()\n```\n\n### toHaveFocus\n\nThis function checks if a given element is focused.\n\nYou can do this via a selector on the whole page:\n\n```js\nawait expect(page).toHaveFocus(\"#foobar\")\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#foobar\")\nawait expect(element).toHaveFocus()\n```\n\n### toHaveSelector\n\nThis function waits as a maximum as the timeout exceeds for a given selector once it appears on the page.\n\n```js\nawait expect(page).toHaveSelector(\"#foobar\")\n```\n\nWhen used with `not`, `toHaveSelector` will wait until the element is not visible or not attached. See the Playwright [waitForSelector](https://playwright.dev/docs/api/class-page#page-wait-for-selector) docs for more details.\n\n```js\nawait expect(page).not.toHaveSelector(\"#foobar\")\n```\n\n### toHaveSelectorCount\n\nThis function checks if the count of a given selector is the same as the provided value.\n\n```javascript\nawait expect(page).toHaveSelectorCount(\".my-element\", 3)\n```\n\n### toMatchAttribute\n\nThis function checks if an element's attribute matches the provided string or regex pattern.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toMatchAttribute(\"#foo\", \"href\", \"https://playwright.dev\")\nawait expect(page).toMatchAttribute(\"#foo\", \"href\", /playwright/)\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#foo\")\nawait expect(element).toMatchAttribute(\"href\", \"https://playwright.dev\")\nawait expect(element).toMatchAttribute(\"href\", /playwright/)\n```\n\n### toMatchComputedStyle\n\nThis function checks if an element's computed style property matches the provided string or regex pattern.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toMatchComputedStyle(\"#my-element\", \"color\", \"rgb(0, 0, 0)\")\nawait expect(page).toMatchComputedStyle(\"#my-element\", \"color\", /rgb/)\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toMatchComputedStyle(\"color\", \"rgb(0, 0, 0)\")\nawait expect(element).toMatchComputedStyle(\"color\", /rgb/)\n```\n\n### toMatchText\n\nThis function checks if the `textContent` of a given element matches the provided string or regex pattern.\n\nYou can do this via a selector on the whole page:\n\n```javascript\nawait expect(page).toMatchText(\"#my-element\", \"Playwright\")\nawait expect(page).toMatchText(\"#my-element\", /Play.+/)\n```\n\nOr without a selector which will use the `body` element:\n\n```javascript\nawait expect(page).toMatchText(\"Playwright\")\nawait expect(page).toMatchText(/Play.+/)\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toMatchText(\"Playwright\")\nawait expect(element).toMatchText(/Play.+/)\n```\n\n### toMatchTitle\n\nThis function checks if the page or frame title matches the provided string or regex pattern.\n\n```javascript\nawait expect(page).toMatchTitle(\"My app - page 1\")\nawait expect(page).toMatchTitle(/My app - page \\d/)\n```\n\n### toMatchURL\n\nThis function checks if the current page's URL matches the provided string or regex pattern.\n\n```javascript\nawait expect(page).toMatchURL(\"https://github.com\")\nawait expect(page).toMatchURL(/github\\.com/)\n```\n\n### toMatchValue\n\nThis function checks if the `value` of a given element is the same as the provided string or regex pattern.\n\nYou can do this via a selector or the element directly:\n\n```javascript\nawait expect(page).toMatchValue(\"#my-element\", \"Playwright\")\nawait expect(page).toMatchValue(\"#my-element\", /Play.+/)\n```\n\nOr by passing a Playwright [ElementHandle]:\n\n```javascript\nconst element = await page.$(\"#my-element\")\nawait expect(element).toMatchValue(\"Playwright\")\nawait expect(element).toMatchValue(/Play.+/)\n```\n\n## Examples\n\n```typescript\nimport playwright from \"playwright-chromium\"\n\ndescribe(\"GitHub Playwright project\", () =\u003e {\n  it(\"should should have Playwright in the README heading\", async () =\u003e {\n    const browser = await playwright.chromium.launch()\n    const page = await browser.newPage()\n    await page.goto(\"https://github.com/microsoft/playwright\")\n    await expect(page).toMatchText(\"#readme h1\", \"Playwright\")\n    // or also all of them via the not property\n    await expect(page).not.toMatchText(\"this-is-no-anywhere\", {\n      timeout: 1 * 1000,\n    })\n    await browser.close()\n  })\n})\n```\n\n## TypeScript\n\nThere are typings available. For that just import\n\n```typescript\nimport \"expect-playwright\"\n```\n\nat the top of your test file or include it globally in your `tsconfig.json`.\n\n## Inspired by\n\n- [expect-puppeteer](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-puppeteer)\n\n[elementhandle]: https://playwright.dev/docs/api/class-elementhandle/\n[frame]: https://playwright.dev/docs/api/class-frame/\n[playwright]: https://playwright.dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaywright-community%2Fexpect-playwright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplaywright-community%2Fexpect-playwright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaywright-community%2Fexpect-playwright/lists"}