Say Hello to Playwright

Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. It is a Node library to automate chromium, firefox and webkit with a single API. It is developed by Microsoft and is open source.

And guess what? It is developed by the same team that developed Puppeteer. So Playwright offers everything that puppeteer did plus a lot more - it supports all popular browsers, the API is testing friendly, provides lean parallelization with browser context - to mention a few. The team says they have incorporated the lessons learned from Puppeteer, which says a lot about the tool.

---

I have recently published a full course on Playwright:
Web Automation and Testing using Playwright (This is a limited time discount link)

---

Table of Contents

• Why Playwright
• Playwright Installation
• Core Concepts
• Basic Script
• Playwright API
  • Navigation
  • Identifying Web Elements
  • Interacting with Web Elements
• End-to-End Testing with Playwright

---

Why Playwright

Here are some reasons why you should consider Playwright:

• Support for all browsers and both headful and headless modes
• Supports multiple languages- JavaScript, TypeScript, Python, C# and Go
• Fast and reliable execution
• Powerful automation capabilities that support modern web features
• Run multi-page emulation scenarios
• Integrates with your workflow

Back to table of contents

---

Playwright Installation

Playwright has a one-step-setup. The following command will install Playwright in your project:

npm install playwright

Back to table of contents

---

Core Concepts

Browser Type

A browserType needs to be selected. The browserType could be chromiun, firefox or webkit.

const { firefox } = require('playwright');

Browser Instance

Using the browserType's launch method, create a browser instance of that browserType.

const browser = await firefox.launch();

Browser Context

Then start a new browser context. Browser Contexts provide a way to operate multiple independent browser sessions.

const context = await browser.newContext();

Page

Using this context create pages. A page is essentially a tab in the browser or a pop up window. Multiple pages can be created using a single browser context.

const page = await context.newPage();

Page provides methods to interact with the elements on the page.

Finally, close the browser instance.

await browser.close();

Back to table of contents

---

Basic Script

Here is a basic Playwright script that opens a firefox browser, navigates to example.com and then closes the browser instance:

const { firefox } = require('playwright');
(async () => {
   const browser = await firefox.launch();
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto('https://example.com')
   await browser.close();
})() 

Back to table of contents

---

Playwright API

Playwright API provides various methods to perform operations like navigating to a webpage, identifying and interacting with web elements and so on.

Navigation

Here are the most commonly used navigation related methods:

// Navigate to a specific url
await page.goto(url)

// Go back in browser's history
await page.goBack()

// Go forward in browser's history
await page.goForward()

// Reload a page
await page.reload()

Identifying Web Elements

Identifying web elements is critical to any web automation tool. Playwright provides two methods to identify elements.

// Find an element matching the specified selector
await page.$(selector)

// Find all elements matching the specified selector
await page.$$(selector)

The selector could be a CSS selector, XPath selector, HTML attribute or text content. Understanding how to efficiently and uniquely identify your elements in an art that must be mastered to produce reliable scripts. The full course on Playwright will help you become better at it. Again, here is the limited time discount link for the course: Web Automation and Testing using Playwright

Interacting with Web Elements

Here are the methods for the most commonly used interactions with web elements:

// Click on an element
await page.click(selector)

// Input some text
await page.fill(selector, value)

// Check a checkbox
await page.check(selector)

// 'Uncheck a checkbox
await page.uncheck(selector)

// Focus on an element
await page. focus(selector)

Each of these methods have some optional parameters and there are many more methods for interacting with web elements.

Back to table of contents

---

End-to-End Testing with Playwright

You can plug-in popular JavaScript test runners with Playwright. You can use Jest/Jasmine, AVA or Mocha.

Jest-Playwright is especially popular for writing tests.

Here is a sample test:

beforeAll(async () => {
  await page.goto('https://whatismybrowser.com/')
})

test('should display "google" text on page', async () => {
  const browser = await page.$eval('.string-major', (el) => el.innerHTML)
  expect(browser).toContain('Chrome')
})

jest-playwright is a powerful framework to use to write tests.

Back to table of contents

---

Full course on Playwright:
Web Automation and Testing using Playwright (This is a limited time discount link)

---

Comments

[Jesse Cunningham]

Is this similar to SourceLabs? Can this work with Cypress??