Part 1- Master the Basics of TypeScript for Effective Playwright Automation

TypeScript Environment with Node.js and VSCode

Before starting with Playwright test automation, it is important to understand the language and development environment on which Playwright is built. Playwright tests are written using JavaScript or TypeScript, and both run on top of Node.js.

In this guide, we will not install Playwright yet. The focus here is on setting up a clean TypeScript development environment from scratch and understanding how TypeScript works behind the scenes. This foundational step helps avoid confusion later, especially because Playwright automatically configures TypeScript for you during its setup.

You will learn how to install Node.js and Visual Studio Code (VS Code), understand the role of npm (Node Package Manager), explore a basic project folder structure, and write your first Hello World program in TypeScript. We will also briefly compare TypeScript and JavaScript to explain why TypeScript is the preferred choice for modern Playwright automation projects.

By the end of this post, you will have a fully working environment and be ready to dive into TypeScript fundamentals with confidence, making the transition to Playwright automation smooth and easy to follow.

What is Node.js and Why Playwright Needs It

Node.js is a runtime environment that allows you to run JavaScript code outside of a web browser, directly on your computer. Think of it as the engine that powers your JavaScript automation scripts. Playwright relies on Node.js because it uses JavaScript or TypeScript to control browsers and run tests.

To draw a parallel, Java developers use the Java Virtual Machine (JVM) to run Java programs. Similarly, Playwright users need Node.js to execute their JavaScript or TypeScript code. Without Node.js, you cannot run Playwright scripts.

Installing Node.js

• You can download Node.js from the official website: https://nodejs.org. For Playwright, Node.js version 22 or higher is recommended.

• Select the appropriate installer:

  • Windows (.msi)

  • macOS (.pkg)

  • Linux (package manager)

• Run the installer and keep default settings.

• During installation, Node.js will automatically:

  • Install Node.js runtime

  • Install npm (Node Package Manager)

  • configure PATH environment variable

PATH allows your terminal to recognise commands like node and npm.

• Verify Node.js installation.After installation, open:

  • Command Prompt (Windows)

  • Terminal (Mac/Linux)

  • VS Code Terminal

Run:

node -v
npm -v

• To confirm Node.js is available in PATH, run:

where node

Understanding npm and Its Role

npm is the package manager that comes with Node.js. It helps you install libraries and tools, including Playwright. When you want to add Playwright or other automation libraries to your project, you use npm commands to download and manage them.

Installing Visual Studio Code and Verifying Installation

Visual Studio Code is a popular, free code editor that supports JavaScript and TypeScript development.

• Download VS Code from https://code.visualstudio.com.

• Install it following the instructions for your OS.

• To verify, open a terminal and type:

  
  

code -v

You should see the version number of VS Code.

Creating a Project Workspace and Initializing Node.js Project

Start by creating a folder for your Playwright project. Open your terminal, navigate to this folder, and initialise a Node.js project.

You can run:

npm init

This command walks you through creating a `package.json` file, which stores project metadata and dependencies.

For a quicker setup, use:

npm init -y

This creates a default `package.json` without prompts.

Opening the Project in VS Code

To open your project folder in VS Code, run:

code .

This command launches VS Code with your current folder loaded.

Creating and Running a Hello World Program in JavaScript

Create a file named `hello.js` in your project folder with the following content:

javascript

console.log('Hello, Playwright!');

Run this script using Node.js:

node hello.js

You should see the message printed in the terminal.

Setting Up TypeScript: Installation and Compilation

TypeScript adds static typing to JavaScript, making your code easier to maintain and less error-prone. Playwright supports both JavaScript and TypeScript, but TypeScript is the modern preferred choice.

Steps to set up TypeScript:

• Install TypeScript as a development dependency:

npm install -D typescript

• Generate a TypeScript configuration file:

  
  

npx tsc --init

With the above command, TypeScript generates a default tsconfig.json file.

tsconfig.json is a configuration file for the TypeScript compiler (tsc).

