Angular E2E Testing Frameworks – Overview & Usage

When you run:

ng e2e

and see:

Cannot find "e2e" target...

it means no E2E framework is configured.
You must add one manually.

The Angular CLI suggests 5 options:

---

1. Playwright

What:
Playwright (by Microsoft) is a modern E2E testing framework for web apps.
It supports Chromium, Firefox, and WebKit, with features like auto-waiting and browser context isolation.

When to use:

• You need cross-browser testing (including Safari via WebKit).
• You want fast, reliable tests with parallel execution.
• You need API testing + browser automation in one tool.

How to install in Angular:

ng add playwright-ng-schematics

This will:

• Add Playwright config files.
• Install @playwright/test & required browsers.
• Add an e2e target to angular.json.

How to run:

ng e2e
# or directly
npx playwright test

---

2. Cypress

What:
Cypress is a popular JavaScript E2E testing tool that runs in the browser and gives real-time feedback via an interactive runner.

When to use:

• You want developer-friendly debugging with a visual test runner.
• You mainly target modern browsers (Chrome, Edge, Firefox; no Safari).
• You want fast test feedback and good DOM snapshot debugging.

How to install in Angular:

ng add @cypress/schematic

This will:

• Add Cypress config and example specs.
• Set up the e2e target to use Cypress.

How to run:

ng e2e
# or
npx cypress open   # interactive mode
npx cypress run    # headless mode

---

3. Nightwatch

What:
Nightwatch is a Node.js-based E2E framework that uses the W3C WebDriver protocol or Chrome DevTools Protocol.

When to use:

• You want classic Selenium/WebDriver style automation.
• You need integration with existing Selenium grids.
• You prefer a simpler setup than raw WebDriver.

How to install in Angular:

ng add @nightwatch/schematics

How to run:

ng e2e

or

npx nightwatch

---

4. WebdriverIO

What:
WebdriverIO is a flexible browser automation framework that supports both WebDriver and DevTools protocols.

When to use:

• You need maximum protocol flexibility.
• You integrate with services like Sauce Labs, BrowserStack.
• You want a single tool for E2E + mobile app automation (Appium).

How to install in Angular:

ng add @wdio/schematics

How to run:

ng e2e

or

npx wdio run wdio.conf.js

---

5. Puppeteer

What:
Puppeteer is a headless Chrome/Chromium automation library by Google.
Unlike Playwright, it supports only Chrome-family browsers (unless extended).

When to use:

• You only need Chrome/Chromium testing.
• You want fast headless execution for CI/CD.
• You need fine-grained browser control for scraping or automation.

How to install in Angular:

ng add @puppeteer/ng-schematics

How to run:

ng e2e

or

npx jest    # if Puppeteer is set with Jest runner

---

Summary Table

Framework	Browser Support	Protocols	Best for
Playwright	Chromium, Firefox, WebKit	DevTools	Cross-browser, modern automation
Cypress	Chromium, Firefox	Custom runner	Developer UX, visual debugging
Nightwatch	All via WebDriver	WebDriver/CDP	Selenium grids, WebDriver users
WebdriverIO	All via WebDriver/CDP	WebDriver/CDP	Advanced automation, integrations
Puppeteer	Chromium only	DevTools	Chrome-focused automation, scraping

---

General Steps to Add Any Framework to Angular

1. Choose your framework.
2. Run the relevant ng add <package> command.
3. Check angular.json — you’ll now have an "e2e" target.
4. Run:

   ng e2e
5. Write your tests inside the generated e2e/ folder.

---