How to Use Playwright to Run Tests

How to Run Tests in Playwright?

Below are the steps to install Playwright, write your first test, and run it across browsers such as Chromium, Firefox, and WebKit.

Install Playwright

1. Install the latest version of Node.js. Once installed, you can confirm your Node.js version by running the following command:

node -v

2. Install Playwright using the below given command, which sets up everything: project files, dependencies, and browsers:

npm init playwright@latest

Once the installation is completed, you’ll see a playwright.config.ts file (or .js if you chose JavaScript), a package.json with dependencies, and a sample test file.

Note: Playwright doesn’t rely on your system’s browsers. Instead, it fetches its versions of Chromium, Firefox, and WebKit (Safari’s engine). These browsers are tied to Playwright’s release.

Write Your First Test

The ltKaneAi.spec file below automates the process of filling out the “Schedule a Demo” form on the TestMu AI KaneAI page.

Test Scenario:

• Visit the KaneAI website.
• Click on the Book a Demo button.
• Fill in personal and contact information.
• Provide a custom message to schedule the demo.

// @ts-check
import { test, expect } from '@playwright/test';
test('Schedule a demo form automation', async ({ page }) => {
   await page.goto('https://www.testmuai.com/kane-ai/');
   await page.locator('section', { hasText: 'KaneAI - GenAI-Native Testing' }).getByRole('button', { name: 'Book a Demo' }).click();


   await page.getByRole('textbox', { name: 'First Name*' }).fill('Peter');
   await page.getByRole('textbox', { name: 'Last Name*' }).fill('Broke');
   await page.getByRole('textbox', { name: 'Work Email*' }).fill('peterbroke@tqa.com');
   await page.getByRole('textbox', { name: 'Phone Number*' }).fill('5676543210');
   await page.getByRole('textbox', { name: 'Your message' }).fill('Looking forward to exploring the capabilities of Kane AI');
});

Run the Test

To run the tests, execute the following command in the terminal:

npx playwright test

Using Playwright to run tests may help test how your website behaves on different browsers, such as Chromium, Firefox, and WebKit. However, there are a couple of challenges with scalability and reliability as your testing needs grow.

To overcome these challenges, opting for cloud-based testing solutions such as TestMu AI is a viable option.

Methods to Run Playwright Tests

Playwright lets you run tests across different browsers with a single test suite. There are five different methods to perform Playwright automation.

Default Browser Configurations

By default, Playwright includes Chromium, Firefox, and WebKit rendering engines, and you can switch between them easily.

You can define multiple projects in your config file to target different browsers:

// playwright.config.js
import { defineConfig, devices } from '@playwright/test';


export default defineConfig({
  projects: [
    {
      name: 'Chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'Firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'WebKit',
      use: { browserName: 'webkit' },
    },
  ],
});

After doing the above configuration, run the command:

Let’s take a test scenario of the ltKaneAi.spec file and run it with default browser configurations using the below command:

npx playwright test --headed tests/ltKaneAi.spec.js

Specific Browser From CLI

You can run tests on a specific browser by passing the project name.

Execute the below command to run the test cases in all three browsers.

npx playwright test --project=Firefox
npx playwright test --project=chromium
npx playwright test --project=WebKit

UI Mode

Playwright UI Mode is a visual, interactive test runner that helps you explore, debug, and execute tests smoothly. You can launch UI mode by running the below command:

npx playwright test --ui

At the top-left corner of the UI Mode window, you’ll see a browser selector dropdown. From here, you can instantly switch between Chromium, Firefox, and WebKit.

Headed Mode

By default, you can perform Playwright browser testing in headless mode (no visible browser UI).

To launch browsers in headed mode, you can modify the playwright.config.js file and set the headless option to false.

use:
{
 headless: false,
},  
projects: [
   {
     name: 'chromium',
     use: { ...devices['Desktop Chrome'] },
   },
    {
     name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
     use: { ...devices['Desktop Safari'] },
    },
 ],

To run the test cases in headed mode, use the following command:

npx playwright test --headed

CI Pipelines

You can also perform Playwright browser testing through CI pipelines. For ready-to-use workflow configurations, test sharding across parallel jobs, and fixes for failures that only surface on the build server, refer to this guide on Playwright CI/CD pipelines.

Here’s an example of using GitHub Actions with Playwright:

jobs:
  test:
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npx playwright test --project=${{ matrix.browser }}

Note: Run Playwright tests across 3000+ real environments. Try TestMu AI Now!