Element Operations in Playwright Python
Single Element Functions
Below are a few functions that will work when only one element is found.
Wait for the element to Load
Sometimes the element takes bit of a time to load it could be due to network slowness or the webpage being heavy. To wait for such kinds of elements, we can use wait_for()
from Playwright Python. The timeout is in milliseconds.
from playwright.sync_api import sync_playwright
playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://google.com")
page.locator("//textarea[@name='q']").wait_for(timeout=30000)
If you write wait_for(30000), then error occurs TypeError: wait_for() takes 1 positional argument but 2 were given
Click an Element
Clicking is the basic operation in any group page to click an element in Playwright. You can use the click()
function.
page.goto("https://google.com")
page.locator("//a[text()='About']").click()
Fill / set text to an Element
You can set text to an element which could be a text bar or text area using fill
function from Playwright.
page.goto("https://google.com")
page.locator("//textarea[@name='q']").wait_for(timeout=30000)
page.locator("//textarea[@name='q']").fill("Pavankumar Nagaraj")
Get text value from the text bar
page.goto("https://google.com")
page.locator("//textarea[@name='q']").fill("Pavankumar")
value_in_text_bar = page.locator("//textarea[@name='q']").input_value()
print(value_in_text_bar)
Press a Keyboard Key
there will be situations where you can fill the text, but you might not have is button associated with it. So in such cases, you might need to press the Enter key from your keyboard. To press any key, we can use the press
function from Playwright.
page.goto("https://google.com")
page.locator("//textarea[@name='q']").wait_for(timeout=30000)
page.locator("//textarea[@name='q']").fill("Pavankumar Nagaraj")
page.locator("//textarea[@name='q']").press("Enter")
Here is the list of buttons you can press F1
– F12
, Digit0
– Digit9
, KeyA
– KeyZ
, Backquote
, Minus
, Equal
, Backslash
, Backspace
, Tab
, Delete
, Escape
, ArrowDown
, End
, Enter
, Home
, Insert
, PageDown
, PageUp
, ArrowRight
, ArrowUp
, etc.
Type text instead of setting at one time.
You can type letter by letter using the type
function from Playwright. this will be useful when our application does not recognize the text set by fill
function
page.goto("https://google.com")
page.locator("//textarea[@name='q']").wait_for(timeout=30000)
page.locator("//textarea[@name='q']").type("Pavankumar Nagaraj", delay=1000)
page.locator("//textarea[@name='q']").press("Enter")
Clear the text
You can remove the text present in a text field using clear
function from the playwright.
page.locator("//textarea[@name='q']").fill("Pavankumar Nagaraj")
sleep(2)
page.locator("//textarea[@name='q']").clear()
Get the text from the element
Using text_content()
, you can retrieve the text of an element.
page.goto("https://google.com")
text = page.locator("(//a[@class='pHiOh'])[1]").text_content()
print(text)
Get attribute with Playwright Python
before we proceed to get an attribute, let’s understand what is an attribute in HTML. anything that is inside a tag and submitted with = is an attribute, sometimes the = is not mentioned but by default, they take true as the value. (here attribute2 is true). An element can contain any number of attributes.
<tag_name attribute1=attribute1_value attribute2></tagname>
page.goto("https://google.com")
attribute_value = page.locator("//textarea[@name='q']").get_attribute("jsaction")
print(attribute_value)
# output
paste:puy29d;
Inner Text
The difference between text content and inner text is that text_content()
brings text from only a particular element but inner_text()
fetches the text from all the elements present under the given element.
page.goto("https://google.com")
inner_text = page.locator("//*[@role='contentinfo']").inner_text()
print(inner_text)
Inner HTML
Gets the inner HTML of the child elements if there is no child element for the locator, then nothing will be returned.
page.goto("https://google.com")
inner_html = page.locator("//*[@role='contentinfo']").inner_html()
print(inner_html)
#output
<style>.c93Gbe{background:#f2f2f2}.uU7dJb{padding:15px 30px;border-bottom:1p....</style>
Focus
You can bring the focus onto an element
page.locator("//textarea[@name='q']").focus()
Highlight
You can highlight an element.
page.locator("//textarea[@name='q']").highlight()
Multiple element function:
When the locator matches more than one element, then only you can use the below functions.
All Text Content:
all_text_contents() will fetch text from each element that matches. Returns list of strings
page.goto("https://google.com")
all_text_contents = page.locator("//a[@class='pHiOh']").all_text_contents()
print(all_text_contents)
#output
['About', 'Advertising', 'Business', ' How Search works ', 'Privacy', 'Terms']
All inner text
all_inner_text()
brings the inner text from all the elements. This is used when there is more than one match. (you can also use it when there is only one match.) this returns a list of strings as the result.
page.locator("//*[@role='contentinfo']").all_inner_texts()
All
When you write page.locator("//a[@class='pHiOh']")
. Let’s say it finds more than one element and if you want to take action on each element, then you have to use all()
function, otherwise playwright just considers it as a single element locator.
page.goto("https://google.com")
all_elements = page.locator("//a[@class='pHiOh']").all()
for element in all_elements:
print(element.text_content())
# output
About
Advertising
Business
How Search works
Privacy
Terms
Let’s say you are not using all()
function: TypeError: 'Locator' object is not iterable
occurs
Last
If you want to access the last element from the element you found then use the last
variable
page.goto("https://google.com")
last_element_text = page.locator("//a[@class='pHiOh']").last.text_content()
print(last_element_text)
nth
If your locator finds more than 1 element but you want to access 2 or 5 or any element then you can use the nth()
function.
page.goto("https://google.com")
nth_element_text = page.locator("//a[@class='pHiOh']").nth(2).text_content()
print(nth_element_text)
#output
Business
Posts You Might Like
- Why playwright is better than selenium webdriver, is it?
- Handle dropdowns in Playwright Python
- Open the browser and Close in Playwright Python
- Handle checkbox in Playwright Python
- Element Operations in Playwright Python
- Handle IFrames in Playwright Python
- Page level commands in Playwright Python
- Element State with Playwright Python