build: fix webdriver tests

Reworks the Webdriver tests to avoid the frequent timouts that we've been seeing. Working theory is that refreshing the page on each test and then waiting for Angular to stabizilize causes Webdriver to eventually time out. These changes switch to only loading the page once and resetting its state within the same session.

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,21 @@ 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();
+    await wd.sleep(500);
+  });
+
+  afterAll(async () => {
+    await wd.quit();
   });
 
   describe('environment specific', () => {

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

@@ -1,12 +1,27 @@
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {TestMainComponent} from '@angular/cdk/testing/tests';
 
 @Component({
   selector: 'component-harness-e2e',
-  template: `<test-main></test-main>`,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button id="reset-state" (click)="reset()">Reset state</button>
+
+    @if (isShown) {
+      <test-main></test-main>
+    }
+  `,
   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;