Written by Pavankumar Nagaraj

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