Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs: change listItem to article in locators doc (#19060)

Browse source
This commit is contained in:
Debbie O'Brien 2022-12-14 22:42:52 +01:00 committed by GitHub
parent 8167f8bf54
commit e7b8554342
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
docs/src/locators.md
View file

@ -806,14 +806,16 @@ await Expect(page.Locator("x-details")).ToContainTextAsync("Details");
Consider the following DOM structure where we want to click on the buy button of the second product card. We have a few options in order to filter the locators to get the right one.
```html card
<div role="listitem">
<h3>Product 1</h3>
<button>Add to cart</button>
</div>
<div role="listitem">
<h3>Product 2</h3>
<button>Add to cart</button>
</div>
<ul>
<li>
<h3>Product 1</h3>
<button>Add to cart</button>
</li>
<li>
<h3>Product 2</h3>
<button>Add to cart</button>
</li>
<ul>
```
### Filter by text
@ -900,14 +902,16 @@ await page
Locators support an option to only select elements that have a descendant matching another locator. You can therefore filter by any other locator such as a [`method: Locator.getByRole`], [`method: Locator.getByTestId`], [`method: Locator.getByText`] etc.
```html card
<div role="listitem">
<h3>Product 1</h3>
<button>Add to cart</button>
</div>
<div role="listitem">
<h3>Product 2</h3>
<button>Add to cart</button>
</div>
<ul>
<li>
<h3>Product 1</h3>
<button>Add to cart</button>
</li>
<li>
<h3>Product 2</h3>
<button>Add to cart</button>
</li>
</ul>
```
```js
@ -924,7 +928,7 @@ page.getByRole(AriaRole.LISTITEM)
.setHas(page.GetByRole(AriaRole.HEADING, new Page.GetByRoleOptions()
.setName("Product 2"))))
.getByRole(AriaRole.BUTTON,
new Page.GetByRoleOptions().setName("Add to cart")))
new Page.GetByRoleOptions().setName("Add to cart"))
.click()
```
@ -957,7 +961,7 @@ We can also assert the product card to make sure there is only one
```js
await expect(page
.getByRole('listitem')
.filter({ has: page.getByText('Product2') }))
.filter({ has: page.getByText('Product 2') }))
.toHaveCount(1);
```