Robot Framework with Playwright Library

Robot Framework Automation Tests with Playwright Library for Browser Automation

In this blogpost, we will discuss how to run the Robot Framework automation tests using Playwright Library on Visual Studio code IDE.

The Robot Framework team call the Playwright Library as "Browser". This is similar to Selenium Library.

First things first, I will put this blogpost in two simple points.

1. Set up 

2. Test Automation framework

1. Set Up : Do the following installations on your Mac.

• Install Homebrew : Go to the page Homebrew for reference. Run the command below on your terminal to install Homebrew:/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"   

• Install Node: Run the command "brew install node" on your terminal
• Install Python3 : Go to Python3-Download

Check python3 version 

Check your path of python3 : Run the command "which -a python3"

Note down this path: 

/Library/Frameworks/Python.framework/Versions/3.13/bin/python3

• Install Browser library from PyPi with pip: Run the command on your terminal pip3 install robotframework-browser

• Initialize the Browser library: Run the command on your terminal rfbrowser init

Just in case, run the command "pip3 install --upgrade robotframework-browser"

• Download Visual studio Code: Go to Visual Studio Code Download

Open your Visual studio code, Go to market place and install the plugin "Robot Framework Language Server" and install this plugin

Go to settings as shown below

Make sure, you've set the path as shown below in "robot.language-server.python"

Also, Set the path in "robot.python.executable" as shown below

Install the plugin "Robocorp code" as shown below

Now, On your visual studio code,  If you hover to the "Browser" Library it should show something like this below. This is the Playwright Library.

Now, When you type the "Browser" Library keywords the intellisense should show up

We can avoid setting up the Project interpreter and intellibot plugin by using VS Code compared to Pycharm IDE.

Drivers and browsers will come as a bundle when you install playwright powered library "Browser".

On the other hand, in Browser library there are 3 layers: Browser, Context, Page which is the same like in our typical Playwright.

Documentation: For Official documentation, Please visit 

• RF Browser Library
  
• Keyword-Doc
  

2. Test Automation framework: A basic boilerplate code using Page Object Design framework is created for this post and the folder structure, page objects, pages, test and test report are shown below.

The Folder structure looks like this

Page Objects: The locators used for the test

*** Settings ***

Documentation Page Objects for Login Page

*** Variables ***

${USERNAME} data-test=username

${PASSWORD} data-test=password

${LOGIN_BUTTON} data-test=login-button

${BOT_IMAGE} css=.bot_column

 Pages : The individual web pages used for  the test

Test : The test scenario description and test steps mentioned for the test. Documentation giving the overview of the test, Libraries and Resources imported. 

The Test Cases section are named with keywords as PageName.FunctionName for example "LoginPage.TypeText"

Test Run : Run the command "robot -d Report Tests/*.robot " on your terminal   

Test Report: From your Report Folder 'Report/report.html'

Test Output:

For test code reference, Please see GitHub Repo: GitHub Repo

Conclusion:

With Browser Library:

1. No Need to Download browser drivers.

2. Browser Library is pretty faster in test execution when compared to Selenium Library.

3. Browser Library powered by Playwright is reliable, visible and faster.

4. Supports chromium, firefox and safari(webkit) browsers. 

5. Good shadow DOM support.

Happy Automation Testing Guys :)!

Playwright with Browserstack

Playwright Automation Tests Integration with Browserstack

In this blogpost, we will discuss how to run the playwright automation tests on BrowserStack platform.

First of all, Sign up with BrowserStack Signup

Now, once you sign up, login to your BrowserStack account.

For test code reference, Please see the GitHub Repo: Playwright-SauceDemo-BrowserStack

Open this repo mentioned above in your VS code and Now, go to the 'browserstack.config.js' file and the file looks like this

import { execSync } from "child_process";

const clientPlaywrightVersion = execSync("npx playwright --version")

.toString()

.trim()

.split(" ")[1];

const caps = {

browser: "chrome",

os: "osx",

os_version: "catalina",

name: "My first playwright test",

build: "playwright-build-009",

"browserstack.username": "jaykishore_kjTNiL",

"browserstack.accessKey": "9AnpwFRARxnsncYJzpq4",

"browserstack.local": false,

"client.playwrightVersion": clientPlaywrightVersion,

};

const patchCaps = (name, title) => {

let combination = name.split(/@browserstack/)[0];

let [browerCaps, osCaps] = combination.split(/:/);

let [browser, browser_version] = browerCaps.split(/@/);

let osCapsSplit = osCaps.split(/ /);

let os = osCapsSplit.shift();

let os_version = osCapsSplit.join(" ");

caps.browser = browser ? browser : "chrome";

caps.browser_version = browser_version ? browser_version : "latest";

caps.os = os ? os : "osx";

caps.os_version = os_version ? os_version : "catalina";

caps.name = title;

};

