App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide Playwright Framework Tutorial: Learn Basics and Setup

Playwright Framework Tutorial: Learn Basics and Setup

By Ganesh Hegde, Community Contributor -

Table of Contents

Test automation has become significant in SDLC with the rising adoption of test automation in Agile teams. As the scope increases, new tools for test automation are emerging in the market. Selenium and other proprietary tools were ruling the market; however, new open-source tools are now leading the market. 

Playwright is an addition to the Test Automation Framework and shares a similar syntax to Puppeteer, but it has overcome many limitations present in Puppeteer

What is Playwright?

Playwright is an open-source test automation library initially developed by Microsoft contributors. It supports programming languages such as Java, Python, C#, and NodeJS. Playwright comes with Apache 2.0 License and is most popular with NodeJS with Javascript/Typescript. This Playwright tutorial will help set up with NodeJS using Visual Studio Code.

Why Choose Playwright as an Automation Framework?

Though Playwright is new to the market, we can hardly list the limitations as it supports multiple languages. People who want to migrate from Selenium to Playwright, can do it quickly since Playwright support C#,  Java, and Python. Programming languages are not a barrier. Playwright’s first release was in January 2020, and it has gained a lot of popularity ever since.

  • Playwright leverages the DevTools protocol to write powerful, stable automated tests.
  • Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios.

Growing Popularity of Playwright Framework

Current Trends of Playwright on Github:

  • Active Users: 9,800
  • Forks (copy of a repository that you manage): 1,600
  • Releases: 66 (This shows how active they are fixing and releasing new features)

NPM Trends of Playwright Framework:

  • Weekly Downloads: 576,288
  • Versions: 3009

Advantages of Playwright Framework

Playwright contributors are extremely active in releasing new features every month, which are listed below:

  1. Easy Setup and Configuration: Being a Test Automation Framework, it just needs a configuration as the installation doesn’t take much time. Depending on the language we use with Playwright, the installation steps might change
  2. Multi-Browser Support: Chromium family browsers (Chrome, Edge), Webkit (Safari), and Firefox are all supported.
  3. Multi-Language Support: Playwright supports Java, C#, Python, Javascript/ Typescript making it a popular choice. Most of the modern open-source test automation frameworks miss this feature.
  4. Types of Testing: Playwright supports Functional, End to End, and API Testing. With a Third-party plugin, Playwright can be integrated with Accessibility Testing.
  5. Parallel Browser Testing: Playwright also supports the execution of simultaneous tests (AKA parallel testing) through Browser Context and can run parallel tests with multiple browsers. This scales up testing and comes in handy when multiple web pages have to be tested simultaneously.
  6. Support for Multiple Tab/Browser Window: Playwright supports multi-tab and multi-window. Some test cases need to verify the scenario by launching a new window and returning to the parent window. Playwright supports all different types of test cases.
  7. Built-in Reporters: Playwright framework, by default, comes with a lot of valuable reporters like List, Dot, Line, JSON, JUnit, and HTML Reporters. The exciting part is that with Playwright, one can create custom reporters. Playwright also supports third-party reporter Allure Report.
  8. Typescript Support out of the box: Zero configuration is required for typescript language support as it understands your typescript and javascript code.
  9. CI/CD Integration Support: Playwright supports CI/CD integration. It even provides docker images for some language bindings.
  10. Debugging Tools Support: Playwright provides many different debugging options making it developer-friendly. Some debugging options are Playwright Inspector, VSCode Debugger, Browser Developer Tools, and Trace Viewers Console Logs. 

Other notable features of Playwright include iframe Support, Support for Page object Pattern, Built-in Reporters, page object pattern, Cross-Origin Navigation Support, Selectors Support, Shadow DOM, Automatic Waiting, Third-Party Test Runner Supports, Videos and Screenshot, Browser Emulation, Test Retry, Parameterized Project, etc.

Limitations of Playwright Framework

  1. Playwright is new, and it’s still evolving. Scope for improvement.
  2. No Support for IE11
  3. Playwright doesn’t support Native Mobile Apps
  4. Though Playwright documentation is excellent, we cannot expect much when it comes to community support. Since Playwright is new to the market user base is still growing.

Getting Started with Playwright Setup

In this tutorial, we explain step by step how to set up a playwright with NodeJS in an easy way.

Pre-Requisites: 

  1. Install Visual Studio Code: Download and Install Visual Studio Code(VSCode).
  2. Install NodeJS: Download and Install Node JS

How to Install and run Playwright Test Script

Step 1: Create a fresh new directory (ex: PlaywrightDemo) in VSCode

Step 2: Open Directory in Visual Studio Code. From VS code,

Click on File > Open Folder > Choose newly Created Folder (PlaywrightDemo)

Step 3: From the VS Code, Click on Terminal Menu > Click on New Terminal 

Step 4: Enter the below command to start the Playwright installation

npm init playwright@latest

Note: The above command asks a set of questions. Please provide appropriate inputs. In this tutorial, we are using typescript language.

