Angular CLI - ng e2e 命令

本章解释了 ng e2e 命令的语法、参数和选项，并附带示例。此处，e2e 指的是端到端。

语法

ng e2e 命令的语法如下：

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

ng e2e 构建并提供应用程序服务，然后使用 Protractor 运行端到端测试用例。选项是可选参数。

参数

ng e2e 命令的参数如下：

序号	参数 & 语法	描述
1	<project>	要测试的项目的名称。

选项

选项是可选参数。

序号	选项 & 语法	描述
1	--baseUrl=baseUrl	Protractor 连接到的基本 URL。
2	--configuration=configuration	一个命名的构建目标，如 angular.json 的“configurations”部分中所指定。每个命名目标都伴随该目标的选项默认值配置。显式设置此项将覆盖“--prod”标志别名：-c
3	--devServerTarget=devServerTarget	要针对其运行测试的开发服务器目标。
4	--grep=grep	执行名称与模式匹配的规范，该模式在内部编译为 RegExp。
5	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：false
6	--host=host	要监听的主机。
7	--invertGrep=true\|false	反转“grep”选项指定的选项。默认值：false
8	--port	用于提供应用程序的服务端口。
9	--prod=true\|false	“--configuration=production”的简写。当为 true 时，将构建配置设置为生产目标。默认情况下，生产目标在工作区配置中设置，以便所有构建都使用捆绑、有限的 tree-shaking 以及有限的死代码消除。
10	--protractorConfig=protractorConfig	Protractor 配置文件的名称。
11	--specs	覆盖 protractor 配置中的规范。
12	--suite=suite	覆盖 protractor 配置中的套件。
13	--webdriverUpdate=true\|false	尝试更新 webdriver。默认值：true

首先移动到使用 **ng build** 命令更新的 Angular 项目。该命令可在 https://tutorialspoint.com/angular_cli/angular_cli_ng_build.htm 找到。

现在运行 e2e 命令。

示例

下面给出了 ng e2e 命令的示例：

\>Node\>TutorialsPoint> 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 https://: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.

现在要修复错误，请更新 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>

现在运行 e2e 命令。

示例

下面给出了 ng e2e 命令的示例：

\>Node\>TutorialsPoint> 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 https://:4200/ **
: Compiled successfully.
...
   workspace-project App
      √ should display welcome message

Executed 1 of 1 spec SUCCESS in 2 secs.

ng e2e 还会打开浏览器并使用它通过 UI 运行验收测试用例。

打印页面