Automate Playwright Test Cases With CI/CD GitHub Actions
Automate Playwright Test Cases With CI/CD GitHub Actions

Automate Playwright Test Cases With CI/CD GitHub Actions

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 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. Below is a simple test case where we searched some data and verified it.

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 tthe 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();
});
});

Step 3

After pushing the code click on the “Actions” Tab

Step 4

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

Workflow

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 5

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 # or macos-latest, windows-latest

steps:
— uses: actions/[email protected]
— uses: actions/[email protected]
with:
node-version: “16.x”
— uses: microsoft/[email protected]
— name: Install Playwright Browsers
run: npx playwright install — with-deps
— name: Install dependencies and run tests
run: npm install && npx playwright test
— uses: actions/[email protected]
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 6

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 report is generated

Report

Click on playwright-report .zip file is downloaded.

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

☕️ Happy testing! ☕️

Leave a Reply

Your email address will not be published.