feat(cdk/testing): create a webdriver harness environment

package.json

@@ -155,6 +155,7 @@
     "@types/node-fetch": "^2.5.5",
     "@types/parse5": "^6.0.0",
     "@types/sass": "^1.16.0",
+    "@types/selenium-webdriver": "^3.0.17",
     "@types/semver": "^7.3.4",
     "@types/send": "^0.14.5",
     "@types/stylelint": "^9.10.1",

rollup-globals.bzl

@@ -76,6 +76,7 @@ ROLLUP_GLOBALS = {
     "protractor": "protractor",
     "rxjs": "rxjs",
     "rxjs/operators": "rxjs.operators",
+    "selenium-webdriver": "selenium-webdriver",
 }
 
 # Converts a string from dash-case to lower camel case.

src/cdk/config.bzl

@@ -21,6 +21,7 @@ CDK_ENTRYPOINTS = [
     "testing",
     "testing/protractor",
     "testing/testbed",
+    "testing/webdriver",
 ]
 
 # List of all entry-point targets of the Angular Material package.

src/cdk/testing/BUILD.bazel

@@ -1,5 +1,6 @@
 load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
 load("//tools:defaults.bzl", "markdown_to_html", "ng_web_test_suite", "ts_library")
+load("//src/cdk/testing/tests:webdriver-test.bzl", "webdriver_test")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -41,8 +42,15 @@ ng_web_test_suite(
 )
 
 e2e_test_suite(
-    name = "e2e_tests",
+    name = "protractor_e2e_tests",
     deps = [
         "//src/cdk/testing/tests:e2e_test_sources",
     ],
 )
+
+webdriver_test(
+    name = "webdriver_e2e_tests",
+    deps = [
+        "//src/cdk/testing/tests:webdriver_test_sources",
+    ],
+)

src/cdk/testing/tests/BUILD.bazel

@@ -9,7 +9,6 @@ ng_module(
         ["**/*.ts"],
         exclude = [
             "**/*.spec.ts",
-            "**/*.spec.d.ts",
             "harnesses/**",
         ],
     ),
