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. 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 ```html card
<div role="listitem"> <ul>
<h3>Product 1</h3> <li>
<button>Add to cart</button> <h3>Product 1</h3>
</div> <button>Add to cart</button>
<div role="listitem"> </li>
<h3>Product 2</h3> <li>
<button>Add to cart</button> <h3>Product 2</h3>
</div> <button>Add to cart</button>
</li>
<ul>
``` ```
### Filter by text ### 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. 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 ```html card
<div role="listitem"> <ul>
<h3>Product 1</h3> <li>
<button>Add to cart</button> <h3>Product 1</h3>
</div> <button>Add to cart</button>
<div role="listitem"> </li>
<h3>Product 2</h3> <li>
<button>Add to cart</button> <h3>Product 2</h3>
</div> <button>Add to cart</button>
</li>
</ul>
``` ```
```js ```js
@ -924,7 +928,7 @@ page.getByRole(AriaRole.LISTITEM)
.setHas(page.GetByRole(AriaRole.HEADING, new Page.GetByRoleOptions() .setHas(page.GetByRole(AriaRole.HEADING, new Page.GetByRoleOptions()
.setName("Product 2")))) .setName("Product 2"))))
.getByRole(AriaRole.BUTTON, .getByRole(AriaRole.BUTTON,
new Page.GetByRoleOptions().setName("Add to cart"))) new Page.GetByRoleOptions().setName("Add to cart"))
.click() .click()
``` ```
@ -957,7 +961,7 @@ We can also assert the product card to make sure there is only one
```js ```js
await expect(page await expect(page
.getByRole('listitem') .getByRole('listitem')
.filter({ has: page.getByText('Product2') })) .filter({ has: page.getByText('Product 2') }))
.toHaveCount(1); .toHaveCount(1);
``` ```