Microsoft Playwright Overview

Microsoft Playwright is a framework for web testing and automation that allows testing Chromium, Firefox and WebKit with a single API. It is developed by Microsoft and supports programming languages like Java, Python, C#, and Node.js. Playwright is built to enable cross-browser web automation that is evergreen, capable, reliable and fast.

Some of the pros of using Playwright are:

• It supports headless and headful execution modes for all browsers on all platforms.
• It has a rich and fluent API that covers most web scenarios, such as navigation, input, dialogs, network, cookies, screenshots, etc.
• It has a built-in test runner called Playwright Test that provides features like parallelization, retries, fixtures, snapshots, etc.
• It has integrations with popular tools and frameworks like Jest, Mocha, Cucumber, Selenium Grid, BrowserStack, etc.
• It has a fast and reliable browser launcher that downloads and manages browser binaries for you.

Some of the cons of using Playwright are:

• It is still a relatively new framework that may have some bugs or missing features compared to more mature frameworks like Selenium or Cypress.
• It does not support browsers that are not based on Chromium, Firefox or WebKit, such as Internet Explorer or Opera.
• It may require some extra configuration or code to handle complex scenarios like authentication, proxy, iframe, shadow DOM, etc.

Playwright can fit into a test driven development (TDD) process by providing a fast feedback loop and a high level of confidence for web developers. Playwright Test allows writing concise and expressive tests that can run in parallel across multiple browsers and platforms. Playwright Test also supports code coverage, debugging, reporting and other features that can help developers write quality code and refactor with ease.

How does Playwright compare to Selenium or Cypress?

Playwright is similar to Selenium and Cypress in that they are all frameworks for web testing and automation. However, there are some key differences among them:

• Playwright supports testing Chromium, Firefox and WebKit browsers with the same API, while Selenium supports more browsers but requires different drivers for each one. Cypress only supports Chromium-based browsers.
• Playwright runs tests in parallel by default and can launch multiple browser contexts within the same browser instance. Selenium can also run tests in parallel but requires additional tools like Selenium Grid or TestNG. Cypress runs tests sequentially in a single browser instance.
• Playwright has a native support for TypeScript and can generate code snippets from the browser inspector. Selenium does not have a native support for TypeScript and requires manual coding. Cypress has a partial support for TypeScript and requires configuration.
• Playwright has a low-level API that gives more control over the browser behavior and network requests. Selenium has a high-level API that abstracts away the browser details. Cypress has a hybrid API that combines low-level and high-level commands.

Examples of Playwright Tests

Playwright Test is the test runner that comes with Playwright. It provides a test function to declare tests and an expect function to write assertions. Here are some examples of Playwright Test:

Access on Github: blog/playwrite_sample.js at main · davidinwald/blog (github.com)

// example.spec.ts
import { test, expect } from ‘@playwright/test’;

test(‘has title’, async ({ page }) => {
await page.goto(‘https://playwright.dev/’);
// Expect a title “to contain” a substring.
await expect(page).toHaveTitle(/Playwright/);
});

test(‘get started link’, async ({ page }) => {
await page.goto(‘https://playwright.dev/’);
// Click the get started link.
await page.getByRole(‘link’, { name: ‘Get started’ }).click();
// Expects the URL to contain intro.
await expect(page).toHaveURL(/.*intro/);
});

test(‘basic test’, async ({ page }) => {
await page.goto(‘https://playwright.dev/’);
const name = await page.innerText(‘.navbar__title’);
expect(name).toBe(‘Playwright’);
});

test.describe(‘group of tests’, () => {
// Declare hooks inside the group.
test.beforeEach(async ({ page }) => {
await page.goto(‘https://example.com/’);
});

// Tests inside the group share the same context.
test(‘first test’, async ({ page }) => {
// …
});

test(‘second test’, async ({ page }) => {
// …
});
});