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.tw/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 執行驗收測試用例。

列印頁面