Playwright >> Find, Locate, Select Elements/Tags using Playwright
Table of Contents
This tutorial will explain some code examples about how to find/locate/select elements containing specified text or child element, loop the locator results, find first or last element, get parent or child element, get elements by class, attribute or id using Playwright (Python library).
Playwright python version: 1.22
Playwright find all elements/tags containing specified text
- Solution 1
# Filter elements containing specified text when locating the elements/tags
results = page.locator("span", has_text="playwright")
- Solution 2
# Firstly, find all elements/tags of the specified type
find_results = page.locator("span")
# confirm the number of elements/tags
find_results.count()
# Filter the elements/tags containing the specified text
filtered_results = find_results.filter(has_text="playwright")
# confirm the number of elements/tags again
filtered_results.count()
- Solution 3
We can also use css selector syntax to achive this objective.
Attention: you need to pay attention to the single quote and double quotes in the css selector expression.
results = page.locator('span:has-text("playwright")')
Find elements/tags using multiple conditions.
The example below will find all tags ‘containing’ playwright or ‘api’.
page.locator('span:has-text("playwright"), span:has-text("api")')
Playwright find elements/tags containing specified child element/tag
- Solution 1
# Find all <a> elements containing <h3> tags
page.locator("a", has=page.locator("h3"))
- Solution2
Use css selector to find elements/tags containing specified element/tag.
page.locator("a:has(h3)")
Playwright loop through all elements/tags in locator() result
- Solution 1
# Find all <a> elements/tags that have <h3> tgas by locator() method
find_results = page.locator('span:has-text("playwright")')
# get the number of elements/tags
count = find_results.count()
# loop through all elements/tags
for i in range(count):
# get the element/tag
element = find_results.nth(i)
# get the text of the element/tag
text = element.inner_text()
# print the text
print(text)
Playwright find/get first element
- Solution 1
We can use the first proptery of found elements to get the first element.
# Use the first propery of locator() results to get the first element
element = page.locator('span:has-text("playwright")').first
print(element.inner_text())
- Solution 2
We can also use the nth(0) to get the first element.
# Use the nth(0) to get the first element from the locator() results
element = page.locator('span:has-text("playwright")').nth(0)
print(element.inner_text())
- Solution 3
We can also use css selector expression to get the first element.
element = page.locator("a:has(h3) >> nth=0")
print(element.inner_text())
Playwright find/get last element
- Solution 1
We can use the last proptery of found elements to get the last element.
# Use the last propery of locator() results to get the last element
element = page.locator('span:has-text("playwright")').last
print(element.inner_text())
- Solution 2
We can also use the nth(-1) to get the last element.
# Use the nth(-1) to get the last element from the locator() results
element = page.locator('span:has-text("playwright")').nth(-1)
print(element.inner_text())
- Solution 3
We can also use css selector expression to get the last element.
element = page.locator("a:has(h3) >> nth=-1")
print(element.inner_text())
Playwright get the parent element
- Solution 1
We can use the chaining of locator() method and use the xpath syntax to get the parent element.
# Get the first span element that contains playwright
element = page.locator('span:has-text("playwright")').first
# confirm the inner html of the first element
print(element.inner_html()) # <span>this is the first span</span>
# Get the parent element of the first span element
parent = element.locator("xpath=..")
# confirm the inner html of the parent element
print(parent.inner_html()) # <div><span>this is the first span</span></div>
Playwright get the child element
- Solution 1
We can use the locator() method to get the children element with specified type.
element = page.locator('a:has-text("playwright")').first
element_child = element.locator('h3')
print(element_child.inner_text()) # Suppose there is only one h3 child, if there are mutiple h3 elements, we need select one from them using the above first, last, nth()
Playwright get nth child element
- Solution 1
We can use the locator() and nth() method or expression to get the nth child element.
For example, we want to get the third span child of div element as follows.
Suppose we have only one div element.
<div>
<span>1<span>
<span>1<span>
<span>1<span> ← this is the third <span> child
<span>1<span>
</div>
div_element = page.locator('div')
third_child_element = div_element.locator('span').nth(2)
# OR
third_child_element = div_element.locator('span >> nth=2')
- Solution 2
We can also use xpath syntax to get all the children elements.
element = page.locator('a:has-text("playwright")').first
element_all_children = element.locator('xpath=*')
print(element_all_children.nth(1).inner_text())
Playwright find elements/tags by css class
- Solution 1
We can use the css selector expression to find/get/select elements/tags.
page.locator('.styleClass1')
Multiple css class names can be used.
page.locator('.styleClass1.styleClass2')
Playwright find elements near the specified text
- Solution 1
We can use the css selector expression to find elements/tags near the specified text.
# Find <a> element near the text "Your Specified Text"
page.locator('a:near(:text("Your Specified Text"))')
Playwright find elements/tags by attribute
- Solution 1
For example, we can find the div elements with attr1=“abc” as follows.
page.locator('div[attr1="abc"]')
Find the button with name is “submit”.
page.locator('button[name="submit"]')
Playwright find elements/tags by id
For example, we can find the elements with its id is myElement.
- Solution 1
page.locator("#myElement")
If you want to learn more about Playwright usage, you can read the article below.
Playwright » Basic Usage
https://thats-it-code.com/playwright/playwright__basic-usage/