Angular CLI - ng e2e Command

Quiz

This chapter will discuss the Angular CLI ng e2e command, including its syntax, arguments, options, and an example. This example will help you understand how to use this command in a real-time project or application.

The 'ng e2e' Command

The Angular CLI (Command Line Interface) provides a command named ng e2e. This command is used to run end-to-end (E2E) tests for Angular applications.

It stands for "end-to-end" testing, which involves testing the complete flow of an application, from the user perspective, to ensure that all functions (or parts) of the application work together as expected.

Syntax

Following is the syntax of the Angular CLI ng e2e command −

ng e2e ng [project] [options]

Here,

e2e:This command builds, serves an application and then runs the end-to-end test cases using protractor.
project: This is the optional name of the Angular project for which you want to run the end-to-end tests. If you have multiple projects in your workspace, you can specify which one to test.
options: These are optional parameters, you can use them to customize the behavior of the command.

Arguments

The argument for ng e2e command is as follows −

Sr.No.	Argument & Description
1	The name of the project to test.

Options

Options are optional parameters. A few commonly used options are listed below:

Sr.No.	Option & Description
1	--baseUrl=baseUrl Base URL for protractor to connect to.
2	--configuration=configuration A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag Aliases: -c
3	--devServerTarget=devServerTarget Dev server target to run tests against.
4	--grep=grep Execute specs whose names match the pattern, which is internally compiled to a RegExp.
5	--help=true\|false\|json\|JSON Shows a help message for this command in the console. Default: false
6	--host=host Host to listen on.
7	--invertGrep=true\|false Invert the selection specified by the 'grep' option. Default: false
8	--port The port to use to serve the application.
9	--prod=true\|false Shorthand for "--configuration=production". When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
10	--protractorConfig=protractorConfig The name of the Protractor configuration file.
11	--specs Override specs in the protractor config.
12	--suite=suite Override suite in the protractor config.
13	--webdriverUpdate=true\|false Try to update webdriver. Default: true

Example

Following is an example of the Angular CLI ng e2e command. Follow the steps below to use this command in your project −

Step 1: Navigate to your project directory and run the following command:

ng e2e

Note: If you are running this command for the very first time in your project, it may prompt you to "add the relevant package" as shown below:

Cannot find "e2e" target for the specified project.
You can add a package that implements these capabilities.

For example:
  Playwright: ng add playwright-ng-schematics
  Cypress: ng add @cypress/schematic
  Nightwatch: ng add @nightwatch/schematics
  WebdriverIO: ng add @wdio/schematics
  Puppeteer: ng add @puppeteer/ng-schematics

Would you like to add a package with "e2e" capabilities now? (Use arrow keys)
â¯ No
  Playwright
  Cypress
  Nightwatch
  WebdriverIO
  Puppeteer

Step 2: Use the "down arrow key" to select any package according to your requirement, and press enter.

Step 3: Once you "select" and "press" Enter, a default confirmation code will be displayed as follows:

Would you like to add a package with "e2e" capabilities now? Cypress
âœ” Determining Package Manager
  â€º Using package manager: npm
âœ” Searching for compatible package version
  â€º Found compatible package version: @cypress/[email protected].
âœ” Loading package information from registry
â  Confirming installation

The package @cypress/[email protected] will be installed and executed.
Would you like to proceed? (Y/n)

Step 4: Again, enter "y" and press Enter to proceed with the installation. It might ask a few more questions; choose the default "y" option.

Step 5: Once the installation is complete, run the ng e2e command again:

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
11:45:52 am [vite] (client) Re-optimizing dependencies because lockfile has changed
11:45:52 am [vite] (ssr) Re-optimizing dependencies because lockfile has changed (x2)
  âžœ  Local:   http://localhost:4200/
  âžœ  press h + enter to show help
It looks like this is your first time using Cypress: 14.2.0

âœ”  Verified Cypress! C:\Users\Tutorialspoint\AppData\Local\Cypress\Cache\14.2.0\Cypress

Opening Cypress...

It will ask for permission to open your default browser (e.g., Chrome) for testing. Click "Allow" to proceed with testing your application.

Once you "allow" and "select" the browser where you want to test your project, it will open the following testing page in your selected browser:

As you can see in the above image, your application is being tested using the Cypress package, which is an end-to-end testing framework designed to make testing easier.

Print Page