Getting Started with Playwright: A Comprehensive Guide

Are you tired of struggling with flaky, slow, and complex browser automation tools? If you're a developer looking for a robust solution to automate your web testing and interaction needs, Playwright might just be the answer you've been searching for. In this blog post, we'll walk you through the process of getting started with Playwright, from installation to writing your first test script (in TypeScript).

Want to become a super load tester?

Request a Demo

What is Playwright?

Playwright is a modern and versatile browser automation framework created by Microsoft. It enables developers to write automated tests, scrape web data, and interact with web applications using a single API that works seamlessly across multiple browsers, including Chrome, Firefox, and Microsoft Edge.

Playwright's key features include:

1. Cross-Browser Support: Playwright provides consistent and reliable automation across different browsers, ensuring your web applications work well on all major platforms.

2. Speed and Efficiency: Playwright is known for its speed and efficiency, making it a great choice for testing and automating web interactions.

3. Headless and Headful Modes: You can run Playwright scripts in headless mode (without a visible browser UI) for faster execution or in headful mode for debugging and interaction.

4. Support for Multiple Languages: Playwright offers support for popular programming languages such as TypeScript, Python, and Java. This means you can write automation scripts in the language you're most comfortable with (we will focus on writing tests in TypeScript in this blog post).

5. Native Event Emulation: Playwright uses native browser automation APIs to simulate user interactions accurately, resulting in more reliable tests.

6. Powerful DevTools Integration: You can leverage the full power of browser DevTools with Playwright, making it easier to inspect, debug, and diagnose issues in your web applications.

Setting Up Playwright

Now that you understand the benefits of using Playwright, let's get started with the setup.

Prerequisites

Before you dive into Playwright, make sure you have the following prerequisites in place:

1. Node.js: Playwright is built on Node.js, so you'll need to have it installed on your machine. You can download Node.js from the official website (https://nodejs.org/) or use the Node Version Manager installer.

2. Code Editor: You'll need a code editor to write your Playwright scripts. Popular choices include Visual Studio Code, IntelliJ, or any editor of your preference.

3. Basic Understanding of TypeScript (or JavaScript): While Playwright supports multiple programming languages, a basic understanding of TypeScript/JavaScript can be helpful, especially if you're new to browser automation.

Installing Playwright

Once you have Node.js installed, open your terminal or command prompt and run the command npm init playwright@latest to install Playwright:

ubuntu@pop-os:~/Dev/workspaces/playwright-petstore$ npm init playwright@latest
Need to install the following packages:
  create-playwright@1.17.130
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · true
[...]
And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

You are prompted with several questions by the Playwright installer:

• Which programming language to use, select TypeScript here.

• Whether to install Playwright browsers an OS dependencies or not, select true for both.

• You can leave the default values for other prompts.

Playwright along with its dependencies is installed, you end up with the following files and folders:

Writing Your First Playwright Spec

Now that you have Playwright installed, you can start writing your first test. Add a file named petstore.spec.ts in the tests folder:

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

test('has title', async ({ page }) => {
    await page.goto('https://petstore.octoperf.com/');
    await expect(page).toHaveTitle("JPetStore Demo");
    await page.screenshot({ path: 'petstore-home.png' });
});

This simple test named has title goes like this:

1. Navigate to a website (petstore.octoperf.com),
2. Verify that the page title is "JPetStore Demo",
3. Take a screenshot.

Note: You can open the files tests/example.spec.ts and tests-examples/demo-todo-app.spec.ts generated by Playwright installer for useful examples and best practices.

Running Your Test

To run your Playwright script, open your terminal, navigate to the folder where your script is located, and execute the command npx playwright test tests/petstore.spec.ts:

Note: Run the command without parameters (npx playwright test) to execute all tests in the tests folder.

ubuntu@pop-os:~/Dev/workspaces/playwright-petstore$ npx playwright test tests/petstore.spec.ts 

Running 3 tests using 3 workers
  3 passed (3.6s)

To open last HTML report run:

  npx playwright show-report

Congratulations! You have run your first Playwright test!

HTML Test report and screenshot

By taking a look at the project files, you can see that some additions were made:

The screenshot file petstore-home.png is created at the root of the Playwright project. It displays the homepage or the tested website and lets you check if the test went fine (Another option is to use the Playwright Trace Viewer tool):

An HTML report was generated (view it online) in the playwright-report folder:

This report lists all test executions, the duration of each step (click on a row to get the details), and their status.
You can see that our test named has title was executed 3 times: once for each configured browser.

Test configuration

You can edit the default Playwright configuration file playwright.config.ts:

import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  testDir: './tests',
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

• testDir: Where should Playwright look for test .spec.ts files.
• reporter: The report used to generate the HTML report. Several test reporters can be configured at once and you can even write your own.
• projects: A list of execution environments with a name and a device.

Learning Resources

Playwright offers extensive documentation and resources to help you dive deeper into browser automation. Here are some recommended resources:

1. Playwright Documentation: The official Playwright documentation (https://playwright.dev/) provides in-depth information about Playwright's features, APIs, and usage.

2. GitHub Repository: Playwright is open source, so you can also dive into its GitHub repository for the latest updates, issues, and community contributions.

3. Community Forums: The Playwright community forums (https://github.com/microsoft/playwright/issues) and (https://stackoverflow.com/questions/tagged/playwright) are a great place to ask questions and seek help from other users and contributors.

4. Tutorials and Blogs: Many online tutorials and blog posts cover various aspects of Playwright. OctoPerf's blog has a dedicated section to real-browser testing.

Conclusion

Playwright is a versatile and powerful tool for browser automation and testing.

This guide should help you get started with the basics of Playwright, but there's a lot more to explore. For example, you can continue on the subject and check on how to use Playwright test generator tool.

As you become more comfortable with Playwright, you can automate complex tasks, perform end-to-end testing, and improve the efficiency of your web development and testing workflows. Happy automating!

Want to become a super load tester?

Request a Demo