@@ -43,7 +42,6 @@ ng_test_library(
     srcs = glob(
         [
             "**/*.spec.ts",
-            "**/*.spec.d.ts",
         ],
         exclude = [
             "cross-environment.spec.ts",
@@ -65,10 +63,12 @@ ng_test_library(
 
 ng_e2e_test_library(
     name = "e2e_test_sources",
-    srcs = glob([
-        "**/*.e2e.spec.ts",
-        "**/*.spec.d.ts",
-    ]),
+    srcs = glob(
+        [
+            "**/*.e2e.spec.ts",
+        ],
+        exclude = ["webdriver.e2e.spec.ts"],
+    ),
     deps = [
         ":cross_environment_specs",
         ":test_harnesses",
@@ -77,3 +77,18 @@ ng_e2e_test_library(
         "//src/cdk/testing/protractor",
     ],
 )
+
+ts_library(
+    name = "webdriver_test_sources",
+    testonly = True,
+    srcs = ["webdriver.e2e.spec.ts"],
+    deps = [
+        ":cross_environment_specs",
+        ":test_harnesses",
+        "//src/cdk/testing",
+        "//src/cdk/testing/webdriver",
+        "@npm//@types/jasmine",
+        "@npm//@types/node",
+        "@npm//@types/selenium-webdriver",
+    ],
+)

src/cdk/testing/tests/protractor.e2e.spec.ts

@@ -7,10 +7,8 @@ import {MainComponentHarness} from './harnesses/main-component-harness';
 
 // Kagekiri is available globally in the browser. We declare it here so we can use it in the
 // browser-side script passed to `by.js`.
-// TODO(mmalerba): Replace with type-only import once TS 3.8 is available, see:
-//  https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#type-only-imports-exports
 declare const kagekiri: {
-  querySelectorAll: (selector: string, root: Element) => NodeListOf<Element>;
+  querySelectorAll: (selector: string, root: Element) => NodeListOf<Element>
 };
 
 const piercingQueryFn = (selector: string, root: ElementFinder) => protractorElement.all(by.js(

src/cdk/testing/tests/webdriver-test.bzl

@@ -0,0 +1,34 @@
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("@io_bazel_rules_webtesting//web:web.bzl", "web_test")
+load("//tools/server-test:index.bzl", "server_test")
+
+def webdriver_test(name, data = [], tags = [], **kwargs):
+    jasmine_node_test(
+        name = "%s_jasmine_test" % name,
+        data = data + [
+            "@npm//@bazel/typescript",
+        ],
+        tags = tags + ["manual"],
+        **kwargs
+    )
+
+    web_test(
+        name = "%s_chromium_web_test" % name,
+        browser = "@npm//@angular/dev-infra-private/browsers/chromium:chromium",
+        tags = tags + ["manual"],
+        test = ":%s_jasmine_test" % name,
+    )
+
+    server_test(
+        name = "%s_chromium" % name,
+        server = "//src/e2e-app:devserver",
+        test = ":%s_chromium_web_test" % name,
+        tags = tags + ["e2e"],
+    )
+
+    native.test_suite(
+        name = name,
+        tests = [
+            ":%s_chromium" % name,
+        ],
+    )

src/cdk/testing/tests/webdriver.e2e.spec.ts

@@ -0,0 +1,136 @@
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {waitForAngularReady, WebDriverHarnessEnvironment} from '@angular/cdk/testing/webdriver';
+import * as webdriver from 'selenium-webdriver';
+import {crossEnvironmentSpecs} from './cross-environment.spec';
+import {MainComponentHarness} from './harnesses/main-component-harness';
+
+// Tests are flaky on CI unless we increase the timeout.
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10_000;  // 10 seconds
+
+/**
+ * Metadata file generated by `rules_webtesting` for browser tests.
+ * The metadata provides configuration for launching the browser and
+ * necessary capabilities. See source for details:
+ * https://github.com/bazelbuild/rules_webtesting/blob/06023bb3/web/internal/metadata.bzl#L69-L82
+ */
+interface WebTestMetadata {
+  capabilities: webdriver.Capabilities;
+}
+
+if (process.env['WEB_TEST_METADATA'] === undefined) {
+  console.error(`Test running outside of a "web_test" target. No browser found.`);
+  process.exit(1);
+}
+
+const runfiles = require(process.env['BAZEL_NODE_RUNFILES_HELPER']!);
+const webTestMetadata: WebTestMetadata =
+    require(runfiles.resolve(process.env['WEB_TEST_METADATA']));
+const port = process.env['TEST_SERVER_PORT'];
+
+// Kagekiri is available globally in the browser. We declare it here so we can use it in the
+// browser-side script passed to `By.js`.
+declare const kagekiri: {
+  querySelectorAll: (selector: string, root: Element) => NodeListOf<Element>
+};
+
+describe('WebDriverHarnessEnvironment', () => {
+  let wd: webdriver.WebDriver;
+
+  async function getUrl(path: string) {
+    await wd.get(`http://localhost:${port}${path}`);
+    await waitForAngularReady(wd);
+  }
+
+  async function piercingQueryFn(selector: string, root: () => webdriver.WebElement) {
+    return wd.findElements(webdriver.By.js(
+        (s: string, r: Element) => kagekiri.querySelectorAll(s, r), selector, root()));
+  }
+
+  async function activeElement() {
+    return wd.switchTo().activeElement();
+  }
+
+  beforeAll(async () => {
+    wd = await new webdriver.Builder()
+      .usingServer(process.env.WEB_TEST_WEBDRIVER_SERVER!)
+      .withCapabilities(webTestMetadata.capabilities)
+      .build();
+  });
+
+  afterAll(async () => {
+    await wd.quit();
+  });
+
+  beforeEach(async () => {
+    await getUrl('/component-harness');
+  });
+
+  describe('environment specific', () => {
+    describe('HarnessLoader', () => {
+      let loader: HarnessLoader;
+
+      beforeEach(() => {
+        loader = WebDriverHarnessEnvironment.loader(wd);
+      });
+
+      it('should create HarnessLoader from WebDriverHarnessEnvironment', () => {
+        expect(loader).not.toBeNull();
+      });
+    });
+
+    describe('ComponentHarness', () => {
+      let harness: MainComponentHarness;
+
+      beforeEach(async () => {
+        harness = await WebDriverHarnessEnvironment.loader(wd).getHarness(MainComponentHarness);
+      });
+
+      it('can get elements outside of host', async () => {
+        const globalEl = await harness.globalEl();
+        expect(await globalEl.text()).toBe('I am a sibling!');
+      });
+
+      it('should get correct text excluding certain selectors', async () => {
+        const results = await harness.subcomponentAndSpecialHarnesses();
+        const subHarnessHost = await results[0].host();
+
+        expect(await subHarnessHost.text({exclude: 'h2'})).toBe('ProtractorTestBedOther');
+        expect(await subHarnessHost.text({exclude: 'li'})).toBe('List of test tools');
+      });
+
+      it('should be able to retrieve the WebElement from a WebDriverElement', async () => {
+        const element = WebDriverHarnessEnvironment.getNativeElement(await harness.host());
+        expect(await element.getTagName()).toBe('test-main');
+      });
+    });
+
+    describe('shadow DOM interaction', () => {
+      it('should not pierce shadow boundary by default', async () => {
+        const harness = await WebDriverHarnessEnvironment.loader(wd)
+            .getHarness(MainComponentHarness);
+        expect(await harness.shadows()).toEqual([]);
+      });
+
+      it('should pierce shadow boundary when using piercing query', async () => {
+        const harness = await WebDriverHarnessEnvironment.loader(wd, {queryFn: piercingQueryFn})
+            .getHarness(MainComponentHarness);
+        const shadows = await harness.shadows();
+        expect(await parallel(() => {
+          return shadows.map(el => el.text());
+        })).toEqual(['Shadow 1', 'Shadow 2']);
+      });
+
+      it('should allow querying across shadow boundary', async () => {
+        const harness = await WebDriverHarnessEnvironment.loader(wd, {queryFn: piercingQueryFn})
+            .getHarness(MainComponentHarness);
+        expect(await (await harness.deepShadow()).text()).toBe('Shadow 2');
+      });
+    });
+  });
+
+  describe('environment independent', () => crossEnvironmentSpecs(
+      () => WebDriverHarnessEnvironment.loader(wd),
+      () => WebDriverHarnessEnvironment.loader(wd).getHarness(MainComponentHarness),
+      async () => (await activeElement()).getAttribute('id'),
+  ));
+});

src/cdk/testing/webdriver/BUILD.bazel

@@ -0,0 +1,22 @@
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "webdriver",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/cdk/testing/webdriver",
+    deps = [
+        "//src/cdk/testing",
+        "@npm//@types/selenium-webdriver",
+        "@npm//selenium-webdriver",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/cdk/testing/webdriver/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/cdk/testing/webdriver/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './webdriver-element';
+export * from './webdriver-harness-environment';