How to Use Protractor to Test Angular Apps

Protractor tests Angular apps by driving a browser and using Angular’s Testability APIs to wait for the app to become stable. Existing NgModule-bootstrapped apps include Testability by default; standalone apps bootstrapped with bootstrapApplication need provideProtractorTestingSupport() when a Protractor suite relies on Angular-aware synchronization.

Protractor is a legacy choice for maintaining an existing suite. Angular’s current E2E documentation presents Cypress, Nightwatch, WebdriverIO, Playwright, and Puppeteer integrations for new setups. The Angular CLI’s current default unit-test runner is Vitest; unit testing and E2E browser automation are separate workflows.

How Protractor and Angular work together

Protractor automates a browser, while Angular’s Testability API exposes hooks that let testing tools observe application stability. Angular documents a whenStable callback that runs when Angular is stable or when the supplied timeout expires. This supports Angular-aware waits, but it does not guarantee that every asynchronous activity in an application is tracked.

For an NgModule-based app bootstrapped through @NgModule.bootstrap, Angular instantiates Testability by default. Protractor can use those hooks without adding a Testability provider solely for the suite.

Keep an existing Protractor suite working

Check the project’s actual versions. Review its Angular dependencies, Protractor dependency, browser and driver setup, and E2E target. Legacy projects may have version-specific constraints, so do not copy configuration from an unrelated project.
Confirm how the app bootstraps. NgModule bootstrap includes Testability by default. Standalone bootstrap needs the provider shown below if the suite uses Protractor’s Angular synchronization.
Start the app through the project’s existing serving setup. Confirm the configured base URL points to the running app, and that the browser and driver versions match the project’s configuration.
Run the E2E command configured by the repository. Inspect its package scripts and CLI target first. Angular’s current ng e2e command invokes the configured E2E target; current Angular documentation does not prescribe a Protractor installation recipe or say that new projects scaffold it by default.
Debug synchronization before adding sleeps. Verify Testability is present and determine whether the activity the test awaits is tracked by Angular. Use explicit waits for work outside Angular’s tracked tasks when appropriate.

There is no universal current Protractor setup command to give here: the relevant install and runner configuration depend on the legacy project’s versions and existing tooling. Preserve and verify that project configuration rather than treating Protractor as Angular’s current default.

Enable Protractor support in a standalone Angular app

Angular’s bootstrapApplication API does not include Testability by default. Add Angular’s Protractor testing support provider to the bootstrap providers when an existing Protractor suite needs the Testability APIs:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideProtractorTestingSupport } from '@angular/platform-browser';
import { RootComponent } from './app/root.component';

await bootstrapApplication(RootComponent, {
  providers: [provideProtractorTestingSupport()],
});

The helper is specifically for making the application available to Protractor testing. Keep it where the app’s bootstrap configuration is defined, and check the Angular package/API version used by the project before applying the snippet.

Why is Protractor waiting for Angular?

Angular-aware waiting depends on the app exposing Testability and on the relevant work being visible to Angular’s task tracking. If a test appears stuck or proceeds too early, check these causes:

Standalone app without the provider: add provideProtractorTestingSupport() to the providers passed to bootstrapApplication.
Async work outside Angular tracking: inspect how that task is started and tracked, then wait explicitly for the observable result or condition in the test.
App never reaches stability: look for recurring timers, polling, or other long-running work that keeps Angular busy. Scope the test around a meaningful condition instead of waiting indefinitely for global stability.
Wrong app or base URL: verify the served app is the one under test and that the runner targets the correct URL.
Version or driver mismatch: compare the project’s pinned Angular, Protractor, browser, and driver versions; restore a compatible set according to the project’s own maintenance documentation.

Avoid using arbitrary sleeps as the first fix. They can hide a synchronization problem and make a suite slower without proving the app reached the required state.

Choosing an E2E setup for a new Angular project

Angular’s roadmap says its E2E direction moved away from Protractor in v12 toward alternatives. The current Angular CLI E2E guide documents integrations for Cypress, Nightwatch, WebdriverIO, Playwright, and Puppeteer. It does not name a universal winner.

Compare candidates against your project’s browser-engine requirements, existing test language and runner, CI setup, debugging and trace needs, Angular synchronization requirements, migration cost, and team familiarity. Those are practical evaluation criteria, not an official Angular ranking. Angular’s testing overview describes Vitest for unit tests; that does not make Vitest an E2E replacement recipe.

For a fresh setup, start with the Angular CLI E2E setup guide. For unit testing context, see the Angular testing overview. For the underlying hooks, consult Angular’s Testability API and provideProtractorTestingSupport API.

Or skip the browser setup

If what you need is a screenshot of an Angular app for a visual check, documentation page, or workflow, ScreenshotNeo returns an image or PDF from one GET request. It is a screenshot API, not a replacement for browser-interaction E2E assertions.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

FAQ

Does Protractor work with every Angular app automatically?

No. NgModule bootstrap includes Testability by default, but standalone bootstrap does not. A standalone app needs Angular’s Protractor support provider for Testability-based synchronization.

Is Protractor the default for new Angular E2E tests?

No. Angular’s current CLI E2E guide documents other integrations. Protractor guidance is most relevant when maintaining an existing suite.

Does Angular stability mean all network or background work is finished?

Not necessarily. The documented callback reflects Angular stability or timeout; app-specific work may need explicit tracking or a test wait for the result that matters.