E2E Testing TypeScript: A Complete Developer's Guide

Does your application work? Prove it with E2E tests in TypeScript

Have you ever heard the phrase: "Everything works, we tested it manually"? And then, the very next day, production crashes? Sounds familiar, right? Manual testing is like reading tea leaves. You never know if you'll click that one button that breaks the entire user flow.

E2E (End-to-End) testing in TypeScript is your digital QA engineer that never sleeps, never drinks coffee, and checks every button 24/7. In this article, we won't just tell you what E2E tests are. We'll write them together: from setup to a production CI/CD pipeline. Buckle up, it's going to be intense and useful!

Why TypeScript for E2E tests?

You might think E2E tests can be written in anything: JavaScript, Python, even Java (but let's not talk about that). However, TypeScript gives you a superpower — static typing. You'll no longer catch bugs like Cannot read property 'click' of undefined at runtime. Your IDE will highlight the error before you even run the test.

Plus, if your application is written in TypeScript (and 90% of teams do this today), writing tests in the same language is logical. You use the same types, the same interfaces, the same utilities. This reduces cognitive load and speeds up development.

Choosing a tool: Playwright vs Cypress

The market for E2E tools for TypeScript is small, but there are two clear leaders: Cypress and Playwright. We'll use Playwright. Why?

• Multi-browser out of the box: Chromium, Firefox, WebKit (Safari). Cypress still doesn't work well with Safari.
• Speed: Playwright works through the DevTools protocol, not a proxy server, making tests faster.
• Working with iframes and tabs: Playwright imposes no restrictions on working with multiple tabs or cross-domain iframes.
• TypeScript first: Playwright is written in TypeScript and fully supports it.

But if you're a beginner, Cypress might be easier to start with. The choice is yours. We're going into battle with Playwright.

Project setup and configuration

Let's create a new project and install Playwright. Open your terminal and run:

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

The last command will download browsers (Chromium, Firefox, WebKit). This will take a couple of minutes — go get some coffee.

Create a playwright.config.ts file in the project root:

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

We've configured the base URL (replace with your application's address), enabled tracing for debugging, and specified that tests will be in the tests folder.

Writing your first E2E test in TypeScript

Create a tests folder and a login.spec.ts file. Let's assume we have a simple login form.

import { test, expect } from '@playwright/test';

test.describe('User Authorization', () => {  test('Successful login with valid credentials', async ({ page }) => {    // Step 1: Open the login page    await page.goto('/login');

    // Step 2: Fill in the fields    await page.getByLabel('Email').fill('user@example.com');    await page.getByLabel('Password').fill('securepassword123');

    // Step 3: Click the "Login" button    await page.getByRole('button', { name: 'Login' }).click();

    // Step 4: Wait for redirect to the dashboard    awai