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
  Copy

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
  Copy

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
  Copy

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.

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.

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.