GitHub Action Integration with Playwright

GitHub Action integration with Playwright enables seamless automated testing and deployment workflows for web applications.GitHub Actions, the platform’s automation tool, allows these tests to be triggered automatically upon code changes, ensuring rapid feedback and efficient bug detection. 

This integration empowers teams to build, test, and deploy with confidence, automating repetitive tasks and enhancing overall development productivity. By combining the versatility of Playwright with the automation capabilities of GitHub Actions, developers can streamline their workflows, delivering high-quality web applications with speed and precision.

What is Playwright?

Microsoft Playwright is an open-source automation framework for end-to-end testing, browser automation, and web scraping. Developed by Microsoft, Playwright provides a unified API to automate interactions with web browsers like  Microsoft Edge,Google Chrome, and Mozilla Firefox. It allows developers to write scripts in various programming languages,including Java,Python,JavaScript,and C#.

Here are some key features of Playwright:

Multi-Browser Support: Playwright supports multiple web browsers, including Firefox, Chrome,Safari,and Microsoft Edge. This allows developers and testers to run their tests on different browsers with a consistent API.

Headless and Headful Modes: Playwright can run browsers in both headless mode (without a graphical interface) and headful mode (with a graphical interface), providing flexibility for different use cases.

Cross-Browser Testing: Playwright allows you to write tests that run on multiple browsers,platforms , ensuring your web application works correctly across different platforms.

Emulation of Mobile Devices and Touch Events: Playwright can emulate various mobile devices and simulate touch events, enabling you to test how your web application behaves on different mobile devices.

Parallel Test Execution: Playwright supports parallel test execution, allowing you to run tests concurrently, reducing the overall test suite execution time.

Capture Screenshots and Videos: Playwright can capture screenshots and record videos during test execution, helping you visualize the behavior of your application during tests.

Intercept Network Requests: You can intercept and modify network requests and responses, which is useful for testing scenarios involving AJAX requests and APIs.

Auto-Waiting for Elements: Playwright automatically waits for elements to be ready before performing actions, reducing the need for manual waits and making tests more reliable.

Page and Browser Contexts: Playwright allows you to create multiple browser contexts and pages, enabling efficient management of browser instances and isolated environments for testing.

What is GitHub Actions?

GitHub Actions is an automation platform offered by GitHub to streamline software development workflows. It empowers users to automate a wide array of tasks within their development processes. By leveraging GitHub Actions, developers/qa engineers can craft customized workflows that are initiated by specific events such as code pushes, pull requests, or issue creation. These workflows can automate essential tasks like building applications, running tests, and deploying code. Essentially, GitHub Actions provides a seamless way to automate various aspects of the software development lifecycle directly from your GitHub repository.

How GitHub Actions Effective in Automation Testing

GitHub Actions is a powerful tool for automating various workflows, including QA automation testing. It allows you to automate your software development processes directly within your GitHub repository. Here are some ways GitHub Actions can be effective in QA automation testing:

1. Continuous Integration (CI):

GitHub Actions can be used for continuous integration, where automated tests are triggered every time there is a new code commit or a pull request. This ensures that new code changes do not break existing functionality. Automated tests can include unit tests, integration tests, and end-to-end tests.

2. Diverse Test Environments:

GitHub Actions supports running workflows on different operating systems and environments. This is especially useful for QA testing, as it allows you to test your application on various platforms and configurations to ensure compatibility and identify platform-specific issues.

3. Parallel Test Execution:

GitHub Actions allows you to run tests in parallel, significantly reducing the time required for test execution. Parallel testing is essential for large test suites, as it helps in obtaining faster feedback on the code changes.

4. Custom Workflows:

You can create custom workflows tailored to your QA automation needs. For example, you can create workflows that run specific tests based on the files modified in a pull request. This targeted testing approach helps in validating specific changes and reduces the overall testing time.

5. Integration with Testing Frameworks:

GitHub Actions can seamlessly integrate with popular testing frameworks and tools. Whether you are using Selenium,Cypress , Playwright  for web automation, Appium for mobile automation, or any other testing framework, you can configure GitHub Actions to run your tests using these tools

In the next section you will see how we can integrate GitHub Actions with Playwright to execute the test cases..

Set Up CI/CD GitHub Actions to Run Playwright Test

Pre-condition : 

User should have a GitHub account and already be logged-in. 

Use Cases

For automation purpose we are taking two example, one of UI and other of API 

