Robotic Process Automation (RPA) with Playwright

This tutorial will demonstrate how to use Step and Playwright to automate various browser tasks.

Get Step SaaS for free to follow this tutorial
Illustration for Robotic Process Automation (RPA) with Playwright

In this tutorial, we will demonstrate how to use Step and Playwright to automate various browser tasks. Specifically, we will be automating the process of logging in and performing an inventory update operation an inventory update operation on theOpenCart online shop - our demo application.

There are two main sections in this tutorial:

  1. Prepare the demo project
  2. Define the Robotic Process Automation (RPA)

Each of the sections describes the steps to follow in order to achieve our automation objectives.

To get the most out of this tutorial, it is assumed that you already possess some knowledge of RPA and Playwright, and you are interested in exploring the enhanced productivity and automation capabilities offered by Step. Step enables adaptable and reusable automation workflows, providing seamless integration with Playwright. Let’s dive in and get started!

Prerequisites

To follow this tutorial, you need the following:

  • ‍Step: get a Step distribution, SaaS or on-premise. Click here to get a free Step SaaS instance up and running in minutes, and learn about how to install Step SaaS or on-premise, see our Quick setup guide.
  • Git
  • Maven 2 or higher
  • JDK 11 or higher

Prepare the demo project

We have prepared a sample project that will be used throughout this tutorial which uses Playwright to automate interactions with a test environment called OpenCart.

1. Get the code

The demo project is available on GitHub; the repo, run the following git command:

  git clone https://github.com/exense/step-samples.git
  

2. (optional): Run tests locally

To see the interactions that are performed, run the JUnit tests:

  cd [step-samples-folder]/keywords/java/demo-playwright-keyword
mvn clean compile test
  

The test cases navigate through the Desktop and Components categories of the website as a client and update the products quantities as an admin, as defined in the unit tests.

3. Check the source code

Take a moment to look at the sample demo code – we tried to keep it as simple and straightforward as possible. You can find it in the demo project folder by navigating to folder:

[step-samples-folder]/keywords/java/demo-playwright-keyword

4. Create a keyword package

Next is to create a JAR file named: playwright-keyword-0.0.0.jar in the demo project.

To create the JAR file, run the following command:

  cd [step-samples-folder]/keywords/java/demo-playwright-keyword
mvn clean package -DskipTests
  

Later in the subsequent steps, we will use the file.

5. Start your Step instance

If you have access to an existing Step instance (on-premise or cloud), access it and log in. For more information, see prerequisites if not. The Prerequisites section of this tutorial.

6. Import the keyword package

Step has a special view for managing Keywords. This screenshot shows the Keywords view with the Upload Package dialog open as a reference for the next steps.

Add Keywords by importing the JAR file that you created in the earlier step.

To import the JAR file, perform the following steps.

  1. Navigate to Keywords
  2. Click the Upload Package button
  3. Select the demo-playwright-keyword-0.0.0.jar as the package file.
    Hint: Make sure you selected the correct file. If successful you will see two keywords listed
  4. Click Save to do the import

Define the Robotic Process Automation

After importing the Keywords, next is to set up a Plan through the Visual interface, in which we define the order of execution for performing our inventory update. Simply put, we want to automate a browser that logs in to the OpenCart web shop and updates the quantities of some products in the inventory as specified in a CSV file.

Get familiar with the UI explained in the following screenshot:

1. Create a new Plan

To create a Plan, perform the following steps.

  1. Navigate to Plans
  2. Click the + Add function to create a new plan
  3. Enter a name
  4. Select as a Template
  5. Click Save and edit

2. Add the Login-Keyword to the new Plan

You have created a Plan; the next step is to configure that Plan. To define the order of execution, let us configure our plan by adding the imported Keywords and providing some parameters. To do that, we want to tell Step to log in to OpenCart. Therefore, we add the keyword Playwright - Opencart Admin Login.

  1. Click on Keywords tab to show a list of available keywords
  2. In the Keyword list, select the Keyword Playwright - Opencart Admin Login by clicking the + Add function
  3. Click on the newly imported keyword
  4. In the headless field, type true In the username field, type demo In the password field, type demo

3. Add and configure the ForEach-Control

As we will be updating multiple products using a CSV file, we need to define a loop and iterate over the CSV data.

At the tree-view on the left, click on the name of the plan, in our case Update-Inventory

  1. Select the root element of your Plan
  2. Then on the Control section, select Controls so that you see a list of controls.
  3. Select the ForEach control then click the button + Add control to add it to the plan In the parameter pane, go to Source type and select *CSV In the CSV file field, navigate to keywords > java > demo-playwright-keyword > plans and select Opencart_inventory.csv

[step-samples-folder]/keywords/java/demo-playwright-keyword/plans/Opencart_inventory.csv

4. Add and configure Update Product Keyword

  1. Select Keywords
  2. In the Keywords list, select Update Product Keyword then click the button + Add function to add it to the loop.
  3. In the product field, type row.Product. Note that “row” refers to each row in the CSV and “Product” is the name of the first column.
  4. Make product a dynamic field by activating the lightning button.
  5. In the quantity field, type row.Quantity. Finally, make quantity a dynamic field by activating the lightning button.

5. Run the automation

Now that you are done with the configuration, the next step is to execute the RPA. While still on the Plan window, simply click the play icon next to Start interactive session and confirm by clicking it in the Environment dialog again. The Executions window will automatically open as the Plan executes. The RPA will update the inventory according to the changes listed in the CSV file. You can continue using Step while the RPA runs.

You now know how to automate tasks using Step and Playwright, and can use this to greatly improve the work efficiency of your business.

Note: Note: To keep the OpenCart instance clean for everyone doing this tutorial the changes will not be saved in the OpenCart instance.

