Playwright TypeScript ESLint Setup: Complete Beginner’s Guide

Leave a Comment / Uncategorized / By

Introduction

A clean and maintainable automation framework is just as important as writing reliable test cases. As Playwright projects grow, inconsistent coding styles, unused variables, and formatting issues can make the framework difficult to maintain. This is where Playwright TypeScript ESLint Setup becomes essential.

ESLint is a static code analysis tool that helps developers and automation engineers identify coding mistakes before tests are executed. When combined with Playwright and TypeScript, ESLint improves code quality, enforces coding standards, and makes collaboration easier across teams.

In this Playwright TypeScript ESLint Tutorial, you’ll learn how to configure ESLint for Playwright TypeScript, integrate it with TypeScript, Prettier, Visual Studio Code, and CI/CD pipelines, and build an enterprise-ready Playwright TypeScript Framework.

What is ESLint and Why Use It with Playwright TypeScript?

ESLint is an open-source tool that analyzes JavaScript and TypeScript code to detect errors, enforce coding standards, and suggest improvements.

When used with Playwright, ESLint helps maintain consistent automation scripts by checking for:

  • Syntax errors
  • Unused variables
  • Incorrect imports
  • Missing semicolons (if required)
  • Code style violations
  • Potential bugs

Instead of discovering these issues during execution, ESLint reports them while writing code.

Benefits of ESLint in Automation Frameworks

Using ESLint for Playwright offers several advantages:

  • Improves code quality
  • Maintains consistent coding style
  • Detects errors early
  • Reduces code review effort
  • Improves readability
  • Makes frameworks easier to maintain
  • Works with IDEs like VS Code
  • Integrates with Git hooks and CI/CD pipelines

For enterprise automation teams, linting is a standard part of the development workflow.

Prerequisites

Before configuring ESLint, ensure the following tools are installed:

  • Node.js
  • npm
  • Playwright
  • TypeScript
  • Visual Studio Code (recommended)

Verify your installation:

node -v

npm -v

npx playwright –version

tsc –version

Installing and Configuring ESLint

Navigate to your Playwright project and install ESLint with the required TypeScript packages.

npm install –save-dev eslint

Install TypeScript support:

npm install –save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Install the Playwright ESLint plugin:

npm install –save-dev eslint-plugin-playwright

What These Packages Do

PackagePurpose
eslintCore linting engine
@typescript-eslint/parserParses TypeScript code
@typescript-eslint/eslint-pluginTypeScript-specific rules
eslint-plugin-playwrightPlaywright-specific linting rules

Creating eslint.config.js or eslint.config.mjs

Modern versions of ESLint use the Flat Config format.

Create an eslint.config.js file in the project root.

import js from “@eslint/js”;

import tseslint from “typescript-eslint”;

import playwright from “eslint-plugin-playwright”;

export default [

  js.configs.recommended,

  …tseslint.configs.recommended,

  {

    files: [“tests/**/*.ts”],

    plugins: {

      playwright

    },

    rules: {

      “playwright/no-focused-test”: “error”,

      “playwright/no-skipped-test”: “warn”,

      “no-unused-vars”: “off”,

      “@typescript-eslint/no-unused-vars”: “warn”

    }

  }

];

Step-by-Step Explanation

Import Recommended Configurations

import js from “@eslint/js”;

Loads JavaScript’s recommended rules.

Import TypeScript Rules

import tseslint from “typescript-eslint”;

Adds linting support for TypeScript syntax.

Import Playwright Plugin

import playwright from “eslint-plugin-playwright”;

Provides rules specifically designed for Playwright test projects.

Configure Rules

“playwright/no-focused-test”: “error”

Prevents accidentally committing test.only().

“playwright/no-skipped-test”: “warn”

Warns when test.skip() is used.

“@typescript-eslint/no-unused-vars”: “warn”

Identifies variables that are declared but never used.

Integrating ESLint with TypeScript and Playwright

A simple Playwright test looks like this:

import { test, expect } from “@playwright/test”;

