yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: describe layout selectors sorting logic (#13753)

Browse Source
This commit is contained in:
Dmitry Gozman 2022-04-26 15:02:01 +01:00 committed by GitHub
parent f97af83a4a
commit 00b4fb8bad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/src/selectors.md
View File

@ -713,18 +713,23 @@ element could be matched when layout changes by one pixel.
Layout selectors use [bounding client rect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) Layout selectors use [bounding client rect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
to compute distance and relative position of the elements. to compute distance and relative position of the elements.
* `:right-of(inner > selector)` - Matches elements that are to the right of any element matching the inner selector. * `:right-of(inner > selector)` - Matches elements that are to the right of any element matching the inner selector, at any vertical position.
* `:left-of(inner > selector)` - Matches elements that are to the left of any element matching the inner selector. * `:left-of(inner > selector)` - Matches elements that are to the left of any element matching the inner selector, at any vertical position.
* `:above(inner > selector)` - Matches elements that are above any of the elements matching the inner selector. * `:above(inner > selector)` - Matches elements that are above any of the elements matching the inner selector, at any horizontal position.
* `:below(inner > selector)` - Matches elements that are below any of the elements matching the inner selector. * `:below(inner > selector)` - Matches elements that are below any of the elements matching the inner selector, at any horizontal position.
* `:near(inner > selector)` - Matches elements that are near (within 50 CSS pixels) any of the elements matching the inner selector. * `:near(inner > selector)` - Matches elements that are near (within 50 CSS pixels) any of the elements matching the inner selector.
Note that resulting matches are sorted by their distance to the anchor element, so you can use [`method: Locator.first`] to pick the closest one.
```js ```js
// Fill an input to the right of "Username". // Fill an input to the right of "Username".
await page.locator('input:right-of(:text("Username"))').fill('value'); await page.locator('input:right-of(:text("Username"))').fill('value');
// Click a button near the promo card. // Click a button near the promo card.
await page.locator('button:near(.promo-card)').click(); await page.locator('button:near(.promo-card)').click();
// Click the radio input in the list closest to the "Label 3".
await page.locator('[type=radio]:left-of(:text("Label 3"))').first().click();
``` ```
```java ```java
@ -733,22 +738,31 @@ page.locator("input:right-of(:text(\"Username\"))").fill("value");
// Click a button near the promo card. // Click a button near the promo card.
page.locator("button:near(.promo-card)").click(); page.locator("button:near(.promo-card)").click();
// Click the radio input in the list closest to the "Label 3".
page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first().click();
``` ```
```python async ```python async
# Fill an input to the right of "Username". # Fill an input to the right of "Username".
await page.locator('input:right-of(:text("Username"))').fill('value') await page.locator("input:right-of(:text(\"Username\"))").fill("value")
# Click a button near the promo card. # Click a button near the promo card.
await page.locator('button:near(.promo-card)').click() await page.locator("button:near(.promo-card)").click()
# Click the radio input in the list closest to the "Label 3".
await page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first.click()
``` ```
```python sync ```python sync
# Fill an input to the right of "Username". # Fill an input to the right of "Username".
page.locator('input:right-of(:text("Username"))').fill('value') page.locator("input:right-of(:text(\"Username\"))").fill("value")
# Click a button near the promo card. # Click a button near the promo card.
page.locator('button:near(.promo-card)').click() page.locator("button:near(.promo-card)").click()
# Click the radio input in the list closest to the "Label 3".
page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first.click()
``` ```
```csharp ```csharp
@ -757,6 +771,9 @@ await page.Locator("input:right-of(:text(\"Username\"))").FillAsync("value");
// Click a button near the promo card. // Click a button near the promo card.
await page.Locator("button:near(.promo-card)").ClickAsync(); await page.Locator("button:near(.promo-card)").ClickAsync();
// Click the radio input in the list closest to the "Label 3".
await page.Locator("[type=radio]:left-of(:text(\"Label 3\"))").First.ClickAsync();
``` ```
All layout selectors support optional maximum pixel distance as the last argument. For example All layout selectors support optional maximum pixel distance as the last argument. For example