{"id":18667,"library":"playright","title":"Playright","description":"Playright is a user-oriented test wrapper for Playwright, porting Selenide/Selene patterns from the Selenium world. At version 0.0.22, it is an early-stage experimental API with release cadence TBD. Key differentiators: fluent API with 'element', 'elements', 'perform', 'have' helpers; supports multi-context/browser/page tests; ships TypeScript types. Unlike raw Playwright, it provides a higher-level declarative style inspired by Selenide, but is still in very early draft and not production-ready.","status":"active","version":"0.0.22","language":"javascript","source_language":"en","source_url":"https://github.com/automician/playright","tags":["javascript","test","testing","playwright","typescript"],"install":[{"cmd":"npm install playright","lang":"bash","label":"npm"},{"cmd":"yarn add playright","lang":"bash","label":"yarn"},{"cmd":"pnpm add playright","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency: Playright wraps Playwright for browser automation","package":"playwright","optional":false}],"imports":[{"note":"ESM-only; director is a named export that manages browser, context, and page lifecycle","wrong":"const director = require('playright').director","symbol":"director","correct":"import { director } from 'playright'"},{"note":"Named export for locating a single element by CSS selector","wrong":"","symbol":"element","correct":"import { element } from 'playright'"},{"note":"Named export for locating multiple elements by CSS selector","wrong":"","symbol":"elements","correct":"import { elements } from 'playright'"},{"note":"Named export to navigate the current page to a URL","wrong":"","symbol":"goto","correct":"import { goto } from 'playright'"},{"note":"Named export containing actions like press, click, etc.","wrong":"","symbol":"perform","correct":"import { perform } from 'playright'"},{"note":"Named export for assertions such as texts, cssClass, count, etc.","wrong":"","symbol":"have","correct":"import { have } from 'playright'"},{"note":"Named export for managing test stages or contexts","wrong":"","symbol":"stage","correct":"import { stage } from 'playright'"}],"quickstart":{"code":"import { director, goto, element, elements, perform, have } from 'playright';\n\ndescribe('TodoMVC', () => {\n  beforeAll(async () => {\n    jest.setTimeout(60 * 1000);\n    director.assign({ launchOptions: { headless: false } }); // true by default\n  });\n  afterEach(async () => {\n    await director.dispose();\n  });\n\n  it('should complete todo', async () => {\n    await goto('http://todomvc.com/examples/emberjs');\n    await element('#new-todo').type('a').then(perform.press('Enter'));\n    await element('#new-todo').type('b').then(perform.press('Enter'));\n    await elements('#todo-list li').should(have.texts('a', 'b'));\n\n    await elements('#todo-list li').first.element('.toggle').click();\n    await elements('#todo-list li').by(have.cssClass('completed')).should(have.texts('a'));\n  });\n});","lang":"typescript","description":"Shows basic Playright API: director setup, navigating, typing, chaining actions with perform, and asserting with have on element collections."},"warnings":[{"fix":"Pin exact version and expect breaking changes.","message":"Early draft: API is unstable and may change without notice in minor version bumps (0.x).","severity":"breaking","affected_versions":">=0.0.0 <1.0.0"},{"fix":"Always call director.assign with desired options at the start of the test or beforeAll.","message":"director.assign must be called before any other API calls (like goto). If not assigned, default settings are used but can lead to unexpected states.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use elements() with methods like .by(), .first(), .element(index) for collection operations.","message":"The 'element' function does not support chaining on elements other than the first one; to filter use elements().by() or elements().firstBy().","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Watch GitHub releases and CHANGELOG.","message":"As of v0.0.22, there is no dedicated warning system; check CHANGELOG for deprecations.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure director.assign is called in beforeAll and director.dispose in afterEach/afterAll.","cause":"Trying to use goto or element without first calling director.assign() or disposing previous context.","error":"TypeError: Cannot read properties of undefined (reading 'page')"},{"fix":"Move director.assign() to the start of the test suite.","cause":"director is used before initialization.","error":"Error: When using director, you must first call director.assign()"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}