It answers questions like:

• Where are my TypeScript files?

• Where should compiled JavaScript go?

• How strict should type checking be?

• Which JavaScript version should be generated?

  
  

TypeScript looks for tsconfig.json and follows the rules defined inside it.

At first glance, this file may look overwhelming, especially for beginners. That is because the default configuration is designed to support many advanced use cases, not just simple learning projects.

A Minimal tsconfig.json for Beginners

For a simple TypeScript learning project, we will use the following minimal configuration:

target

"target": "ES2020"

Tells TypeScript which JavaScript version to generate.

Why ES2020?

• supported by modern Node.js

• stable and predictable

• good default for learning

module

"module": "CommonJS"

Defines how files are imported and exported.

Why CommonJS?

• default module system for Node.js

• easier for beginners

• avoids ESM/CommonJS confusion

rootDir

"rootDir": "./src"

Tells TypeScript:

“All my TypeScript files live inside the src folder.”

outDir

"outDir": "./dist"

Tells TypeScript:

“Put all compiled JavaScript files inside the dist folder.”

This keeps generated files separate from your source code.

strict

"strict": true

Enables strict type checking.

This helps:

• catch errors early

• avoid runtime failures

• write safer code

Even for beginners, this is highly recommended.

skipLibCheck

"skipLibCheck": true

Tells TypeScript:

“Don’t check third-party libraries for errors.”

Why?

• faster compilation

• fewer confusing warnings

• safer for beginners

sourceMap

"sourceMap": true

Generates source maps that help with debugging later.

Optional, but useful—even in simple projects.

include

"include": ["src"]

Tells TypeScript:

“Only look inside the src folder for .ts files.”

This prevents errors like:

No inputs were found in config file

• Create a folder structure:

• `src` for your TypeScript source files

• `dist` for compiled JavaScript output

• Write a simple TypeScript program in `src/hello.ts`:

  
  

  typescript

console.log('Hello, Playwright with TypeScript!');

• Compile TypeScript to JavaScript:

  
  

npx tsc

you will notice a new file created inside the dist folder:

dist/
  helloworld.js

within this newly created file:

TypeScript adds:

"use strict";

at the top of compiled JavaScript files to enable JavaScript strict mode.

What strict mode does (simple explanation)

• prevents silent errors

• enforces safer JavaScript rules

• avoids accidental bugs caused by loose syntax

• Run the compiled JavaScript:

  
  

node dist/hello.js

Final Project Folder Structure

Your project should look like this:

/your-project

/dist

hello.js

/src

hello.ts

package.json

tsconfig.json

node_modules/

JavaScript vs TypeScript in Playwright Automation

JavaScript is easy to start with and requires no compilation. Beginners often start here to learn the basics quickly. TypeScript adds type safety and better tooling support, which helps catch errors early and improves code quality.

For Playwright automation, TypeScript is recommended for larger or long-term projects because it reduces bugs and improves maintainability. However, starting with JavaScript is fine for learning and small scripts.

Common Troubleshooting Tips

• Node or VS Code not recognized: Ensure Node.js and VS Code are added to your system PATH during installation. Restart your terminal or computer if needed.

• TypeScript compile issues: Check your `tsconfig.json` for correct settings. Make sure your source files are in the `src` folder and output goes to `dist`.

• Missing dist folder: Run `npx tsc` to compile TypeScript files. The `dist` folder is created automatically if configured correctly.

  
  

Next Steps

Now that your TypeScript environment is ready, the next step is to learn the core fundamentals of TypeScript. Before starting Playwright automation, it is important to understand essential concepts such as variables, data types, functions, objects, and basic typing.

In the next post, we will cover these TypeScript fundamentals from scratch, without assuming any JavaScript knowledge. This foundation is critical because TypeScript is the most commonly used and recommended language for modern Playwright automation projects.

By strengthening these prerequisites first, you will be fully prepared to learn Playwright with TypeScript in a clear, structured, and real-world-aligned way.