How to use Playwright-based browser automation for improved reliability

Playwright ✍️

Playwright is a powerful, flexible, and best-in-class tool for enterprise automation. In addition, it is actively maintained by Microsoft, which means it is well-supported and regularly updated with new features and improvements. Robocorp’s Playwright library makes it easy to build stable and reliable browser automations.

Playwright library covers almost all use cases of Selenium Library’s 170+ keywords with just 120. With features such as automatic sleeps, browser/context re-use and improved underlying technology, Playwright automations are often faster to run, while also being simpler to write.

Let's learn how to get started with your Playwright automation with RPA.Browser.Playwright library keywords

Playwright by Microsoft enables reliable end-to-end automation for modern web apps.

Installation with Robocorp

The easiest way to get started with Playwright automation is by using the predefined template

  • Open Visual Studio Code.
  • Open the Command Palette using your keyboard (macOS: Shift-Command-P, Windows / Linux: Ctrl+Shift+P).
  • Type create robot and select Robocorp: Create Robot.
  • Select Playwright Template.

Select a template

And you are all ready and set to go. If you open your conda.yaml you will see below differences compared to your Robot Framework - Standard -template

  • nodejs and robotframework-browser are added as dependencies.
  • rfbrowser init command in the rccPostInstall section is added.
channels: - conda-forge dependencies: - python=3.9.16 - nodejs=16.14.2 - pip=22.1.2 - pip: - robotframework-browser==17.1.0 - rpaframework==24.0.0 rccPostInstall: - rfbrowser init

Playwright requires Node.js LTS version 14, or 16. The browser binaries for Chromium, Firefox, and WebKit work across the three platforms (Windows, macOS, Linux). The good news is that all of this is already added with a few lines in your conda.yaml file.

Robot Framework examples

To use the Robot Framework Playwright library in Robot Framework scripts, you need to import the RPA.Browser.Playwright library.

Import the library

*** Settings *** Library RPA.Browser.Playwright

Open a new browser in headless mode

The default run mode with the RPA.Browser.Playwright library is headless (no browser GUI). The New Page keyword opens a browser to the given URL. If a browser is not already open, it will be opened first.

*** Tasks *** Playwright: Open a browser in headless mode New Page https://robotsparebinindustries.com

Open a new browser in GUI mode

To see the browser GUI when using the RPA.Browser.Playwright library, use the Open Browser keyword.

*** Tasks *** Playwright: Open a browser in GUI mode Open Browser New Page https://robotsparebinindustries.com

Type text into a text field

With the RPA.Browser.Playwright library, the Type Text keyword takes a selector and the input text as arguments. The keyword waits for the text field to be in an actionable state automatically; no need to wait for it separately.

In this case, the text field is an input element that has an id attribute with the value of username:

<input type="text" id="username" name="username" required="" class="form-control" />

Typing input#username is enough; no need to use the css: prefix that is sometimes needed with the RPA.Browser.Selenium library to indicate a CSS selector. On the other hand, you cannot use the shorthand locators (username) supported in SeleniumLibrary.

*** Tasks *** Playwright: Type into a text field New Page https://robotsparebinindustries.com Type Text input#username maria

You could also use the ID selector here: id=username. The default selector strategy is CSS.

Type secrets and wait for elements

The RPA.Browser.Playwright library keyword Type Secret types the given text, but does not log it.

In this case, the input#firstname field takes some time to load. The RPA.Browser.Playwright library waits for the field automatically; no need to use explicit waits here:

*** Tasks *** Playwright: Typing secrets and automatic waiting New Page https://robotsparebinindustries.com Type Text input#username maria Type Secret input#password thoushallnotpass Click button.btn-primary Type Text input#firstname First!

Use complex selectors

Let's consider a more complicated case for element selection. The Swag Labs website displays a listing of products. This is one of the products from the list:

Swag Labs product card

And this is the HTML markup for the product card:

