PlayWright Automation Training | PlayWright Training

1
How to Handle a List of Elements in Playwright
91-9989971070
www.visualpath.in
2

• Playwright is a powerful automation framework
  that enables developers to interact with web
  pages and automate user actions across multiple
  browsers. One common use case in web automation
  is interacting with a list of elements, such as
  buttons, links, or dropdown items. In this
  article, we will explore how to handle a list of
  elements in Playwright effectively.

www.visualpath.in
3
1. Select a List of Elements

• To interact with multiple elements, Playwright
  provides the locator method to find all elements
  matching a specific selector. For example, to
  select all buttons on a page, you can use
• javascript
• Copy code
• const buttons page.locator('button')
• The locator method returns a collection of
  elements matching the selector.

www.visualpath.in
4
2. Count the Elements in the List

• Before performing actions, you might want to know
  how many elements are present. Use the count()
  method
• javascript
• Copy code
• const count await buttons.count()
• console.log(Number of buttons count)

www.visualpath.in
5
3. Perform Actions on Each Element

• Playwright allows you to iterate through the list
  of elements and perform actions such as clicking
  or retrieving text. Heres an example of clicking
  all buttons in the list
• javascript
• Copy code
• for (let i 0 i lt count i)
• await buttons.nth(i).click()
• The nth() method retrieves the element at a
  specific index, starting from 0.

www.visualpath.in
6
4. Extract Text from Elements

• To get the text content of each element, use the
  textContent() method
• javascript
• Copy code
• for (let i 0 i lt count i)
• const text await buttons.nth(i).textContent()
  
• console.log(Button i 1 text)
• This is useful for validating or logging the
  content of the elements.

www.visualpath.in
7
5. Use Filters

• Playwright supports filtering elements directly
  using the locator method. For example, to find
  buttons containing specific text
• javascript
• Copy code
• const filteredButtons page.locator('button',
  hasText 'Submit' )
• You can also combine filters to narrow down your
  search.

www.visualpath.in
8
6. Wait for Elements

• Ensure elements are visible or enabled before
  interacting with them using waitFor() or
  isVisible()
• javascript
• Copy code
• await buttons.nth(0).waitFor()
• if (await buttons.nth(0).isVisible())
• await buttons.nth(0).click()

www.visualpath.in
9
Conclusion

• Handling lists of elements in Playwright is
  straightforward, thanks to its robust API. By
  leveraging locators, filters, and iteration
  methods, you can efficiently automate actions on
  multiple elements. With practice, you'll master
  handling lists for dynamic web applications.

www.visualpath.in
10
CONTACT

• For More Information About
• PlayWright Automation Online Training
• Address- Flat no 205, 2nd Floor,
• Nilagiri
  Block, Aditya Enclave,
• Ameerpet,
  Hyderabad-16
• Ph No 91-9989971070
• Visit www.visualpath.in
• E-Mail online_at_visualpath.in

11

• THANK YOU
• Visit www.visualpath.in