docs: update getByLabel docs to mention aria attributes (#21765)

References #21624.
This commit is contained in:
Dmitry Gozman 2023-03-17 12:48:07 -07:00 committed by GitHub
parent 95e7d3aabc
commit f484b833ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 10 deletions

View File

@ -1430,34 +1430,40 @@ await page.GetByAltText("Playwright logo").ClickAsync();
## template-locator-get-by-label-text ## template-locator-get-by-label-text
Allows locating input elements by the text of the associated label. Allows locating input elements by the text of the associated `<label>` or `aria-labelledby` element, or by the `aria-label` attribute.
**Usage** **Usage**
For example, this method will find the input by label text "Password" in the following DOM: For example, this method will find inputs by label "Username" and "Password" in the following DOM:
```html ```html
<input aria-label="Username">
<label for="password-input">Password:</label> <label for="password-input">Password:</label>
<input id="password-input"> <input id="password-input">
``` ```
```js ```js
await page.getByLabel('Username').fill('john');
await page.getByLabel('Password').fill('secret'); await page.getByLabel('Password').fill('secret');
``` ```
```java ```java
page.getByLabel("Username").fill("john");
page.getByLabel("Password").fill("secret"); page.getByLabel("Password").fill("secret");
``` ```
```python async ```python async
await page.get_by_label("Username").fill("john")
await page.get_by_label("Password").fill("secret") await page.get_by_label("Password").fill("secret")
``` ```
```python sync ```python sync
page.get_by_label("Username").fill("john")
page.get_by_label("Password").fill("secret") page.get_by_label("Password").fill("secret")
``` ```
```csharp ```csharp
await page.GetByLabel("Username").FillAsync("john");
await page.GetByLabel("Password").FillAsync("secret"); await page.GetByLabel("Password").FillAsync("secret");
``` ```

View File

@ -2482,18 +2482,21 @@ export interface Page {
}): Locator; }): Locator;
/** /**
* Allows locating input elements by the text of the associated label. * Allows locating input elements by the text of the associated `<label>` or `aria-labelledby` element, or by the
* `aria-label` attribute.
* *
* **Usage** * **Usage**
* *
* For example, this method will find the input by label text "Password" in the following DOM: * For example, this method will find inputs by label "Username" and "Password" in the following DOM:
* *
* ```html * ```html
* <input aria-label="Username">
* <label for="password-input">Password:</label> * <label for="password-input">Password:</label>
* <input id="password-input"> * <input id="password-input">
* ``` * ```
* *
* ```js * ```js
* await page.getByLabel('Username').fill('john');
* await page.getByLabel('Password').fill('secret'); * await page.getByLabel('Password').fill('secret');
* ``` * ```
* *
@ -5900,18 +5903,21 @@ export interface Frame {
}): Locator; }): Locator;
/** /**
* Allows locating input elements by the text of the associated label. * Allows locating input elements by the text of the associated `<label>` or `aria-labelledby` element, or by the
* `aria-label` attribute.
* *
* **Usage** * **Usage**
* *
* For example, this method will find the input by label text "Password" in the following DOM: * For example, this method will find inputs by label "Username" and "Password" in the following DOM:
* *
* ```html * ```html
* <input aria-label="Username">
* <label for="password-input">Password:</label> * <label for="password-input">Password:</label>
* <input id="password-input"> * <input id="password-input">
* ``` * ```
* *
* ```js * ```js
* await page.getByLabel('Username').fill('john');
* await page.getByLabel('Password').fill('secret'); * await page.getByLabel('Password').fill('secret');
* ``` * ```
* *
@ -10855,18 +10861,21 @@ export interface Locator {
}): Locator; }): Locator;
/** /**
* Allows locating input elements by the text of the associated label. * Allows locating input elements by the text of the associated `<label>` or `aria-labelledby` element, or by the
* `aria-label` attribute.
* *
* **Usage** * **Usage**
* *
* For example, this method will find the input by label text "Password" in the following DOM: * For example, this method will find inputs by label "Username" and "Password" in the following DOM:
* *
* ```html * ```html
* <input aria-label="Username">
* <label for="password-input">Password:</label> * <label for="password-input">Password:</label>
* <input id="password-input"> * <input id="password-input">
* ``` * ```
* *
* ```js * ```js
* await page.getByLabel('Username').fill('john');
* await page.getByLabel('Password').fill('secret'); * await page.getByLabel('Password').fill('secret');
* ``` * ```
* *
@ -16692,18 +16701,21 @@ export interface FrameLocator {
}): Locator; }): Locator;
/** /**
* Allows locating input elements by the text of the associated label. * Allows locating input elements by the text of the associated `<label>` or `aria-labelledby` element, or by the
* `aria-label` attribute.
* *
* **Usage** * **Usage**
* *
* For example, this method will find the input by label text "Password" in the following DOM: * For example, this method will find inputs by label "Username" and "Password" in the following DOM:
* *
* ```html * ```html
* <input aria-label="Username">
* <label for="password-input">Password:</label> * <label for="password-input">Password:</label>
* <input id="password-input"> * <input id="password-input">
* ``` * ```
* *
* ```js * ```js
* await page.getByLabel('Username').fill('john');
* await page.getByLabel('Password').fill('secret'); * await page.getByLabel('Password').fill('secret');
* ``` * ```
* *