PlayWright Automation Training Hyderabad | Best Course

1

• How to Handle a List of Elements
• in Playwright

2

• Playwright is a modern web automation framework
  that supports multiple programming languages,
  providing robust tools for testing web
  applications. When working with web applications,
  its common to interact with lists of elements,
  such as dropdowns, tables, or search results.
  Handling these lists efficiently in Playwright
  ensures that your automation scripts remain
  robust and scalable.

3
Step 1 Locate the Elements

• Playwright uses selectors to identify elements on
  the webpage. To handle a list of elements, you
  can use a CSS selector that matches multiple
  elements. Use page.locator() to locate these
  elements.
• javascript
• Copy code
• const listItems page.locator('.list-item') //
  Selects all elements with the class 'list-item'

4
Step 2 Perform Actions on the Elements

• Once you have located the elements, you can
  perform actions like counting, iterating, or
  interacting with them.

5
1. Count the Elements

• Use the count() method to determine the number of
  elements in the list.
• javascript
• Copy code
• const count await listItems.count()
• console.log(Total items count)

6
2. Iterate Through the List

• Playwright allows you to loop through the
  elements and perform actions on each one. Use the
  nth() method to access individual elements by
  index.
• javascript
• Copy code
• for (let i 0 i lt await listItems.count() i)
  
• const text await listItems.nth(i).textConten
  t()
• console.log(Item i text)

7
3. Click or Interact with Specific Elements

• You can perform actions like clicking a specific
  item or extracting attributes.
• javascript
• Copy code
• await listItems.nth(2).click() // Clicks the
  third element (index starts

8
4. Filter Elements

• Playwright also supports filtering elements based
  on their properties using locators.
• javascript
• Copy code
• const specificItem listItems.filter( hasText
  'Specific Text' )
• await specificItem.click()

9
Step 3 Handle Dynamic Content

• If the list is dynamically updated, ensure you
  wait for the elements to be present. Use await
  page.waitForSelector() or include explicit
  assertions to verify visibility.
• javascript
• Copy code
• await page.waitForSelector('.list-item')

10
Best Practices

• Use specific and robust selectors to avoid
  brittle scripts.
• Implement retries or waits for dynamic content to
  ensure the elements are ready for interaction.
• Leverage Playwright's parallel execution for
  large lists, if applicable.
• By mastering these techniques, you can
  efficiently handle lists of elements in
  Playwright, making your automation tasks more
  effective and reliable.

11
CONTACT

• PlayWright Automation Online Training
• Address- Flat no 205, 2nd Floor,
• Nilgiri Block, Aditya Enclave,
• Ameerpet, Hyderabad-1
• Ph. No 91-9989971070 
• Visit www.visualpath.in
• E-Mail online_at_visualpath.in

12
THANK YOU
Visit www.visualpath.in