Example 1:

Below the example of UI test cases where we are login into the site  https://talent500.co/auth/signin after successful login , logout from the application

// @ts-check

const { test, expect } = require(“@playwright/test”);

test.describe(“UI Test case with Playwright”, () => {

test(“UI Test case”, async ({ page }) => {

await page.goto(‘https://talent500.co/auth/signin’)

await page.locator(‘[name=”email”]’).click();

await page.locator(‘[name=”email”]’).fill(‘applitoolsautomation@yopmail.com’);

await page.locator(‘[name=”password”]’).fill(‘Test@123’);

await page.locator(‘[type=”submit”]’).nth(1).click();

await page.locator(‘[alt=”DropDown Button”]’).click();

await page.locator(‘[data-id=”nav-dropdown-logout”]’).click();

});

});

Example 2:

Below the example of API where we are doing the automation using the end point https://reqres.in/api for GET request

Verify the Following things :

1. GET request with Valid 200 Response 
2. GET request with InValid 404 Response 
3. 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();

});

});

Steps For Configuring GitHub Actions

Step 1 : Create New repository

Create a repository in my case let’s say “Playwright_GitHubAction”.

Step 2: Install Playwright

Install playwright using the command

npm init playwright@latest

OR  

yarn create playwright

Step 3: Create Workflow

Define your workflow in the YAML file. Here’s an example of a GitHub Actions workflow that is used to run Playwright test cases.

In this example, the workflow is triggered on every push and pull request. It sets up Node.js, installs project dependencies, and then runs ‘npx playwright test’ to execute Playwright tests.

Add the following .yml file under the path ‘.github/workflows/e2e-playwright.yml’ in your project 

name: GitHib Action Playwright Tests

on:

push:

branches: [ main ]

pull_request:

branches: [ main ]

jobs:

test:

timeout-minutes: 60

runs-on: ubuntu-latest

steps:

– uses: actions/checkout@v3

– uses: actions/setup-node@v3

with:

node-version: 18

– name: Install dependencies

run: npm ci

– name: Install Playwright Browsers

run: npx playwright install –with-deps

– name: Run Playwright tests

run: npx playwright test

– uses: actions/upload-artifact@v3

if: always()

with:

name: playwright-report

path: playwright-report/

retention-days: 10

Here’s a breakdown of what this workflow does:

• Trigger Conditions:

• • • The workflow is triggered on push events to the main branch.

• Job Configuration:

• • Job name: e2e-test
  • Timeout: 60 minutes (the job will be terminated if it runs for more than 60 minutes)
  • Operating System: ubuntu-latest
• Steps:
  • Step 1: Check out the repository code using actions/checkout@v3.
  • Step 2: Set up Node.js version 18 using actions/setup-node@v3.
  • Step 3: Installs project dependencies using npm ci.
  • Step 4: Installs Playwright browsers and their dependencies using npx playwright install –with-deps.
  • Step 5: Runs Playwright tests using npx playwright test
  • Step 6: Uploads the test report directory (playwright-report/) as an artifact using actions/upload-artifact@v3. This step will always execute (if: always()) and the uploaded artifact will be retained for 10 days.

Test results will be stored in the playwright-report/ directory.

Below the folder structure where you can see the .yml file and test cases under the ‘tests’ folder  that we have to execute. 

Execute the Test Cases

Commit your workflow file (e2e-playwright.yml) and your Playwright tests files. Push the changes to your GitHub repository. GitHub Actions will automatically pick up the changes and run the defined workflow.

As we push the code workflow starts to run automatically

Click on above link to open e2e-test 

Click on e2e-test from the above screens. In the below screen you  can see code is checkout from GitHub also browsers start installing

Once all dependencies and browsers are installed, the test case starts executing. In the below screenshot you can see all 12 Test cases are passed in three browsers (Firefox,Chrome and WebKit)

HTML Report

Click on the playwright-report  link from the Artifacts section. HTML report is generated locally

Click on the link above,You can see in the HTML BOTH API and UI test cases are passed.

Wrapping up

GitHub Actions automate the testing process, ensuring that every code change is thoroughly examined without manual intervention.Playwright’s ability to test across various browsers and platforms guarantees a comprehensive evaluation of your application’s functionality

GitHub Actions with Playwright provides a robust and automated solution for testing web applications. By harnessing the power of these two tools, developers can streamline their workflows, ensure the quality of their code, and ultimately deliver better user experiences.