Add Type Checking and Linting to your Playwright Project

Add Type Checking and Linting to your Playwright Project

---

---

AI Summary

This video explains that Playwright allows you to write tests in TypeScript but does not perform type checking. The creator shows how TypeScript errors appear only in the editor (e.g., VS Code) but Playwright still runs even broken tests, leading to runtime exceptions instead of compile-time errors. To add full type safety, the video demonstrates installing TypeScript, configuring tsconfig.json, and running the TypeScript compiler with the --noEmit flag to do type checking without compilation. This check is integrated into an npm test script to catch errors early before running Playwright tests.

The video also covers adding TypeScript ESLint to catch common Playwright mistakes such as missing awaits on asynchronous calls, and awaiting synchronous locator calls unnecessarily. The presenter provides commands to set up ESLint with rules like no-floating-promises and await-thenable to enforce proper async handling in Playwright tests.

The video concludes by recommending adding these tools and type checking to complex Playwright projects to save time by failing fast on typos and other issues before running tests in headless browsers. The example code and setup are available via an open-source GitHub repository linked in the description, and the creator mentions using Checkly CLI for monitoring Playwright tests in production environments.