6. Check the status of your executions

To check the status of your execution at any time, click the Execute menu then click Executions the execution window will appear and you can now select individual execution to get a detailed view of that execution to open it again.

Hint: This can be done at any time, including when an execution is currently running.

Status of a successfully finished execution

Congratulations! You have successfully automated tasks using Step and Playwright. By following this tutorial, you’ve learned how to automate browser tasks, set up Plans, and utilize Playwright keywords in Step. Take advantage of Step’s capabilities to enhance the efficiency of your business processes.

Remember, to keep the OpenCart instance clean for everyone following this tutorial, the changes made during the execution will not be saved.

Illustration for Using Step with Grafana
Using Step with Grafana

This article demonstrates how to connect Grafana to data generated by Step.

Illustration for Setting up system monitoring with a Step agent
Setting up system monitoring with a Step agent

This article demonstrates how to set up distributed system monitoring using Keyword executions, and analyze the results as measurements.

Illustration for NET tutorials: Microsoft Office automation with Step
NET tutorials: Microsoft Office automation with Step

This tutorial demonstrates how to automate interaction with Microsoft Office applications using the Office Interop Assembly.

Illustration for JUnit Plan Runner
JUnit Plan Runner

This article provides documentation for how to integrate JUnit tests into Step.

Illustration for How to monitor services availability and performance
How to monitor services availability and performance

This tutorial demonstrates how Step can be used to monitor services, availability and performance metrics.

Illustration for .NET tutorials: AutoIt with Step
.NET tutorials: AutoIt with Step

This tutorial demonstrates how to utilize the AutoIt C# binding to automate interactions with Windows applications.

Illustration for Android Testing using Step and Appium
Android Testing using Step and Appium

This article demonstrates the automation of mobile applications on Android using the Appium framework.

Illustration for Browser-based automation with Step and Selenium
Browser-based automation with Step and Selenium

This article defines three Keywords which will be used in browser-based automation scenarios, using Step and Selenium, as general drivers.

Illustration for Load Testing with Cypress
Load Testing with Cypress - advanced

This tutorial shows you how to efficiently set up a browser-based load test using existing Cypress tests in the Step automation platform.

Illustration for Adding and Configuring New Agents
Adding and Configuring New Agents

In this short tutorial, we show how to quickly implement a simple browser-based load test based on Cypress scripts in Step.

Illustration for Load Testing with Playwright
Load Testing with Playwright - advanced

This tutorial shows you how to efficiently set up a browser-based load test using existing Playwright tests in the Step automation platform.

Illustration for Basic Keyword Development
Basic Keyword Development

This article explains Keywords in Step and demonstrates how to create simple ones.

Illustration for Designing functional tests
Designing functional tests

This tutorial demonstrates the design, execution, and analysis of functional tests using the web interface of Step.

Illustration for Robotic Process Automation (RPA) with Selenium
Robotic Process Automation (RPA) with Selenium

This tutorial will demonstrate how to use Step and Selenium to automate various browser tasks.

Illustration for Robotic Process Automation (RPA) with Cypress
Robotic Process Automation (RPA) with Cypress

This tutorial demonstrates how to use Step and Cypress to automate various browser tasks.

Illustration for Synthetic Monitoring with Selenium
Synthetic Monitoring with Selenium

This tutorial demonstrates how Selenium automation tests can be turned into full synthetic monitoring using Step.

Illustration for Load Testing with Cypress
Load Testing with Cypress

In this tutorial, you'll learn how to reuse existing Cypress tests to quickly set up and run a browser-based load test using the automation as code approach.

Illustration for Load Testing with Cypress
Load Testing with Cypress using the Step UI

In this tutorial, you'll learn how to reuse existing Cypress tests to quickly set up and run a browser-based load test using the Step UI.

Illustration for Load Testing with Selenium
Load Testing with Selenium

This tutorial shows you how to efficiently set up a browser-based load test using existing Selenium tests in the Step automation platform.

Illustration for Synthetic Monitoring with Playwright
Synthetic Monitoring with Playwright

This tutorial demonstrates how Playwright automation tests can be turned into full synthetic monitoring using Step.

Illustration for Synthetic Monitoring with Cypress
Synthetic Monitoring with Cypress

This tutorial demonstrates how Cypress automation tests can be turned into full synthetic monitoring using Step.

Illustration for Load Testing with Playwright
Load Testing with Playwright

In this tutorial, we'll show you how to easily set up and run a browser-based load test with Step's wizard, using your existing Playwright tests, on the Step automation platform.

Illustration grafana devops tutorial
Continuous load testing with K6

Quickly integrate K6 based load-tests in your DevOps workflow

Illustration for playwright synthetic monitoring in a devops workflow
DevOps Synthetic Monitoring with Playwright - Advanced

This tutorial demonstrates how Playwright tests can be reused for synthetic monitoring of a productive environment in a DevOps workflow

Illustration for playwright synthetic monitoring in a devops workflow
DevOps Synthetic Monitoring with Playwright

This tutorial demonstrates how Playwright tests can be reused for synthetic monitoring of a productive environment in a DevOps workflow

Illustration for okhttp devops
Protocol-based load testing with okhttp

In this tutorial you'll learn how to quickly set up a protocol-based load test with okhttp

Illustration for playwright devops
Continuous end-to-end testing

Learn how to set up continuous end-to-end testing across several applications based on Playwright tests in your DevOps pipeline using Step

Illustration for playwright devops
Continuous load testing with Playwright

Learn how to quickly set up continuous browser-based load testing using Playwright tests in your DevOps pipeline

Want to hear our latest updates about automation?

Don't miss out on our regular blog posts - Subscribe now!

Image of a laptop device to incentivize users to subscribe