Hello Playwright (Typescript)

This is an example implementation of automated tests using Playwright with Typescript.

You can also check how this can be done using Playwright with Python (Pytest) here: helloPlaywrightPy.

Features

• Page Object Model
• Fixtures
• Parametrized tests
• Tagged tests
• CI Pipeline (GitHub Actions)
• Reports (Playwright native)

Tech stack

• Playwright
• Typescript
• ESLint

Application under tests

We'll be testing a web application written in React from this repository: GUI Automation Playground (v1.3.0).

Install and run the application according to the instructions on the above page.

Dependencies

• Node.js (I use version 18.12.1)

Set up

Clone the repository and install other dependencies:

git clone https://github.com/rafaljab/hello-playwright-ts.git
cd hello-playwright-ts
npm install

If you want more freedom, you can fork the repository first instead of cloning it directly.

Install Playwright Browsers (if needed):

npx playwright install

Create an .env file in the root directory (hello-playwright-ts). This file is ignored by Git and should contain variables as in sample .env.dist file.

You're all set!

Running tests

Just run the following command:

npx playwright test

The tests will run without launching the browser. If you want to see the progress of the tests, use the headed.

npx playwright test --headed

Showing tests report (after test execution):

npx playwright show-report

Running tests for a given tag:

npx playwright test --grep "@e2e"

You can also exclude tests with a given tag:

npx playwright test --grep-invert "@e2e"

You can freely combine different commands. Playwright CLI is very flexible and allows you to specify which tests to run in different ways. More details in the documentation - Command line.