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
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:
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!
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.
- 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:
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.
- Navigate to Keywords
- Click the Upload Package button
- 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
- 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.
- Navigate to Plans
- Click the + Add function to create a new plan
- Enter a name
- Select as a Template
- 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.
- Click on Keywords tab to show a list of available keywords
- In the Keyword list, select the Keyword Playwright - Opencart Admin Login by clicking the + Add function
- Click on the newly imported keyword
- 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
- Select the root element of your Plan
- Then on the Control section, select Controls so that you see a list of controls.
- 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
4. Add and configure Update Product Keyword
- Select Keywords
- In the Keywords list, select Update Product Keyword then click the button + Add function to add it to the loop.
- 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.
- Make product a dynamic field by activating the lightning button.
- 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.
This article demonstrates how to connect Grafana to data generated by Step.
This article demonstrates how to set up distributed system monitoring using Keyword executions, and analyze the results as measurements.
This tutorial demonstrates how to automate interaction with Microsoft Office applications using the Office Interop Assembly.
This article provides documentation for how to integrate JUnit tests into Step.
This tutorial demonstrates how Step can be used to monitor services, availability and performance metrics.
This tutorial demonstrates how to utilize the AutoIt C# binding to automate interactions with Windows applications.
This article demonstrates the automation of mobile applications on Android using the Appium framework.
This article defines three Keywords which will be used in browser-based automation scenarios, using Step and Selenium, as general drivers.
This tutorial shows you how to efficiently set up a browser-based load test using existing Cypress tests in the Step automation platform.
In this short tutorial, we show how to quickly implement a simple browser-based load test based on Cypress scripts in Step.
This tutorial shows you how to efficiently set up a browser-based load test using existing Playwright tests in the Step automation platform.
This article explains Keywords in Step and demonstrates how to create simple ones.
This tutorial demonstrates the design, execution, and analysis of functional tests using the web interface of Step.
This tutorial will demonstrate how to use Step and Selenium to automate various browser tasks.
This tutorial demonstrates how to use Step and Cypress to automate various browser tasks.
This tutorial demonstrates how Selenium automation tests can be turned into full synthetic monitoring using Step.
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 Cypress tests, on the Step automation platform.
This tutorial shows you how to efficiently set up a browser-based load test using existing Selenium tests in the Step automation platform.
This tutorial demonstrates how Playwright automation tests can be turned into full synthetic monitoring using Step.
This tutorial demonstrates how Cypress automation tests can be turned into full synthetic monitoring using Step.
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.
Want to hear our latest updates about automation?
Don't miss out on our regular blog posts - Subscribe now!