build: switch docs e2e tests away from protractor and run them (#33675)

Reworks the docs tests so they don't use Protractor anymore. Also fixes that they haven't been running on CI for a while.

Author: crisbeto

docs/BUILD.bazel

@@ -3,6 +3,7 @@ load("@bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("@npm//:defs.bzl", "npm_link_all_packages")
 load("@rules_angular//src/architect:ng_config.bzl", "ng_config")
 load("//docs:defs.bzl", "ng_app")
+load("//tools:defaults.bzl", "http_server")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -47,6 +48,17 @@ alias(
     actual = ":build.serve",
 )
 
+http_server(
+    name = "server",
+    testonly = True,
+    additional_root_paths = [
+        "_main/docs/dist/browser",
+    ],
+    deps = [
+        ":build.production",
+    ],
+)
+
 js_library(
     name = "audit_lib",
     srcs = [

docs/README.md

@@ -44,6 +44,10 @@ Run `pnpm bazel build //docs:build.production` to build the project.
 
 1. Run `pnpm bazel test //docs/...` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
+## Running e2e tests
+
+1. Run `pnpm bazel test //docs/e2e:e2e_tests` to execute the e2e tests via Selenium WebDriver.
+
 ## Scenes Development server
 
 1. Run `pnpm bazel run //docs/scenes:build.serve` for a dev server. Navigate to `http://localhost:4200/`.
@@ -55,3 +59,8 @@ Run `pnpm bazel build //docs/scenes:build.production` to build the project.
 ## Running unit tests
 
 1. Run `pnpm bazel test //docs/scenes/...` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running Scenes e2e tests
+
+1. Run `pnpm bazel test //docs/scenes/e2e:e2e_tests` to execute the scenes screenshot e2e tests.
+

docs/angular.json

@@ -173,18 +173,6 @@
               }
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "material-angular-io:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "material-angular-io:serve:production"
-            }
-          }
         }
       }
     },
@@ -274,18 +262,6 @@
               "includePaths": ["node_modules"]
             }
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "scenes/e2e/protractor.conf.js",
-            "devServerTarget": "scenes:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "scenes:serve:production"
-            }
-          }
         }
       }
     }

docs/defs.bzl

@@ -53,23 +53,8 @@ TEST_CONFIG = COMMON_CONFIG + [
     ":ng-test-config",
 ]
 
-# Common dependencies of Angular CLI e2e tests
-E2E_CONFIG = COMMON_CONFIG + [
-    "@rules_browsers//browsers/chromium",
-    "@rules_browsers//browsers/firefox",
-    "//docs:ng-base-test-config",
-    ":ng-e2e-config",
-    "//docs:node_modules/jasmine-spec-reporter",
-]
-E2E_DEPS = [
-    "//docs:node_modules/@types/jasmine",
-    "//docs:node_modules/@types/node",
-    "//docs:node_modules/protractor",
-    "//docs:node_modules/webdriver-manager",
-]
-
 # buildifier: disable=unused-variable
