build: test webdriver

Tries to deflake the Webdriver test by not waiting for Angular to stabilize.

Author: crisbeto

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

@@ -40,11 +40,6 @@ declare const kagekiri: {
 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()),
@@ -60,15 +55,20 @@ describe('WebDriverHarnessEnvironment', () => {
       .usingServer(process.env['WEB_TEST_WEBDRIVER_SERVER']!)
       .withCapabilities(webTestMetadata.capabilities)
       .build();
-    await wd.manage().timeouts().implicitlyWait(0);
-  });
 
-  afterAll(async () => {
-    await wd.quit();
+    // Ideally we would refresh the page and wait for Angular to stabilize on each test.
+    // We don't do it, because it causes Webdriver to eventually time out. Instead we go to
+    // the page once and reset the component state before the test (see `beforeEach` below).
+    await wd.get(`http://localhost:${port}/component-harness`);
+    await waitForAngularReady(wd);
   });
 
   beforeEach(async () => {
-    await getUrl('/component-harness');
+    await wd.findElement({id: 'reset-state'}).click();
+  });
+
+  afterAll(async () => {
+    await wd.quit();
   });
 
   describe('environment specific', () => {

src/e2e-app/components/component-harness-e2e.ts

@@ -3,10 +3,27 @@ import {TestMainComponent} from '@angular/cdk/testing/tests';
 
 @Component({
   selector: 'component-harness-e2e',
-  template: `<test-main></test-main>`,
+  template: `
+    <button id="reset-state" (click)="reset()">Reset state</button>
+
+    @if (isShown) {
+      <test-main></test-main>
+    }
+  `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [TestMainComponent],
 })
-export class ComponentHarnessE2e {}
+export class ComponentHarnessE2e {
+  protected isShown = true;
+
+  /**
+   * Resets the test component state without the need to refresh the page.
+   * Used by Webdriver integration tests.
+   */
+  protected reset(): void {
+    this.isShown = false;
+    setTimeout(() => (this.isShown = true), 100);
+  }
+}

src/e2e-app/components/e2e-app/e2e-app.ts

@@ -1,5 +1,4 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {NgFor, NgIf} from '@angular/common';
 import {MatListModule} from '@angular/material/list';
 import {RouterLink, RouterOutlet} from '@angular/router';
 
@@ -8,7 +7,7 @@ import {RouterLink, RouterOutlet} from '@angular/router';
   templateUrl: 'e2e-app.html',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [MatListModule, NgIf, NgFor, RouterLink, RouterOutlet],
+  imports: [MatListModule, RouterLink, RouterOutlet],
 })
 export class E2eApp {
   showLinks = false;