What is Playwright?

Playwright is an open-source Node.js library started by Microsoft for automating browsers based on Chromium, Firefox, and WebKit through a single API. The primary goal of Playwright is to improve automated UI testing. Playwright is made to enable cross-browser web automation.

Playwright test allows to:

• Run tests across all browsers.
• Execute tests in parallel.
• Capture videos, screenshots, and other artifacts on failure.
• Enjoy context isolation out of the box.
• Integrate your POMs as extensible fixtures.

Why Playwright?

Playwrights have very rich features, a number of features are explained below

1. Easy Setup: Playwright is extremely easy to line up in an exceedingly few min we will start writing the script
2. Browser Support: Playwright support multiple browse Chromium family browsers (Chrome, Edge), Webkit (Safari), and Firefox are all supported.
3. Parallel Testing: Playwright supports parallel execution. we can run parallel tests with multiple browsers.
4. Support for Multiple Tab: Playwright supports multi-tab and windows by launching a new window.
5. Language Support: Playwright supports Java, C#, Python, and Javascript, Typescript which makes him popular.
6. Testing: Using Playwright we can do End to End, Functional, API Testing, and Accessibility Testing.
7. Built-in Reporters: Playwright framework support JSON, JUnit, and HTML Reporters. Playwright also supports the reporter Allure Report.
8. CI/CD Support: Playwright supports CI/CD integration like Jenkins, Circle CI, Bitbucket Pipeline Bamboo, AWS CodePipeline, Travis CI, GitHub Actions, and more.

Other features Playwright support

• Shadow DOM
• Automatic Waiting,
• Page object model
• Test Retry,
• Cross-Origin
• iframe
• Emulation
• Screenshot capture
• Video Capture

What are GitHub Actions

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository or deploy merged pull requests to production.

GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository. GitHub provides Linux, Windows, and macOS virtual machines to run your workflows, or you can host your own self-hosted runners in your own data center or cloud infrastructure.

Set Up CI/CD GitHub and Run Playwright Test cases on GitHub-hosted virtual machines

Pre-condition :

User should have a GitHub account and already be logged in

Step 1

Create a repository in my case let’s say “playwright_with_javascripts”.Initially, there is no code in created repo

Step 2

Push the code to the newly created repo.

I have used TWO examples below for demonstration purposes.

Example 1

A code snippet is below

In the below code, we are :

1. Opening the URL https://qaautomationlabs.com/
2. Verifying the title
3. Search the Blog with the text ‘Playwright

// @ts-check
const { test, expect } = require(“@playwright/test”);
test(“Open the site ‘qaautomationlabs.com ‘and verify the title and Click on Menu Blogs”, async ({
page,
}) => {
await page.goto(“https://qaautomationlabs.com/”);
await expect(page).toHaveTitle(/About Us – QAAutomationLabs/);
const blogs = page.locator(“//span[text()=’Blogs’]”);
await blogs.last().click();
});
test(“Search the Blog with text ‘Playwright “, async ({ page }) => {
await page.goto(“https://qaautomationlabs.com/”);
const blogs = page.locator(“//span[text()=’Blogs’]”);
const search = page.locator(“id=wp-block-search__input-2”);
const searchIcon = page.locator(“id=search-icon”);
await blogs.last().click();
await search.type(“Playwright”);
await searchIcon.click();
});

Example 2

A code snippet is below

In the below code, we are :

1. We are doing API testing with GET request
2. GET request with Valid 200 Response
3. GET request with InValid 404 Response
4. Finally verifying the user detail

// @ts-check
const { test, expect } = require(“@playwright/test”);
test.describe(“API Testing with Playwright”, () => {
const baseurl = “https://reqres.in/api”;
test(“GET API Request with – Valid 200 Response “, async ({ request }) => {
const response = await request.get(`${baseurl}/users/2`);
expect(response.status()).toBe(200);
});
test(“GET API Request with – InValid 404 Response “, async ({ request }) => {
const response = await request.get(`${baseurl}/usres/invalid-data`);
expect(response.status()).toBe(404);
});
test(“GET Request – Verify User detils “, async ({ request }) => {
const response = await request.get(`${baseurl}/users/2`);
const responseBody = JSON.parse(await response.text());
expect(response.status()).toBe(200);
expect(responseBody.data.id).toBe(2);
expect(responseBody.data.first_name).toBe(“Janet”);
expect(responseBody.data.last_name).toBe(“Weaver”);
expect(responseBody.data.email).toBeTruthy();
});
});

After pushing the code click on the “Actions” Tab

Step 3

After clicking on the Actions Tab go to the bottom and click on Configure under Automation -> Manual workflow Section (Highlighted below)

Workflow

A workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked into your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule. Workflows are defined in the .github/workflows directory in a repository,

Under project/.github/workflow/manual.yml created

Step 4

Update the above manual.yml with the below code. We can update the .yml name at your convenience.# This is a basic workflow that is manually triggered

on:
push:
branches:
– main

jobs:
e2e-tests:
runs-on: windows-latest

steps:
– uses: actions/checkout@v2
– uses: actions/setup-node@v2
with:
node-version: “18.x”
– uses: microsoft/playwright-github-action@v1
– name: Install Playwright Browsers
run: npx playwright install –with-deps
– name: Install dependencies and run tests
run: npm install && npx playwright test
– uses: actions/upload-artifact@v2
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30

Explanation of lines used above

name: Name of the workflow.

on: The on keyword lets you define the events that trigger when the workflow is run. For more information, see “Triggering a workflow.”

Jobs: Groups together all the jobs that run in the workflow file.

runs-on: Name of the Job and system on which job will run in this case Job will run in ubuntu

steps: Groups together all the steps that you will run as part of the job. Each job in a workflow has its own steps section.

The uses keyword tells the job to retrieve the action named actions/checkout. This is an action that checks out your repository and downloads it to the runner.

Finally, GitHub Action will:

• Install npm dependencies
• Run the Playwright tests within our GitHub repository
• Report is generated at the end with .zip file

Step 5

As we push the code workflow starts to run automatically

Click on e2e-tests from the above screens. In the below screen, we can see the code is checkout from GitHub

In the below screenshot, we can see browsers are installing

In the below screenshot, we can see all dependencies are installed and after that playwright test cases start executing

In the below screenshot, we can see all 15 Test cases are passed

In the below screenshot, the report is generated

Report

Click on playwright-report .zip file is downloaded.

In the below screenshot, we can see both test case run and passed in Chromium, firefox, and WebKit