docs: update Locator.or example (#22220)

This commit is contained in:
Dmitry Gozman 2023-04-05 13:13:10 -07:00 committed by GitHub
parent 88544d537b
commit 5734f11a69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 26 deletions

View File

@ -1591,31 +1591,51 @@ Creates a locator that matches either of the two locators.
**Usage** **Usage**
If your page shows a username input that is labelled either `Username` or `Login`, depending on some external factors you do not control, you can match both. Consider a scenario where you'd like to click on a "New email" button, but sometimes a security settings dialog shows up instead. In this case, you can wait for either a "New email" button, or a dialog and act accordingly.
```js ```js
const input = page.getByLabel('Username').or(page.getByLabel('Login')); const newEmail = page.getByRole('button', { name: 'New' });
await input.fill('John'); const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click();
``` ```
```java ```java
Locator input = page.getByLabel("Username").or(page.getByLabel("Login")); Locator newEmail = page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("New"));
input.fill("John"); Locator dialog = page.getByText("Confirm security settings");
assertThat(newEmail.or(dialog)).isVisible();
if (dialog.isVisible())
page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Dismiss")).click();
newEmail.click();
``` ```
```python async ```python async
input = page.get_by_label("Username").or_(page.get_by_label("Login")) new_email = page.get_by_role("button", name="New")
await input.fill("John") dialog = page.get_by_text("Confirm security settings")
await expect(new_email.or_(dialog)).to_be_visible()
if (await dialog.is_visible())
await page.get_by_role("button", name="Dismiss").click()
await new_email.click()
``` ```
```python sync ```python sync
input = page.get_by_label("Username").or_(page.get_by_label("Login")) new_email = page.get_by_role("button", name="New")
input.fill("John") dialog = page.get_by_text("Confirm security settings")
expect(new_email.or_(dialog)).to_be_visible()
if (dialog.is_visible())
page.get_by_role("button", name="Dismiss").click()
new_email.click()
``` ```
```csharp ```csharp
var input = page.GetByLabel("Username").Or(page.GetByLabel("Login")); var newEmail = page.GetByRole(AriaRole.Button, new() { Name = "New" });
await input.FillAsync("John"); var dialog = page.GetByText("Confirm security settings");
await Expect(newEmail.Or(dialog)).ToBeVisibleAsync();
if (await dialog.IsVisibleAsync())
await page.GetByRole(AriaRole.Button, new() { Name = "Dismiss" }).ClickAsync();
await newEmail.ClickAsync();
``` ```
### param: Locator.or.locator ### param: Locator.or.locator

View File

@ -494,31 +494,51 @@ var parent = page.GetByText("Hello").Locator("xpath=..");
If you'd like to target one of the two or more elements, and you don't know which one it will be, use [`method: Locator.or`] to create a locator that matches any of the alternatives. If you'd like to target one of the two or more elements, and you don't know which one it will be, use [`method: Locator.or`] to create a locator that matches any of the alternatives.
For example, to fill the username input that is labelled either `Username` or `Login`, depending on some external factors: For example, consider a scenario where you'd like to click on a "New email" button, but sometimes a security settings dialog shows up instead. In this case, you can wait for either a "New email" button, or a dialog and act accordingly.
```js ```js
const input = page.getByLabel('Username').or(page.getByLabel('Login')); const newEmail = page.getByRole('button', { name: 'New' });
await input.fill('John'); const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click();
``` ```
```java ```java
Locator input = page.getByLabel("Username").or(page.getByLabel("Login")); Locator newEmail = page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("New"));
input.fill("John"); Locator dialog = page.getByText("Confirm security settings");
assertThat(newEmail.or(dialog)).isVisible();
if (dialog.isVisible())
page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Dismiss")).click();
newEmail.click();
``` ```
```python async ```python async
input = page.get_by_label("Username").or_(page.get_by_label("Login")) new_email = page.get_by_role("button", name="New")
await input.fill("John") dialog = page.get_by_text("Confirm security settings")
await expect(new_email.or_(dialog)).to_be_visible()
if (await dialog.is_visible())
await page.get_by_role("button", name="Dismiss").click()
await new_email.click()
``` ```
```python sync ```python sync
input = page.get_by_label("Username").or_(page.get_by_label("Login")) new_email = page.get_by_role("button", name="New")
input.fill("John") dialog = page.get_by_text("Confirm security settings")
expect(new_email.or_(dialog)).to_be_visible()
if (dialog.is_visible())
page.get_by_role("button", name="Dismiss").click()
new_email.click()
``` ```
```csharp ```csharp
var input = page.GetByLabel("Username").Or(page.GetByLabel("Login")); var newEmail = page.GetByRole(AriaRole.Button, new() { Name = "New" });
await input.FillAsync("John"); var dialog = page.GetByText("Confirm security settings");
await Expect(newEmail.Or(dialog)).ToBeVisibleAsync();
if (await dialog.IsVisibleAsync())
await page.GetByRole(AriaRole.Button, new() { Name = "Dismiss" }).ClickAsync();
await newEmail.ClickAsync();
``` ```

View File

@ -11548,12 +11548,16 @@ export interface Locator {
* *
* **Usage** * **Usage**
* *
* If your page shows a username input that is labelled either `Username` or `Login`, depending on some external * Consider a scenario where you'd like to click on a "New email" button, but sometimes a security settings dialog
* factors you do not control, you can match both. * shows up instead. In this case, you can wait for either a "New email" button, or a dialog and act accordingly.
* *
* ```js * ```js
* const input = page.getByLabel('Username').or(page.getByLabel('Login')); * const newEmail = page.getByRole('button', { name: 'New' });
* await input.fill('John'); * const dialog = page.getByText('Confirm security settings');
* await expect(newEmail.or(dialog)).toBeVisible();
* if (await dialog.isVisible())
* await page.getByRole('button', { name: 'Dismiss' }).click();
* await newEmail.click();
* ``` * ```
* *
* @param locator Alternative locator to match. * @param locator Alternative locator to match.