UI Automation Through Playwright

What is Playwright?

Playwright is an open-source automation framework for end-to-end testing of web applications. Developed by Microsoft, it enables developers and testers to write reliable tests for modern web applications across multiple browsers, including Chromium, Firefox, and WebKit. Playwright supports headless and headful execution, allowing for flexible testing in various environments.

Key Features of Playwright:

Cross-browser testing (Chromium, Firefox, WebKit, Edge)
Auto-wait mechanisms to reduce flaky tests
Headless and headful execution
API testing support
Mobile emulation
Parallel test execution
Powerful locators for element selection
Built-in code generation tool (playwright codegen)

Setting Up Playwright

Setting up Playwright is straightforward. Follow these steps to install and configure it on your local machine.

Step 1: Install Node.js

Playwright requires Node.js. If you haven’t installed it yet, download and install it from Node.js official website.

Step 2: Create a New Project

Open a terminal and create a new project folder:

mkdir playwright-demo && cd playwright-demo

Step 3: Initialize a Node.js Project

Run the following command to create a package.json file:

npm init -y

Step 4: Install Playwright

Install Playwright and its browsers using:

npm install -D @playwright/test
npx playwright install

Step 5: Verify Installation

To check if Playwright is installed correctly, run:

npx playwright --version

Using Locators in Playwright

Playwright provides powerful locators to interact with elements on a web page. Locators help in identifying elements efficiently, making tests more reliable.

Example of Using Locators

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

test('Search functionality', async ({ page }) => {
  await page.goto('https://example.com');
  const searchBox = page.locator('input[name="q"]');
  await searchBox.fill('Playwright');
  await searchBox.press('Enter');
  await expect(page.locator('text=Results')).toBeVisible();
});

Generating Code with Playwright Codegen

Playwright provides an automatic test generation tool called playwright codegen. This tool records your interactions and generates test scripts.

Running Playwright Codegen

Run the following command to start the code generator:

npx playwright codegen example.com

This will open a browser where you can interact with the webpage. Playwright will record your actions and generate the corresponding test code automatically.

Example of Generated Code

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.locator('input[name="q"]').fill('Playwright');
  await page.locator('input[name="q"]').press('Enter');
  await browser.close();
})();

Basic Playwright Commands

Here are some essential Playwright commands to get started:

Running a Test

npx playwright test

Running Tests in Headed Mode

npx playwright test --headed

Running a Specific Test File

npx playwright test tests/example.spec.js

Running Tests in a Specific Browser

npx playwright test --project=chromium

Generating Test Reports

npx playwright test --reporter=html

Debugging Tests

To debug tests, use:

npx playwright test --debug

Setting Up Playwright on a Server

If you want to run Playwright tests on a remote server, follow these steps:

Step 1: Install Dependencies

On a Linux server, install the required dependencies:

sudo apt update && sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libxkbcommon-x11-0 libxcomposite1 libxrandr2 libxdamage1 libasound2

Step 2: Install Playwright

Run the following commands:

npm install -D @playwright/test
npx playwright install

Step 3: Run Tests in Headless Mode

Since servers often don’t have a GUI, run tests in headless mode:

npx playwright test --headless

Step 4: Running Playwright in CI/CD

To integrate Playwright into CI/CD pipelines, use the following:

npx playwright install --with-deps

For GitHub Actions, use this sample configuration in .github/workflows/playwright.yml:

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 16
      - name: Install Dependencies
        run: npm install
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Tests
        run: npx playwright test

Conclusion

Playwright is a powerful testing framework that simplifies browser automation for modern web applications. With its cross-browser support, headless execution, and CI/CD integration, Playwright is a great choice for developers and testers looking to automate their workflows efficiently. The locator feature makes element selection precise and reliable, while playwright codegen helps in quick test script generation.

Techno Grim