Playwright Snippets

A list of simple Playwright code snippets to speed up your tests 🎉

Playwright snippets example

Support languages

Install this extension
Open a file with the supported language (TypeScript or JavaScript)
Start typing the prefix of the snippet you want to use
Press Tab key to use the snippet or select it from the IntelliSense suggestions

Type the prefix then press Tab to insert the snippet.

Prefix	Content Description
`pt-download`	Download event
`pt-upload`	Upload file event

Prefix	Content Description
`pt-screenshot`	Take a screenshot of the page

Prefix	Content Description
`pclock-install`	Install the clock
`pclock-forward`	Jump forward in time by duration (milliseconds) or time
`pclock-pause`	Pause the clock at a specific time
`pclock-resume`	Resume the clock
`pclock-run`	Run the clock for a specific duration or time
`pclock-set`	Set the clock to a specific fixed time
`pclock-system`	Set the clock to a specific system time

Prefix	Content Description
`pg-role`	Locate element by role
`pg-label`	Locate element by label
`pg-placeholder`	Locate element by placeholder
`pg-text`	Locate element by text
`pg-alt`	Locate element by alt text
`pg-title`	Locate element by title
`pg-testid`	Locate element by test id
`pg-locator`	Locate element by CSS or XPath selector

Prefix	Content Description
`pe-tobe`	Value is the same
`pe-closeto`	Number is approximately equal
`pe-defined`	Value is not undefined
`pe-falsy`	Value is falsy, e.g. false, 0, null, etc.
`pe-gt`	Number is more than
`pe-gte`	Number is more than or equal
`pe-beinst`	Object is an instance of a class
`pe-lt`	Number is less than
`pe-lte`	Number is less than or equal
`pe-benan`	Value is NaN
`pe-benull`	Value is null
`pe-betruthy`	Value is truthy, i.e. not false, 0, null, etc.
`pe-beundef`	Value is undefined
`pe-containstr`	String contains a substring
`pe-containarr`	Array or set contains an element
`pe-containeq`	Array or set contains a similar element
`pe-equal`	Value is similar - deep equality and pattern matching
`pe-haslength`	Array or string has length
`pe-hasprop`	Object has a property
`pe-match`	String matches a regular expression
`pe-matchobj`	Object contains specified properties
`pe-stricteq`	Value is similar, including property types
`pe-throw`	Function throws an error
`pe-any`	Matches any instance of a class/primitive
`pe-anything`	Matches anything
`pe-arrcont`	Array contains specific elements
`pe-close`	Number is approximately equal (closeTo)
`pe-objcont`	Object contains specific properties
`pe-strcont`	String contains a substring (stringContaining)
`pe-strmatch`	String matches a regular expression (stringMatching)

Prefix	Content Description
`pe-checked`	(promise) Checkbox is checked
`pe-attached`	(promise) Element is attached
`pe-disabled`	(promise) Element is disabled
`pe-editable`	(promise) Element is editable
`pe-empty`	(promise) Container is empty
`pe-enabled`	(promise) Element is enabled
`pe-focused`	(promise) Element is focused
`pe-hidden`	(promise) Element is not visible
`pe-viewport`	(promise) Element intersects viewport
`pe-visible`	(promise) Element is visible
`pe-containtext`	(promise) Element contains text
`pe-containclass`	(promise) Element has specified CSS classes
`pe-accdesc`	(promise) Element has a matching accessible description
`pe-accname`	(promise) Element has a matching accessible name
`pe-attr`	(promise) Element has a DOM attribute
`pe-class`	(promise) Element has specified CSS class property
`pe-count`	(promise) List has exact number of children
`pe-css`	(promise) Element has CSS property
`pe-id`	(promise) Element has an ID
`pe-jsprop`	(promise) Element has a JavaScript property
`pe-role`	(promise) Element has a specific ARIA role
`pe-screenshot-element`	(promise) Element has a screenshot
`pe-text`	(promise) Element matches text
`pe-value`	(promise) Input has a value
`pe-values`	(promise) Select has options selected
`pe-ariasnap`	(promise) Element matches the ARIA snapshot
`pe-screenshot-page`	(promise) Page has a screenshot
`pe-title`	(promise) Page has a title
`pe-url`	(promise) Page has a URL
`pe-ok`	(promise) Response has an OK status

If you have any questions or suggestions, feel free to reach out:

Enjoy 🚀