Let's start by setting up Playwright in our project. We'll be setting up Playwright in an independent directory which will have its own package.json file so that the changes in the project do not affect the Playwright tests and vice-versa. So let's start by creating a new directory for the Playwright tests.
Let's initialize playwright here.
As we're using typescript for writing Playwright tests, choose the following configuration in the initializer questionnaire.
We can see that a few files have been generated for us.
Let's check them out by executing command tree and let's ignore node_modules for now.
Now Playwright has been initialized in our project. We'll see what the entries in the config files mean in the next chapter.
We can see that Playwright has added a few sample specs in the initialized project. We can run them by executing the following command.
We can commit these changes now.
Now let's see how we can configure Playwright according to our needs.
Adding tsconfig.json to our project
A tsconfig.json is the root of a TypeScript project. It specifies the compiler options required to compile the project. Learn more about it here:
We can generate a tsconfig.json by running tsc --init, which will create the file with a bunch of default compilerOptions. If we get an Unknown command: tsc error, we need to install TypeScript first and then run tsc --init again. We can verify the installed TypeScript version by running the following.
At BigBinary, we follow a specific tsconfig.json template for Playwright projects. We can get it by running the following command.
The file looks like this:
Let's go through the compiler options briefly.
esModuleInterop - Allows default imports from CommonJS modules that don't have a default export.
resolveJsonModule - Allows importing .json files directly in TypeScript files, which is useful for reading config or data files.
target - Sets the JavaScript version the TypeScript compiler outputs. es2019 is a safe choice that's supported across modern Node.js versions.
module - Sets the module system for the program. Node16 enables proper interoperability between CommonJS and ES modules, which is the native module resolution behavior in Node.js v16 and later.
moduleResolution - Specifies how TypeScript resolves module imports.
lib - Specifies the built-in type definitions to include. ES2021 brings in modern JS APIs and dom adds browser globals like document and window.
baseUrl - Sets the base directory for resolving non-relative imports. Setting it to ./e2e means all path aliases defined in paths are resolved relative to the e2e folder.
noEmit - Tells TypeScript not to output any compiled .js files. Since Playwright handles execution directly, we only need TypeScript for type checking.
skipLibCheck - Skips type checking of all declaration files (.d.ts).
paths - Defines import aliases to keep imports clean and avoid long relative paths like ../../utils. For example, @utils/* resolves to the utils/ folder inside e2e/.
We can commit these changes now.