Playwright: Open Source Automation Testing Framework

Playwright: Open Source Automation Testing Framework

What is  Playwright?

Microsoft has created a free and open-source framework for web automation testing. Playwright is a tool that allows developers to automate browser actions, such as filling out forms, clicking buttons, and navigating web pages. It supports multiple browsers like Chrome, Firefox, and Safari and offers a simple API to write automation scripts in various programming languages. It’s very popular in the Software Quality Assurance (SQA) community.

Why do we use Playwright?

We use Playwright because it makes cross-browser testing quick, dependable, and possible. In addition to functioning with several operating systems and browsers, it supports contemporary web applications and offers capabilities like auto-waiting, network interception, and simple parallel testing.

Which types of applications can be tested with Playwright?

• Web browser apps
• Mobile web apps
• APIs

What programming languages are supported by Playwright?

• JavaScript
• TypeScript
• Java
• Python
• .NET (C#)

Which browsers are compatible with Playwright?

All modern engines e.g.,

• Chromium,
• WebKit,
• and Firefox (supports both headed and headless modes)

What operating systems are supported by Playwright?

• Windows
• macOS
• Linux

Features of the Playwright:

• Open source
• Multi-browser, multi-language, multi-OS
• Easy setup and configuration
• Perform functional, API and accessibility testing
• Built-in reporters
• Docker support
• Recording, debugging, explore selectors
• Perform parallel testing
• Auto-wait
• Built-in assertions
• Test retry, logs, screenshots, videos
• Multi-tab and multi-window
• Emulate mobile devices and geolocations.
• Fast

Automation Using Playwright:

Get started:

First, ensure that Node.js is installed. To do this, open the Command Prompt and enter the following commands:

npm --version

node --version

If we do not get any version info through the commands, we must install it. To do this, we may follow the Node.js documentation.

After that, we will use JavaScript and Visual Studio Code (VS Code) as our Integrated Development Environment (IDE).

Installation:

Install using the command as npm package

Step 1: Create a new folder and open it in VS code

Step 2: Go to the terminal and run the command,

npm init playwright @latest

Step 3: The following will be added

• package.json – Node project management file will be added.
• playwright.config.js – Configuration file for Playwright.
• tests folder – Contains basic example tests.
• tests–example folder – Contains detailed example tests.
• gitignore – Specifies files and directories that Git will ignore.
• playwright.yml – Configuration file for CI/CD pipelines.

Step 4: Check playwright added – npx playwright -v

Look at the following example to see how to write a test.

tests/example.spec.js

import { test, expect } from '@playwright/test';  test('Basic test', async ({ page }) => {   await page.goto('https://qajobs.qaharbor.com/');   // Expect a title "to contain" a substring.   await expect(page).toHaveUrl(‘https://qajobs.qaharbor.com/’);  });

Step 5: To see all available Playwright command options, use the following command:

npx playwright --help

Key Commands

Typically, you need to know a few key commands to run a Playwright project. Here are some essential commands you might use:

# Runs all tests on all browsers in headless mode npx playwright test  # Runs with 3 workers at a time npx playwright test --workers 3  # Runs a specific test file npx playwright test one.spec.js  # Runs on a specific browser (Chromium) npx playwright test --project=chromium  # Runs tests in headed mode npx playwright test --headed  # Debug tests npx playwright test –debug  # Debug specific test file npx playwright test example.spec.js --debug  #To run a specific project using chromium and headed mode. npx playwright test navigation.spec.js --project=chromium --headed

Pros and Cons of Playwright

Pros of Playwright:

• Cross-Browser Testing: Supports testing across multiple browsers, including Chromium, Firefox, and WebKit.
• Auto-Waiting: Automatically waits for elements to be ready before interacting, reducing the need for manual waits.
• Network Interception: This allows you to intercept and modify network requests and responses, which helps simulate different scenarios and test edge cases.
• Multiple Contexts: Enables testing of various pages or scenarios simultaneously within the same browser instance using different contexts.
• Headless and Head Modes: Offers both headless mode (for automated tasks) and head mode (for development and debugging with a visible interface).
• Cross-Platform: Supports Windows, macOS, and Linux operating systems.
• Parallel Testing: Allows running tests in parallel, improving test suite execution times.
• Visual Comparisons: Provides tools for capturing screenshots and performing visual regression testing.
• Continuous Integration Support: Integrates well with CI/CD pipelines for automated test execution.
• API Testing: Supports testing of APIs directly, enabling end-to-end testing of web applications.

Cons of Playwright:

• Steeper Learning Curve: More complex to learn than simpler tools.
• Limited Documentation: Less extensive documentation and community support.
• Inconsistent Behavior: Some features might work differently across all browsers.
• Resource Intensive: Can use many system resources, especially with parallel tests.
• Integration Complexity: Setting up with existing tools may be challenging.
• Fewer Plugins: Fewer third-party plugins and extensions are available.

Since this is a free and open-source framework, you can find detailed documentation for each feature needed to create a project. Here is the link to the playwright’s documentation:

Useful Links:

1. Github Project: https://github.com/microsoft/playwright
2. Official site: https://playwright.dev/

You may love to learn about Cypress, a testing framework for JavaScript.