Playwright Test enables you to take out end-to-end testing on applications written in Node.js, Python, Java and .Net. It supports Chromium, WebKit and Firefox.

Getting Started

npm init playwright@latest

or

yarn create playwright

or

npnm dlx create-playwright

Once you’ve run on the above commands, you will be given a range of different options. The default is TypeScript but you can choose JavaScript. You will be asked to name your tests folder and if you would like to add GitHub Actions.

The following is what you should have within your application in terms of files/folder structure:

playwright.config.ts
package.json
package-lock.json
tests
  example.spec.ts
tests-examples
  demo-todo-app.spec.ts

playwright.config is where you can add configurations such as which browsers you would like to run Playwright on.

Writing Tests

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

test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // create a locator
  const getStarted = page.getByRole('link', { name: 'Get started' });

  // Expect an attribute "to be strictly equal" to the value.
  await expect(getStarted).toHaveAttribute('href', '/docs/intro');

  // Click the get started link.
  await getStarted.click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

Add // @ts-check at the start of each test file when using JavaScript in VS Code to get automatic type checking.

Running Tests

All tests: npx playwright test

One test file: npx playwright test landing-page-spec.ts

Debug tests: npx playwright test --debug

Debug one test file: npx playwright test example.spec.ts --debug

Debug from a specific line: npx playwright test example.spec.ts:42 --debug

Show reports: npx playwright show-report

GitHub Actions Integration

Create a repo, click on the actions tab within the repo and navigate to workflows, and create a workflow.

name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30