Applitools Example: Playwright in TypeScript (with fixtures - the best practice)

This is the example project for the Playwright TypeScript tutorial. It shows how to start automating visual tests with Applitools Eyes and Playwright in TypeScript.

It uses:

• TypeScript as the programming language
• Playwright for browser automation
• Playwright Test as the core test framework
• Chromium as the local browser for testing
• npm for dependency management
• Applitools Eyes for visual testing

It can also run tests with:

• Applitools Ultrafast Grid for cross-browser execution

To run this example project, you'll need:

1. An Applitools account, which you can register for free
2. A recent version of Node.js
3. A good TypeScript editor like Visual Studio Code

Installation

Install dependencies and set up Playwright:

npm install
npx playwright install

Environment Variables

Set the APPLITOOLS_API_KEY environment variable to your account's API key. You can do this by creating a .env file in the project root:

APPLITOOLS_API_KEY=your_api_key_here

If you are using a dedicated Applitools cloud, you can also set:

APPLITOOLS_SERVER_URL=https://your-server-url.applitools.com

Running Tests

To run all tests:

npx playwright test

To run Playwright in UI mode:

npx playwright test --ui

Main Test Case

The main test case spec is example.spec.ts. By default, the project will run tests using Applitools Eyes.

Test reports are generated in the playwright-report/ directory.

More Information

For full instructions on running this project, see the Playwright TypeScript tutorial!