Search⌘ K
AI Features
Home
Courses
A Front-End Web Developer’s Guide to Testing

Getting Started with Playwright

Explore how to set up Playwright and write your first automated test for a GitHub login scenario. Understand running tests in parallel across browsers, using assertions, recording test executions, and applying built-in features like auto-waiting and retries to ensure reliable web application testing.

We'll cover the following...

After installing Playwright and its dependencies, we are ready to start writing and running the first test locally in either headed or headless mode. To get right down to the code, simply use the JavaScript test code depicted below that performs a login scenario on the GitHub website.

Note: Please replace your_username and your_password with the actual username and password of your GitHub account to log in successfully.

const { test, expect } = require('@playwright/test');
const os = require('os');
test('basic test', async ({ page }) => {
  try {
    await page.goto('https://github.com/login/');
    const username = process.env.username;
    const password = process.env.password;
    await page.fill('input[name="login"]', username);
    await page.fill('input[name="password"]', password);
    await page.click('input[type="submit"]');

    // Wait for navigation to complete
    await page.waitForNavigation();
    // Add an assertion to ensure that the user is still on the home page after login
    
    await page.waitForTimeout(1000);
  } catch (error) {
    console.error('Error occurred:', error);
  }
});
Playwright test: Automated GitHub login and home page navigation verification in Firefox

This code uses Playwright to automate a basic login test for GitHub, filling in username and password fields and submitting the form, with error handling included.

  • Line 1: We import the test and expect functions from the @playwright/test library. These functions are essential for creating and running tests in Playwright.

  • Line 3: We define the Playwright test named basic test. It uses an asynchronous function with a single argument, { page }, which represents the web page that ...