The above command does the following operation:

  • Creates Package.json
  • Installs npm library 
  • Sets up basic Files and Folders
    • tests folder: This folder contains actual test scripts. By default, an example.spec.ts file will be created inside this folder.
    • .gitignore: This file helps if you are using git repository
    • package.json and package-lock.json: This file helps to track dependencies, create a shortcut for running tests, etc.
    • playwright.config.ts: This is the global configuration file for the Playwright, which you can configure with available options.

Folder structure for Playwright Tutorial

Step 5: Install Browsers

However, Playwright is configured to run on existing browsers, which might create issues while running tests, so it is recommended to use the Playwright browsers. Using the below command, you can install all different browsers in Playwright.

npx playwright install

The above command installs the Playwright version of  Chromium, Firefox, and Webkit browser.

Install Browsers to setup Playwright

Step 6: Create the first Playwright test

Navigate inside the tests folder and create a test spec file ex: demo.spec.ts

Let’s start a test case with the below scenario

Scenario: 

The demo.spec.ts is our Playwright test script as follows 

//demo.spec.ts

import { test, expect, Page } from '@playwright/test';

test.beforeEach(async ({ page }) => {

  await page.goto('https://www.browserstack.com/');

});

test.describe('Demo Test', () => {

    test('Verify Login Error Message', async ({ page }) => {

        await page.waitForSelector('text=Sign in',{state:'visible'});

        await page.locator('text=Sign in').first().click();

        await page.waitForSelector('#user_email_login')

        await page.locator('#user_email_login').type('example1@example.com');

        await page.locator('#user_password').type('examplepassword');

        await page.locator('#user_submit').click();

        const errorMessage = await (await page.locator("//input[@id='user_password']/../div[@class='error-msg']").textContent()).trim();

        console.log("Browserstack Login Error Message: "+errorMessage);

        expect(errorMessage).toBe('Invalid password');

    });

});

Step 7: Execute Playwright Test Script

As discussed above, during installation, Playwright creates playwright.config.ts (playwright.config.ts is the global configuration file) which will have some settings. By default, the global configuration contains the value to run on all the browsers. It runs on all three different browsers when you execute the Playwright test. We don’t need it, so we need to remove that option.

  • Navigate to playwright.config.ts. Comment the option which starts with projects: [

If you are finding to do the above, simply copy and paste the below line of code to playwright.config.ts

//playwright.config.ts

import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {

  testDir: './tests',

  timeout: 30 * 1000,

  expect: {

    timeout: 5000

  },

  reporter: 'html',

  use: {

    actionTimeout: 0,

    trace: 'on-first-retry',

  },

};

export default config;

So, you have configured the playwright.config.ts, we are all set to execute the first Playwright test script.

Execute Playwright Spec using the below command

npx playwright test  demo.spec.ts –headed

Let’s understand the above command:

  • We are specifying which test file we need to run i.e. demo.spec.ts. Do not mention any spec file name if you want to run all the spec files inside the tests folder, do not mention any spec file name.
  • By default, playwright runs in headless mode, so we are specifying the –headed to run on headed mode.
  • We are not mentioning any browser name; by default, the Playwright test runs in the Chromium browser

Once you execute the above command, the Playwright tests start executing in the Chromium browser.

Playwright Framework Tutorial

Step 8: View the report

In our playwright.config.ts, we specify the HTML report, so after executing the Playwright test, the HTML report gets generated automatically in the playwright-report folder.

To view generated HTML report simply type:

npx playwright show-report

View Report in Playwright Framework Example

Run Playwright Tests on BrowserStack

One can run all your playwright-test tests on BrowserStack as well. Follow the steps below to run the sample tests in this repository:

  1. Clone this repository using git clone https://github.com/browserstack/playwright-browserstack.git  
  2. Go inside the directory playwright-test using cd playwright-test
  3. Install the dependencies using npm install
  4. Put in your credentials in the file fixtures.js in the caps part.
  5. If you are trying to run your tests on BrowserStack, you need to ensure that you correctly configured the projects in the playwright.config.js file.
  6. Run the sample test script using the npm test, which runs all the tests inside the tests directory across five browsers in BrowserStack.
  7. If you want to test against localhost or other private websites, run the sample test script using npm run test:local, which runs all the tests inside the tests directory across five browsers in BrowserStack.
  8. If you want to run your tests locally, you just need to configure the projects without the name @browserstack in playwright.config.js file.

For complete details, visit the Github page.

To conclude,

Playwright is a solid test automation framework that allows you to perform end-to-end testing across major browsers. It is equipped with multiple features, such as resiliency, auto-wait, capturing test trace, and so on, that are supported with BrowserStack.

BrowserStack’s real device cloud provides 3000+ real browsers and devices for an instant, on-demand testing. It also provides a cloud Selenium grid for selenium automated testing, which can be accelerated by 10X with parallel testing. The cloud also provides integrations with popular CI/CD tools such as Jira, Jenkins, TeamCity, Travis CI, and much more. Additionally, in-built debugging tools let testers identify and resolve bugs immediately.

Run hundreds of Playwright tests in parallel in minutes. Focus on testing – not test infrastructure – with zero setup and maintenance on BrowserStack.

Try Playwright Tests on BrowserStack for Free

Tags
Automation Testing Cross browser testing DevOps

Featured Articles

Playwright vs Cypress: A Comparison

Playwright vs Selenium: A Comparison

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.