Selectors are defined by selector engine name and selector body,
enginerefers to one of the supported engines
bodyrefers to the query string for the respective engine
text, body is the text content
css, body is a css selector
Body format is assumed to ignore leading and trailing white spaces, so that extra whitespace can be added for readability.
For convenience, common selectors have short-forms:
- Selector starting with
..is assumed to be
page.click('//html')is converted to
- Selector starting and ending with a quote (either
') is assumed to be
page.click('"foo"')is converted to
- Otherwise, selector is assumed to be
page.click('div')is converted to
Selectors defined as
engine=body or in short-form can be combined with the
>> token, e.g.
selector1 >> selector2 >> selectors3. When selectors are chained, next one is queried relative to the previous one's result.
is equivalent to
If a selector needs to include
>> in the body, it should be escaped inside a string to not be confused with chaining separator, e.g.
text="some >> text".
By default, chained selectors resolve to an element queried by the last selector. A selector can be prefixed with
* to capture elements that are queried by an intermediate selector.
css=article >> text=Hello captures the element with the text
*css=article >> text=Hello (note the
*) captures the
article element that contains some element with the text
The choice of selectors determines the resiliency of automation scripts. To reduce the maintenance burden, we recommend prioritizing user-facing attributes and explicit contracts.
Attributes like text content, input placeholder, accessibility roles and labels are user-facing attributes that change rarely. These attributes are not impacted by DOM structure changes.
css is a default engine - any malformed selector not starting with
// nor starting and ending with a quote is assumed to be a css selector. For example, Playwright converts
page.$('span > button') to
page.$('css=span > button').
Playwright augments standard CSS selectors in two ways, see below for more details:
cssengine pierces open shadow DOM by default.
- Playwright adds a few custom pseudo-classes like
css:light engine is equivalent to
Document.querySelector and behaves according to the CSS spec. However, it does not pierce shadow roots, which may be inconvenient when working with Shadow DOM and Web Components. For that reason,
css engine pierces shadow roots. More specifically, any Descendant combinator or Child combinator pierces an arbitrary number of open shadow roots, including the implicit descendant combinator at the start of the selector.
css engine first searches for elements in the light dom in the iteration order, and then recursively inside open shadow roots in the iteration order. It does not search inside closed shadow roots or iframes.
<open mode shadow root> is not an html element, but rather a shadow root created with
"css:light=article div"match the first
<div>In the light dom</div>.
"css=article > div"and
"css:light=article > div"match two
divelements that are direct children of the
"css=article .in-the-shadow"matches the
<div class='in-the-shadow'>, piercing the shadow root, while
"css:light=article .in-the-shadow"does not match anything.
"css:light=article div > span"does not match anything, because both light-dom
divelements do not contain a
"css=article div > span"matches the
<span class='content'>, piercing the shadow root.
"css=article > .in-the-shadow"does not match anything, because
<div class='in-the-shadow'>is not a direct child of
"css:light=article > .in-the-shadow"does not match anything.
"css=article li#target"matches the
<li id='target'>Deep in the shadow</li>, piercing two shadow roots.
:visible pseudo-class matches elements that are visible as defined in the actionability guide. For example,
input matches all the inputs on the page, while
input:visible matches only visible inputs. This is useful to distinguish elements that are very similar but differ in visibility.
:visible with caution, because it has two major drawbacks:
- When elements change their visibility dynamically,
:visiblewill give upredictable results based on the timing.
:visibleforces a layout and may lead to querying being slow, especially when used with
:text pseudo-class matches elements that have a text node child with specific text. It is similar to the text engine. There are a few variations that support different arguments:
:text("substring")- Matches when element's text contains "substring" somewhere. Matching is case-insensitive. Matching also normalizes whitespace, for example it turns multiple spaces into one, trusn line breaks into spaces and ignores leading and trailing whitespace.
:text-is("string")- Matches when element's text equals the "string". Matching is case-insensitive and normalizes whitespace.
button:text("Sign in")- Text selector may be combined with regular CSS.
:text-matches("[+-]?\\d+")- Matches text against a regular expression. Note that special characters like back-slash
", square brackets
and more should be escaped. Learn more about regular expressions.
:text-matches("value", "i")- Matches text against a regular expression with specified flags.
css engine pierces shadow by default. It is possible to disable this behavior by wrapping a selector in
:light(section > button.class) matches in light DOM only.
XPath engine is equivalent to
Malformed selector starting with
.. is assumed to be an xpath selector. For example, Playwright converts
xpath does not pierce shadow roots.
Text engine finds an element that contains a text node with the passed text. For example,
page.click('text=Login') clicks on a login button, and
page.waitForSelector('"lazy loaded text") waits for the
"lazy loaded text" to appear in the page.
- By default, the match is case-insensitive, ignores leading/trailing whitespace and searches for a substring. This means
<button>Button loGIN (click me)</button>.
- Text body can be escaped with single or double quotes for precise matching, insisting on exact match, including specified whitespace and case. This means
text="Login "will only match
<button>Login </button>with exactly one space after "Login". Quoted text follows the usual escaping rules, e.g. use
\"to escape double quote in a double-quoted string:
/symbols. This means
<button> loGIN</button>with any number of spaces before "Login" and no spaces after.
- Input elements of the type
submitare rendered with their value as text, and text engine finds them. For example,
<input type=button value="Login">.
Malformed selector starting and ending with a quote (either
') is assumed to be a text selector. For example, Playwright converts
text engine open pierces shadow roots similarly to
text:light does not. Text engine first searches for elements in the light dom in the iteration order, and then recursively inside open shadow roots in the iteration order. It does not search inside closed shadow roots or iframes.
Attribute engines are selecting based on the corresponding attribute value. For example:
data-test-id=foo is equivalent to
id:light=foo is equivalent to