test(“Login Test”, async ({ page }) => {

  await page.goto(“https://example.com”);

  await expect(page).toHaveTitle(“Example Domain”);

});

How ESLint Helps

If you accidentally write:

const browserName = “Chrome”;

and never use it, ESLint displays a warning for the unused variable. This keeps your Playwright test files clean and readable.

Running ESLint and Fixing Common Issues

Run ESLint across your project:

npx eslint .

Check only TypeScript files:

npx eslint tests/**/*.ts

Automatically fix supported issues:

npx eslint . –fix

Common Problems ESLint Can Detect

  • Unused variables
  • Unreachable code
  • Duplicate imports
  • Missing imports
  • Accidental test.only()
  • Accidental test.skip()
  • Inconsistent formatting (with Prettier integration)

Recommended ESLint Rules for Playwright Projects

RulePurpose
playwright/no-focused-testPrevents committed test.only()
playwright/no-skipped-testDetects skipped tests
@typescript-eslint/no-unused-varsFinds unused variables
eqeqeqEnforces strict equality (===)
no-consolePrevents unnecessary console logs (optional)
curlyRequires braces for control statements
semiEnforces consistent semicolon usage

These rules help maintain a consistent Playwright TypeScript Framework.

Integrating Prettier

Prettier formats your code automatically, while ESLint checks code quality.

Install Prettier:

npm install –save-dev prettier eslint-config-prettier

Create a .prettierrc file:

{

  “singleQuote”: true,

  “semi”: true,

  “printWidth”: 100

}

Benefits

  • Automatic formatting
  • Consistent indentation
  • Cleaner pull requests
  • Better readability

VS Code Integration

Install these VS Code extensions:

  • ESLint
  • Prettier
  • Playwright Test for VS Code

Enable automatic formatting in settings.json:

{

  “editor.formatOnSave”: true,

  “editor.codeActionsOnSave”: {

    “source.fixAll.eslint”: “always”

  }

}

Now, your files are automatically formatted and linted every time you save.

Git Hooks (Husky and lint-staged Overview)

Git hooks help prevent poor-quality code from being committed.

Install Husky:

npm install –save-dev husky lint-staged

Typical workflow:

Developer

     │

     ▼

Git Commit

     │

     ▼

Run ESLint

     │

     ▼

Run Prettier

     │

     ▼

Commit Successful

This ensures only clean code reaches the repository.

CI Pipeline Integration

Run ESLint automatically in a CI pipeline before executing Playwright tests.

Example GitHub Actions step:

– name: Run ESLint

  run: npx eslint .

This prevents linting issues from reaching production branches.

Enterprise Project Structure with ESLint

PlaywrightFramework

│

├── tests

│

├── pages

│

├── fixtures

│

├── utils

│

├── test-data

│

├── playwright.config.ts

│

├── eslint.config.js

│

├── .prettierrc

│

├── package.json

│

└── tsconfig.json

Folder Explanation

File/FolderPurpose
testsTest cases
pagesPage Object Model classes
fixturesShared setup
utilsHelper methods
test-dataJSON or CSV test data
eslint.config.jsESLint configuration
.prettierrcPrettier formatting rules
tsconfig.jsonTypeScript compiler settings

This structure is commonly used in enterprise Playwright projects.

Best Practices

Follow these best practices for Playwright TypeScript ESLint Setup:

  • Use the latest ESLint version.
  • Enable Playwright-specific rules.
  • Combine ESLint with Prettier.
  • Run ESLint before every commit.
  • Use Git hooks to enforce linting.
  • Configure automatic formatting in VS Code.
  • Keep lint rules consistent across teams.
  • Review warnings instead of ignoring them.
  • Run ESLint in CI pipelines.
  • Remove unused code regularly.
  • Avoid disabling rules without justification.
  • Use TypeScript-specific linting rules.

Common Mistakes

Avoid these common issues:

  • Ignoring ESLint warnings.
  • Disabling too many rules.
  • Not using the Playwright ESLint plugin.
  • Forgetting to lint before commits.
  • Mixing formatting and linting configurations incorrectly.
  • Leaving test.only() in committed code.
  • Keeping unused imports and variables.
  • Running different lint configurations across team members.

Real-Time Team Workflow Example

Developer Writes Code

          │

          ▼

Save File

          │

          ▼

VS Code Runs ESLint

          │

          ▼

Prettier Formats Code

          │

          ▼

Git Commit

          │

          ▼

Husky Executes ESLint

          │

          ▼

GitHub CI Runs ESLint

          │

          ▼

Playwright Tests Execute

This workflow helps maintain high code quality across the team.

Playwright TypeScript ESLint Interview Questions

1. What is ESLint?

A static code analysis tool that identifies coding errors and enforces coding standards.

2. Why use ESLint with Playwright?

To improve code quality, consistency, and maintainability.

3. What is eslint-plugin-playwright?

A plugin that provides Playwright-specific linting rules.

4. Why use TypeScript with ESLint?

It enables advanced type checking and detects additional issues during development.

5. What does playwright/no-focused-test do?

It prevents accidentally committing test.only().

6. What is the purpose of playwright/no-skipped-test?

It warns when test.skip() is present.

7. How do you run ESLint?

npx eslint .

8. How do you automatically fix lint issues?

npx eslint . –fix

9. Why integrate Prettier?

To automatically format code while ESLint focuses on code quality.

10. Why run ESLint in CI/CD?

To ensure code quality before merging changes into shared branches.

FAQs

Is ESLint required for Playwright?

No, but it is highly recommended for maintaining clean and consistent automation code.

Can ESLint work with TypeScript?

Yes. It supports TypeScript through the @typescript-eslint packages.

Does Playwright have its own ESLint plugin?

Yes. eslint-plugin-playwright provides rules tailored for Playwright projects.

Should I use Prettier with ESLint?

Yes. Prettier handles formatting, while ESLint focuses on code quality.

Can ESLint run automatically on save?

Yes. With the ESLint extension and VS Code settings, lint fixes can run every time you save.

Can ESLint be integrated into GitHub Actions?

Yes. Add a linting step before executing Playwright tests.

What is Husky used for?

Husky runs scripts, such as ESLint, before Git commits to prevent poor-quality code from being committed.

Is ESLint suitable for enterprise Playwright frameworks?

Yes. Most enterprise Playwright TypeScript projects use ESLint along with Prettier and CI/CD integration.

Leave a Comment

Your email address will not be published. Required fields are marked *