Playwright Typescript Boilerplate

This project contains Playwright automation tests for the JSONBin.io API. JSONBin.io provides a simple REST interface to store & retrieve JSON data from the cloud, helping developers focus on app development by taking care of their database infrastructure.

API Documentation: https://jsonbin.io/api-reference

Tests architecture

For automation tests architecture we use Page Object Pattern. All necessary files are placed in tests directory, which primarily includes:

• tests directory with test cases,
• constants directory with enums and static values used across tests,
• utils helpful functions and tools to support test execution,
• schemas with objects for asserting response body,

Setup Steps

1. Create your local environment file:

   cp env/.env.example env/.env.local
   cp env/.env.example env/.env.prod

2. Configure your variables in env/.env.local and env/.env.prod:

   BASE_URL=https://api.jsonbin.io
   ACCESS_KEY=....

Environment Selection

• Default: Uses env/.env.prod if no environment is specified

• Custom: Set ENVIRONMENT variable to use specific config:

  # macOS/Linux
  export ENVIRONMENT=local
  
  # Windows PowerShell
  $env:ENVIRONMENT='local'

• Verify you environment variable:

  # macOS/Linux
  echo $ENVIRONMENT
  
  # Windows PowerShell
  echo $env:ENVIRONMENT

Note: Never commit your .env files to version control. Only commit the .env.example template for team collaboration.

Tests

To install Playwright and it's browsers

npm install
npx playwright install

To run all tests

npm run test

To run smoke tests:

npm run test:smoke

Husky, ESLint, and Prettier

We use a mix of Husky, ESLint and Prettier within our repository to help enforce consistent coding practices.

ESLint

# Check for errors
npm run lint

# Fix errors automatically
npm run lint:fix

Prettier

# Check formatting
npm run prettier

# Fix formatting
npm run prettier:fix

Test Reports

The project uses different reporters based on the environment:

• local development : list reporter for console output
• CI/CD: html reporter for detailed HTML reports
• trace collection: Automatically captures traces on test failures for debugging

Generated trace files with all test execution steps can be uploaded to Trave Viewer Page for detailed debugging and analysis of test failures.