export function getCdpEndpoint(name, title) {

patchCaps(name, title);

const wsEndpoint = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(

JSON.stringify(caps)

)}`;

console.log(`--> ${wsEndpoint}`);

return wsEndpoint;

}

Now, go to the 'playwright.config.js' file and the file looks like this

import { defineConfig } from "@playwright/test";

import { getCdpEndpoint } from "./browserstack.config.js";

export default defineConfig({

testDir: "./tests",

testMatch: "**/*.test.js",

reporter: [["list"], ["./CustomReporter"]],

timeout: 60000,

use: {

viewport: null,

},

projects: [

{

name: "chrome@latest:Windows 10",

use: {

browserName: "chromium",

channel: "chrome",

connectOptions: {

wsEndpoint: getCdpEndpoint("chrome@latest:Windows 10", "test1"),

},

},

},

{

name: "chrome@latest:Windows 11",

use: {

browserName: "chromium",

channel: "chrome",

connectOptions: {

wsEndpoint: getCdpEndpoint("chrome@latest:Windows 11", "test2"),

},

},

},

{

name: "chrome@latest-beta:OSX Big Sur",

use: {

browserName: "chromium",

channel: "chrome",

connectOptions: {

wsEndpoint: getCdpEndpoint("chrome@latest-beta:OSX Big Sur", "test3"),

},

},

},

{

name: "edge@90:Windows 10",

use: {

browserName: "chromium",

connectOptions: {

wsEndpoint: getCdpEndpoint("edge@90:Windows 10", "test4"),

},

},

},

{

name: "playwright-firefox@latest:OSX Catalina",

use: {

browserName: "firefox",

connectOptions: {

wsEndpoint: getCdpEndpoint(

"playwright-firefox@latest:OSX Catalina",

"test5"

),

},

},

},

{

name: "playwright-webkit@latest:OSX Big Sur",

use: {

browserName: "webkit",

connectOptions: {

wsEndpoint: getCdpEndpoint(

"playwright-webkit@latest:OSX Big Sur",

"test6"

),

},

},

},

{

name: "playwright-webkit@latest:OSX Ventura",

use: {

browserName: "webkit",

connectOptions: {

wsEndpoint: getCdpEndpoint(

"playwright-webkit@latest:OSX Ventura",

"test7"

),

},

},

},

{

name: "playwright-firefox:Windows 11",

use: {

browserName: "firefox",

connectOptions: {

wsEndpoint: getCdpEndpoint("playwright-firefox:Windows 11", "test8"),

},

},

},

],

});

Now, Go to your 'package.json' file and it looks like this below

{

"name": "playwright-test-automation",

"version": "1.0.0",

"description": "Playwright Test Runner with JavaScript",

"main": "index.js",

"scripts": {

"test": "npx playwright test",

"test:smoke": "npx playwright test --grep @smoke --project='chrome@latest:Windows 10'",

"test:browserstack": "npx playwright test --grep @smoke",

"test:serial": "npx playwright test --workers=1 --project=Chrome",

"test:one": "npx playwright test tests/TC_01_productPage.test.js",

"test:firefox": "npx playwright test --project=Firefox",

"test:safari": "npx playwright test TC_05_checkoutWithPGUandSU.test.js --project=Safari",

"test:edge": "npx playwright test --project=Edge",

"test:chrome-report": "npx playwright test --project=Chrome --reporter=html && npx playwright show-report",

"test:firefox-report": "npx playwright test --project=Firefox --reporter=line,allure-playwright",

"test:edge-report": "npx playwright test --project=Edge --reporter=html && npx playwright show-report",

"test:safari-report": "npx playwright test --project=Safari --reporter=line,allure-playwright",

"test:shard": "npx playwright test TC_01_productPage.test.js --shard=3/3 --project=Chrome",

"test:two": "npx playwright test TC_02_checkoutWorkflow.test.js --project=Chrome",

"test:three": "npx playwright test TC_03_checkoutWithSUandPGU.test.js --project=Chrome",

"test:four": "npx playwright test TC_04_checkoutWithPUandPGU.test.js --project=Chrome",

"test:five": "npx playwright test TC_05_checkoutWithPGUandSU.test.js --project=Chrome",

"test:record": "npx playwright codegen",

"html-report": "npx playwright test --reporter=html && npx playwright show-report",

"show-trace": "npx playwright show-trace",

"allure:clean": "rm -rf allure-results",

"allure-generate": "allure generate ./allure-results --clean",

"allure:report": "npm run allure-generate && allure serve",

"postinstall": "npm update browserstack-node-sdk"

},

"keywords": [

"Plawright",

"BrowserStack",

"Test Automation",

"JavaScript"

],

"author": "Jay Kishore Duvvuri",

"license": "ISC",

"dependencies": {

"@playwright/test": "^1.49.1",

"browserstack-local": "^1.5.3",

"fs": "^0.0.1-security",

"prettier": "^2.6.2"

},

"devDependencies": {

"browserstack-node-sdk": "^1.23.2"

}

}

This is the one we execute soon 

"test:browserstack": "npx playwright test --grep @smoke",

All good to go! The set up is completed! 

Now on your terminal run the test : npm run test:browserstack

Go to your BrowserStack account, the test will be running and completed...!

Click on the session name as shown below

Once the test is completed your VS Code console looks like this

Run all the tests now on your terminal: npm run test

Go to your BrowserStack account

Your VS Code console looks like this

A sample Test output on BrowserStack:

Here is the BrowserStack public link, just in case 

Test-Run-1

Test-Run-2

Happy Automation testing Guys :)!