<div class="inventory_item"> <div class="inventory_item_img"> <a href="./inventory-item.html?id=4" id="item_4_img_link" ><img class="inventory_item_img" src="./img/sauce-backpack-1200x1500.jpg" /></a> </div> <div class="inventory_item_label"> <a href="./inventory-item.html?id=4" id="item_4_title_link" ><div class="inventory_item_name">Sauce Labs Backpack</div></a > <div class="inventory_item_desc"> carry.allTheThings() with the sleek, streamlined Sly Pack that melds uncompromising style with unequaled laptop and tablet protection. </div> </div> <div class="pricebar"> <div class="inventory_item_price">$29.99</div> <button class="btn_primary btn_inventory">ADD TO CART</button> </div> </div>

We want the robot to add the Sauce Labs Backpack product to the cart by clicking the ADD TO CART button. The issue is that the product name (the product we want to add to the cart) and the add button are not hierarchically connected. They have the same parent element, though (div.inventory_item).

To click the correct add to cart button, if we are using RPA.Browser.Selenium this would be our approach:

  • Find the element containing the product name (div.inventory_item_name = Sauce Labs Backpack).
  • Navigate to the parent container that contains both the name and the button (div.inventory_item).
  • Find the button element under the parent, and click it.

CSS does not support selecting elements by their textual content or selecting their parent elements. We will need to use XPath and sometimes the web element APIs to navigate the DOM.

*** Keywords *** Add product to cart ${locator}= ... Set Variable ... xpath://div[@class="inventory_item" and descendant::div[contains(text(), "Sauce Labs Backpack")]] ${product}= Get WebElement ${locator} ${add_to_cart_button}= Set Variable ${product.find_element_by_class_name("btn_primary")} Click Button ${add_to_cart_button}

Using the RPA.Browser.Playwright library, we can use chainable selectors. Combining both CSS and XPath selectors, the same logic might look like this:

*** Keywords *** Add product to cart ${add_to_cart_button}= ... Get Element ... .inventory_item >> text="Sauce Labs Backpack" >> ../.. >> .btn_primary Click ${add_to_cart_button}

Much shorter, very powerful, such wow! 🐶

Read more about Finding elements and Selector strategies in the Playwright Keyword Library

Understanding the differences between Selenium and Playwright libraries

FeaturesPlaywrightSelenium
Auto WaitingYes. Playwright interactions auto-wait for elements to be ready. This improves reliability and simplifies automation authoringNo. Explicit wait for elements required, complex checks needed
Timeout Free AutomationNo explicit actions required for sleep timeouts - Playwright receives browser signals, like network requests, page navigations, and page load events to eliminate the need for sleep timeouts that can cause flakinessExplicit wait and timeout settings needed
Selector StrategyCan use user-facing strings like text content and labels, as well as CSS and XPath selectors, to locate elementsPredominantly, CSS or XPath selectors are used with minimal support for text-based locators
Lightweight Isolated ExecutionAllows for lean parallelization by reusing a single browser instance for multiple parallelized, isolated execution environments with browser contexts. This results in faster automation executionN/A
Browser Version & Driver ManagementPlaywright bundles browser executables as part of its package to avoid browser version conflicts.Need to manage the browser and the driver executables separately
Automation Studio SupportNoYes
Installationconda.yaml needs to be updated. nodejs and robotframework-browser are added as dependencies.No extra installation steps required
Attaching To Existing BrowserNot possiblePossible with Keyword Attach Chrome Browser
Environment SizeAs Playwright library bundles browser executables as part of its package, run time environment is heavier. If there are network latency issues, start up time could be significantly higher than Selenium.Standard environment size
Ideal Use CasesWhen dealing with iframes and complex browser automations with tricky locators. Also when there are no issues of network latency. When handling multiple pages and isolated context and switching between those pagesWeb automations ranging from low to high complexity

Limitations

  • Playwright does not support legacy Microsoft Edge or IE11 (deprecation notice). The new Microsoft Edge (on Chromium) is supported.

  • You can not attach to an already running browser.

And so much more!

This article only scratched the surface. View the Playwright keyword documentation to learn about all the features, keywords, etc. Happy automation!

Last edit: January 23, 2023