Setting Up Playwright in Your Development Environment

Estimated reading: 2 minutes 80 views

Getting started with Setting Up Playwright in Your Development Environment is surprisingly simple, which is one of the reasons I recommend it to every QA team I consult with.

Prerequisites

Before you install Playwright, make sure you have the following tools:

Open your Terminal and initialize a new project folder:

Bash

mkdir playwright-mqa-web-demo
cd playwright-mqa-web-demo
npm init -y

Installing Playwright

To install Playwright, run:

Bash

npm install -D @playwright/test
npx playwright install

This will:

Install the Playwright test runner
Download the browser binaries for Chromium, Firefox, and WebKit

You can verify your setup by running:

Bash

npx playwright install-deps

Creating the First Test File

You can create your test folder and file either using VS Code or the Terminal:

Option 1: Using VS Code:

If you're in Finder, Right-click on your project directory, select New Folder, and name it tests. Then right-click on the tests folder, choose New File, and name it unlock-account.spec.js.

If you're using VS Code you can click on the New Folder and New File icons to speed up the process.

Option 2: Using Terminal:

Run the following command in your project root:

Bash

mkdir tests && touch tests/unlock-account.spec.js

Add this simple test:

Locked Screen Test

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

test('unlock the lock screen', async ({ page }) => {
  await page.goto('https://jahmalrichard.github.io/mqa-demo-test-app/pages-lock-screen.html');
  // Fill in the password field (the correct password is 'password')
  await page.fill('input[type="password"]', 'password');
  // Click the unlock button
  await page.click('button:has-text("Unlock")');
  // Assert that the locked screen is no longer visible
  await expect(page.locator('text=Locked')).not.toBeVisible();
});

Running Your First Playwright Test

Use the command:

Bash

npx playwright test

You’ll see a terminal output showing the test execution result.

Setting Up the Playwright Config File

Create a playwright.config.js file for better test organization:

JavaScript

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
  },
});

This lets you define defaults like browser, viewport size, and more.

Conclusion

With this guide on Setting Up Playwright in Your Development Environment, you’re now ready to start writing powerful automated tests. In the next guide, Writing Your First Playwright Test, I’ll walk you through creating structured tests and exploring key test-writing patterns.

Setting Up Playwright in Your Development Environment

Prerequisites

Installing Playwright

Creating the First Test File

Running Your First Playwright Test

Setting Up the Playwright Config File

Conclusion

Leave a Comment Cancel reply

CONTENTS