-def ng_app(name, project_name = None, deps = [], test_deps = [], e2e_deps = [], **kwargs):
+def ng_app(name, project_name = None, deps = [], test_deps = [], **kwargs):
     """
     Macro for Angular applications, creating various targets aligning with the Angular CLI.
 
@@ -82,7 +67,6 @@ def ng_app(name, project_name = None, deps = [], test_deps = [], e2e_deps = [],
       project_name: the Angular CLI project name, to the rule name
       deps: dependencies of the library
       test_deps: additional dependencies for tests
-      e2e_deps: additional dependencies for e2e tests
       **kwargs: extra args passed to main Angular CLI rules
     """
     srcs = native.glob(
@@ -95,8 +79,6 @@ def ng_app(name, project_name = None, deps = [], test_deps = [], e2e_deps = [],
 
     test_srcs = native.glob(["src/test.ts", "src/**/*.spec.ts"])
 
-    e2e_srcs = native.glob(["e2e/src/**/*.ts"])
-
     tags = kwargs.pop("tags", [])
 
     # config files
@@ -115,14 +97,6 @@ def ng_app(name, project_name = None, deps = [], test_deps = [], e2e_deps = [],
         ],
         visibility = ["//visibility:private"],
     )
-    copy_to_bin(
-        name = "ng-e2e-config",
-        srcs = [
-            "e2e/tsconfig.json",
-            "e2e/protractor.conf.js",
-        ],
-        visibility = ["//visibility:private"],
-    )
 
     project_name = project_name if project_name else name
 
@@ -154,20 +128,6 @@ def ng_app(name, project_name = None, deps = [], test_deps = [], e2e_deps = [],
         **kwargs
     )
 
-    # FUTURE:
-    # _architect_test(
-    #     project_name,
-    #     "e2e",
-    #     size = "large",
-    #     srcs = srcs + e2e_srcs + deps + e2e_deps + DEPS + E2E_DEPS + E2E_CONFIG,
-    #     args = [
-    #       "--no-webdriver-update",
-    #       "--port=0",
-    #     ],
-    #     tags = tags + ["e2e"],
-    #     **kwargs
-    # )
-
 def _architect_build(project_name, configuration = None, args = [], srcs = [], **kwargs):
     args = []
 

docs/e2e/BUILD.bazel

@@ -0,0 +1,38 @@
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
+load("//src/cdk/testing/tests:webdriver-test.bzl", "webdriver_test")
+load("//tools:defaults.bzl", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    deps = [
+        "//:node_modules/@types/jasmine",
+        "//:node_modules/@types/node",
+        "//:node_modules/@types/selenium-webdriver",
+        "//src:test-tsconfig",
+    ],
+)
+
+ts_project(
+    name = "e2e_test_sources",
+    testonly = True,
+    srcs = glob(["src/**/*.ts"]),
+    tsconfig = ":tsconfig",
+    deps = [
+        "//:node_modules/@bazel/runfiles",
+        "//:node_modules/@types/jasmine",
+        "//:node_modules/@types/node",
+        "//:node_modules/@types/selenium-webdriver",
+        "//:node_modules/selenium-webdriver",
+        "//src/e2e-app:e2e_setup",
+    ],
+)
+
+webdriver_test(
+    name = "e2e_tests",
+    server = "//docs:server",
+    tags = ["e2e"],
+    deps = [":e2e_test_sources"],
+)

docs/e2e/protractor.conf.js

@@ -6,14 +6,26 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import * as webdriver from 'selenium-webdriver';
+import {createE2eWebDriver} from '../../../src/e2e-app/e2e-setup';
 import {MaterialDocsAppPage} from './app.po';
-import {browser, logging} from 'protractor';
+
+const {builder, port} = createE2eWebDriver();
 
 describe('Material Docs App', () => {
+  let wd: webdriver.WebDriver;
   let page: MaterialDocsAppPage;
 
+  beforeAll(async () => {
+    wd = await builder.build();
+  });
+
+  afterAll(async () => {
+    await wd.quit();
+  });
+
   beforeEach(() => {
-    page = new MaterialDocsAppPage();
+    page = new MaterialDocsAppPage(wd, `http://localhost:${port}/`);
   });
 
   it('should display welcome message', async () => {
@@ -22,12 +34,14 @@ describe('Material Docs App', () => {
   });
 
   afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(
-      jasmine.objectContaining({
-        level: logging.Level.SEVERE,
-      } as logging.Entry),
+    // Assert that there are no application errors emitted from the browser
+    const logs = await wd.manage().logs().get(webdriver.logging.Type.BROWSER);
+    const errors = logs.filter(
+      log =>
+        log.level.name === 'SEVERE' &&
+        !log.message.includes('ERR_ACCESS_DENIED') &&
+        !log.message.includes('ERR_INTERNET_DISCONNECTED'),
     );
+    expect(errors).toEqual([]);
   });
 });

docs/e2e/src/app.e2e-spec.ts

@@ -6,16 +6,28 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {browser, by, element} from 'protractor';
+import * as webdriver from 'selenium-webdriver';
 
 export class MaterialDocsAppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
+  constructor(
+    private _wd: webdriver.WebDriver,
+    private _baseUrl: string,
+  ) {}
+
+  async navigateTo() {
+    await this._wd.get(this._baseUrl);
+    await this._wd.wait(
+      webdriver.until.elementLocated(
+        webdriver.By.css('app-homepage header .docs-header-headline .mat-h1'),
+      ),
+      10000,
+    );
   }
 
-  getTitleText() {
-    return element(
-      by.css('app-homepage header .docs-header-headline .mat-h1'),
-    ).getText() as Promise<string>;
+  async getTitleText() {
+    const el = await this._wd.findElement(
+      webdriver.By.css('app-homepage header .docs-header-headline .mat-h1'),
+    );
+    return el.getText();
   }
 }

docs/e2e/src/app.po.ts

@@ -1,9 +1,7 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../../src/bazel-tsconfig-test.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": ["jasmine", "jasminewd2", "node"]
+    "declaration": true,
+    "types": ["jasmine", "selenium-webdriver", "node"]
   }
 }