Playwright Tutorial for Beginners 1 - Getting Started
Tags: testing, playwright, qualityassurance, beginners
Published: 2023-04-16 16:47:30

---
title: Playwright Tutorial for Beginners 1 - Getting Started
published: true
date: 2023-04-16 13:01:00 UTC
tags: testing,playwright,qualityassurance,beginners
canonical_url: https://blog.zt4ff.dev/playwright-tutorial-for-beginners-1-getting-started
series: Testing with Playwright
---

### What is Playwright?

From the [documentations](https://playwright.dev) definition, Playwright is a tool that enables reliable **end-to-end** testing for modern web apps.

### What does end-to-end testing mean?

End-to-end testing is, simply, a technique that aims to verify an entire software from beginning to end to make sure that the **application flow** behaves as expected.

Running end-to-end on a typical to-do list webpage would be testing the **application flow** as a real user would. Which can include:

- adding new todos
- deleting todos
- completing a todo etc.

### Key features of Playwright

- cross-browser support
- cross-platform support (Windows, Linux, macOS, locally or CI etc)
- cross-language support (TypeScript, JavaScript, Java, .NET, Python)
- Auto-waits etc.

In a couple of next tutorials, we will touch these concepts and even practise with occasional demo site testing.

### Prerequisites for this tutorial

- [NodeJS](https://nodejs.org/en/download/) installed
- [npm](https://www.npmjs.com/about) - (installed by default once NodeJS is installed. We can verify by running `npm --version` to check the installed version

### Installing Playwright

Playwright can be run by third parties test runners like Jest. But for the purpose of this tutorial, we will use the test runner provided by Playwright:

```
npm install -D @playwright/test

```

The `-D` flag saves the modules as `devDependencies`.

Then run this command to install supported browsers:

```
npx playwright install

```

### Creating our first test

- We will create a file called `first_test.spec.js` and write the following code into the file.

```
const { test, expect } = require('@playwright/test');

test('visits Google page', async ({ page }) => {
  await page.goto('https://google.com');
  const pageTitle = await page.title();
  expect(pageTitle).toBe('Google');
});

```

- Then run this command to run the test `npx run playwright first_test.spec.js`:

![passed-first-test.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1641901548576/mCD5A9plv.png)

### Basic configuration

We need to create a configuration file to utilize some of the features Playwright has to offer. We will create a `playwright.config.js` in the root directory of our project:

```
// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

module.exports = config;

```

The configuration file allows Playwright to run your test using these devices provided in the configuration file.