How to add Type checking and ESLint to Playwright project

Improve your test reliability and developer confidence with a type-safe, linted Playwright setup.

If you're migrating legacy Protractor tests to Playwright or building your custom QA framework based on Playwright from the very begging, you're already making a solid move toward a modern and scalable testing stack. But switching tools is just the beginning - making that setup truly bulletproof means embracing two critical practices: Type Checking and Linting.

In this article, we’ll walk you through integrating TypeScript type checks and ESLint into your Playwright project to catch bugs early, prevent regressions, and build robust end-to-end (E2E) test suites. Whether you’re just starting out with Playwright or expanding your test coverage, this setup will enhance your code quality significantly.

📌 At Vayner Systems, we specialize in building custom QA foundations that scale. Contact us for help establishing test automation pipelines that balance speed with precision.

Why Type Checking Matters

Playwright supports TypeScript out of the box, but here’s the catch: it doesn’t enforce type checking when running your tests.

Let’s say you wrote a test with a simple typo:

This test contains an obvious error: toBeVisibles() instead of toBeVisible(). But Playwright will happily run it—only to fail at runtime. TypeScript could've warned you, but Playwright doesn't check types before test execution.

And that’s a problem - especially for growing projects with dozens of files and hundreds of test cases.

Step 1: Add Type Checking to Your Playwright Project

Let’s fix that by installing TypeScript and enforcing checks before running any test.

npm install --save-dev typescript
npx tsc --init

Your tsconfig.json can remain minimal:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "skipLibCheck": true
  }
}

Now run type checks before your tests:

npx tsc --noEmit && npx playwright test

To automate this, update your package.json scripts:

"scripts": {
  "pretest": "tsc --noEmit",
  "test": "playwright test"
}

Now every time you run npm test, TypeScript will run first and block invalid code before it hits the browser.

Step 2: Add ESLint for Catching Playwright-Specific Mistakes

TypeScript helps catch syntax and typing issues, but what about logical Playwright usage errors?

Consider this test contains:

These issues won’t throw compile errors - but can cause test flakiness or random failures.

Let’s fix that by adding typescript-eslint.

npm install --save-dev eslint @eslint/js @types/eslint__js typescript-eslint

Create an eslint.config.mjs in the root of your project:

// @ts-check
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: ".",
      },
    },
    rules: {
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/await-thenable": "error"
    }
  }
);

Now lint your test code:

npx eslint tests/**

Sample:

/tests/api/smoke.spec.ts
  231:9  error  Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator  @typescript-eslint/no-floating-promises

✖ 1 problem (1 error, 0 warnings)

Step 3: Combine Both in Your Test Workflow

Update your package.json once again to run linting and type checks before executing Playwright tests:

"scripts": {
  "pretest": "tsc --noEmit && eslint tests/**",
  "test": "playwright test"
}

You’ve now built a safety net for your test suite. Any forgotten await, misused locators, or type mismatches will be caught before your CI/CD pipeline even starts a browser session:

Why This Matters in Real Projects

These practices save you time, prevent flaky test runs, and allow teams to scale with confidence.

They’re especially valuable during a migration from Protractor to Playwright, when converting legacy test logic may introduce subtle errors. A robust setup with Type Checking and Linting helps detect them early - before they become costly.

✅ At Vayner Systems, we help teams like yours migrate to Playwright and implement resilient test foundations. Our custom software and QA solutions are tailored to your business goals.

Conclusion

Integrating Type Checking and ESLint into your Playwright project dramatically improves test stability, code readability, and developer productivity. It’s a one-time investment that keeps paying off with each test run.

Need help setting it up or migrating from stale QA frameworks like Protractor or Selenium? Contact Vayner Systems for expert support in custom software development, building scalable QA solutions, and modernizing your test automation infrastructure.