[test] Use Puppeteer to deduce Element types

Bug: none
Change-Id: I8899a6795b6a7931f5afcb5dcbe2740623c9ed74
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6348456
Commit-Queue: Nikolay Vitkov <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Lightning00Blade

test/e2e/recorder/helpers.ts

@@ -21,7 +21,7 @@ import {
   waitForAria,
 } from '../../../test/shared/helper.js';
 
-const RECORDER_CONTROLLER_TAG_NAME = 'devtools-recorder-controller';
+const RECORDER_CONTROLLER_TAG_NAME = 'devtools-recorder-controller' as const;
 const TEST_RECORDING_NAME = 'New Recording';
 const ControlOrMeta = platform === 'mac' ? 'Meta' : 'Control';
 

test/shared/helper.ts

@@ -199,21 +199,26 @@ export const pasteText = async (text: string) => {
   await drainFrontendTaskQueue();
 };
 
+type DeducedElementType<ElementType extends Element|null, Selector extends string> =
+    ElementType extends null ? puppeteer.NodeFor<Selector>: ElementType;
+
 // Get a single element handle. Uses `pierce` handler per default for piercing Shadow DOM.
-export const $ = async<ElementType extends Element = Element>(
-    selector: string, root?: puppeteer.ElementHandle, handler = 'pierce') => {
+export const $ = async<ElementType extends Element|null = null, Selector extends string = string>(
+    selector: Selector, root?: puppeteer.ElementHandle, handler = 'pierce') => {
   const {frontend} = getBrowserAndPages();
   const rootElement = root ? root : frontend;
-  const element = await rootElement.$(`${handler}/${selector}`) as puppeteer.ElementHandle<ElementType>;
+  const element = await rootElement.$(`${handler}/${selector}`) as
+      puppeteer.ElementHandle<DeducedElementType<ElementType, Selector>>;
   return element;
 };
 
 // Get multiple element handles. Uses `pierce` handler per default for piercing Shadow DOM.
-export const $$ =
-    async<ElementType extends Element = Element>(selector: string, root?: puppeteer.JSHandle, handler = 'pierce') => {
+export const $$ = async<ElementType extends Element|null = null, Selector extends string = string>(
+    selector: Selector, root?: puppeteer.JSHandle, handler = 'pierce') => {
   const {frontend} = getBrowserAndPages();
   const rootElement = root ? root.asElement() || frontend : frontend;
-  const elements = await rootElement.$$(`${handler}/${selector}`) as Array<puppeteer.ElementHandle<ElementType>>;
+  const elements = await rootElement.$$(`${handler}/${selector}`) as
+      Array<puppeteer.ElementHandle<DeducedElementType<ElementType, Selector>>>;
   return elements;
 };
 
@@ -241,7 +246,7 @@ export const timeout = (duration: number) => new Promise<void>(resolve => setTim
 
 export const getTextContent =
     async<ElementType extends Element = Element>(selector: string, root?: puppeteer.ElementHandle) => {
-  const text = await (await $<ElementType>(selector, root))?.evaluate(node => node.textContent);
+  const text = await (await $<ElementType, typeof selector>(selector, root))?.evaluate(node => node.textContent);
   return text ?? undefined;
 };
 
@@ -268,15 +273,15 @@ export const getVisibleTextContents = async (selector: string) => {
 export const waitFor = async<ElementType extends Element = Element>(
     selector: string, root?: puppeteer.ElementHandle, asyncScope = new AsyncScope(), handler?: string) => {
   return await asyncScope.exec(() => waitForFunction(async () => {
-                                 const element = await $<ElementType>(selector, root, handler);
+                                 const element = await $<ElementType, typeof selector>(selector, root, handler);
                                  return (element || undefined);
                                }, asyncScope), `Waiting for element matching selector '${selector}'`);
 };
 
 export const waitForVisible = async<ElementType extends Element = Element>(
     selector: string, root?: puppeteer.ElementHandle, asyncScope = new AsyncScope(), handler?: string) => {
   return await asyncScope.exec(() => waitForFunction(async () => {
-                                 const element = await $<ElementType>(selector, root, handler);
+                                 const element = await $<ElementType, typeof selector>(selector, root, handler);
                                  const visible = await element.evaluate(node => node.checkVisibility());
                                  return visible ? element : undefined;
                                }, asyncScope), `Waiting for element matching selector '${selector}' to be visible`);