Skip to content

Commit b285936

Browse files
authored
docs: more clarity in the attribute selectors (#5621)
Fixes #5615
1 parent f7e5db4 commit b285936

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

docs/src/selectors.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,42 @@ converts `'//html/body'` to `'xpath=//html/body'`.
449449

450450
## id, data-testid, data-test-id, data-test selectors
451451

452-
Attribute engines are selecting based on the corresponding attribute value. For example: `data-test-id=foo` is equivalent to `css=[data-test-id="foo"]`, and `id:light=foo` is equivalent to `css:light=[id="foo"]`.
452+
Playwright supports a shorthand for selecting elements using certain elements. Currently, only
453+
the following attributes are supported:
454+
455+
- `id`
456+
- `data-testid`
457+
- `data-test-id`
458+
- `data-test`
459+
460+
```js
461+
// Fill an input with the id "username"
462+
await page.fill('id=username', 'value');
463+
464+
// Click an element with data-test-id "submit"
465+
await page.click('data-test-id=submit');
466+
```
467+
468+
```python async
469+
# Fill an input with the id "username"
470+
await page.fill('id=username', 'value')
471+
472+
# Click an element with data-test-id "submit"
473+
await page.click('data-test-id=submit')
474+
```
475+
476+
```python sync
477+
# Fill an input with the id "username"
478+
page.fill('id=username', 'value')
479+
480+
# Click an element with data-test-id "submit"
481+
page.click('data-test-id=submit')
482+
```
483+
484+
:::note
485+
Attribute selectors piece shadow DOM. To opt-out from this behavior, use `:light` suffix after attribute, for example `page.click('data-test-id:light=submit')
486+
:::
487+
453488

454489
## Pick n-th match from the query result
455490

0 commit comments

Comments
 (0)