Angular CLI - ng e2e Command | Adglob Infosystem Pvt Ltd

In this Angular CLI ng e2e Command chapter explains the syntax, argument, and options of ng e2e command along with an example. Here, e2e refers to end to end. So all the details of angular CLI ng e2e Command listed below-

Syntax

The syntax for ng e2e command is as follows −

ng e2e <project> [options]
ng e <project> [options]

ng e2e builds, serves an application, and then runs the end-to-end test cases using a protractor. Options are optional parameters.

Arguments

The argument for ng e2e command is as follows −

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

Options

Options are optional parameters.

Sr.No.	Option & Syntax	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” flagAliases: -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 the web driver. Default: true

First, move to an angular project updated using ng build command. which is available at https://adglob.in/blog/angular-cli-ng-build-command/.

Now run the e2e command.

Example

An example for ng e2e command is given below −

\>Node\>Adglob> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:20:15.029Z - Hash: 16f321e3d4599af26622 - Time: 20899ms
** Angular Live Development Server is listening on localhost:4200, open your bro
wser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
    x should display welcome message
      - Failed: No element found using locator: By(css selector, app-root .content span)
   ...
      From: Task: Run it("should display welcome message") in control flow
   ...
**************************************************
*                    Failures                    *
**************************************************

1) workspace-project App should display welcome message
  - Failed: No element found using locator: By(css selector, app-root .content span)

Executed 1 of 1 spec (1 FAILED) in 2 secs.

Now to fix failures update the app.component.html

app.component.html

<div class="content" role="main">
   <span>{{ title }} app is running!</span>
</div>
<app-goals></app-goals>
<router-outlet></router-outlet>

Now run the e2e command.

Example

An example for ng e2e command is given below −

\>Node\>Adglob> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:28:33.514Z - Hash: 5d8bf2fc7ff59fa390b0 - Time: 10529ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
      √ should display welcome message

Executed 1 of 1 spec SUCCESS in 2 secs.

ng e2e also opens the browser and uses it to run acceptance test cases using UI.

Next Topic : Click Here