Rayrun

How do I interact with multiple elements using Playwright test runner?

Answer

To work with multiple elements in @playwright/test, use the page.locator() method. It returns a Locator object representing a collection of elements matching the given selector. You can perform actions on all elements in this collection by chaining methods to the Locator object.

For instance, to select all checkboxes with a certain class name:

const checkboxes = page.locator('.my-checkbox-class');
await checkboxes.check();

This finds and checks all elements with the "my-checkbox-class" class.

You can also filter locators by text or another locator using the filter() method. If you want to select only buttons with a specific text label:

const buttons = page.locator('button').filter({ hasText: 'Submit' });
await buttons.click();

This finds all button elements, filters them to only those with text "Submit", and clicks on each of them.

Playwright provides code generation tools to help generate locators for your tests automatically, which is useful when dealing with complex web applications.

In summary, use the page.locator() method to create a Locator object representing a collection of matching elements, and perform actions on this collection using chained methods like check(), click(), or filter(). Additionally, code generation tools are available to simplify locator selection for more complex scenarios.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.