Ftr tsfy webelement wrapper (#35355)

* tsfy webelement wrapper

test/functional/page_objects/visual_builder_page.ts

@@ -18,6 +18,7 @@
  */
 
 import { FtrProviderContext } from '../ftr_provider_context.d';
+import { WebElementWrapper } from '../services/lib/web_element_wrapper';
 
 export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const find = getService('find');
@@ -110,7 +111,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
      * @memberof VisualBuilderPage
      */
     public async getMarkdownTableVariables(): Promise<
-      Array<{ key: string; value: string; selector: any }>
+      Array<{ key: string; value: string; selector: WebElementWrapper }>
     > {
       const testTableVariables = await testSubjects.find('tsvbMarkdownVariablesTable');
       const variablesSelector = 'tbody tr';
@@ -119,10 +120,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
         log.debug('variable list is empty');
         return [];
       }
-      const variables: any[] = await testTableVariables.findAllByCssSelector(variablesSelector);
+      const variables = await testTableVariables.findAllByCssSelector(variablesSelector);
 
       const variablesKeyValueSelectorMap = await Promise.all(
-        variables.map(async (variable: any) => {
+        variables.map(async variable => {
           const subVars = await variable.findAllByCssSelector('td');
           const selector = await subVars[0].findByTagName('a');
           const key = await selector.getVisibleText();
@@ -152,7 +153,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
      * @returns {Promise<any[]>}
      * @memberof VisualBuilderPage
      */
-    public async getSubTabs() {
+    public async getSubTabs(): Promise<WebElementWrapper[]> {
       return await find.allByCssSelector('[data-test-subj$="-subtab"]');
     }
 

test/functional/services/browser.ts

@@ -21,7 +21,6 @@ import { cloneDeep } from 'lodash';
 import { IKey, logging } from 'selenium-webdriver';
 
 import { modifyUrl } from '../../../src/core/utils';
-// @ts-ignore no support ts yet
 import { WebElementWrapper } from './lib/web_element_wrapper';
 
 import { FtrProviderContext } from '../ftr_provider_context';
@@ -240,10 +239,11 @@ export async function BrowserProvider({ getService }: FtrProviderContext) {
     public async clickMouseButton(...args: unknown[]): Promise<void> {
       const mouse = (driver.actions() as any).mouse();
       const actions = (driver as any).actions({ bridge: true });
-      if (args[0] instanceof WebElementWrapper) {
+      const arg0 = args[0];
+      if (arg0 instanceof WebElementWrapper) {
         await actions
           .pause(mouse)
-          .move({ origin: (args[0] as any)._webElement })
+          .move({ origin: arg0._webElement })
           .click()
           .perform();
       } else if (isNaN(args[1] as number) || isNaN(args[2] as number) === false) {
@@ -297,7 +297,7 @@ export async function BrowserProvider({ getService }: FtrProviderContext) {
      *
      * @return {Promise<Buffer>}
      */
-    public async takeScreenshot(): Promise<string | Buffer> {
+    public async takeScreenshot(): Promise<string> {
       return await driver.takeScreenshot();
     }
 
@@ -373,51 +373,53 @@ export async function BrowserProvider({ getService }: FtrProviderContext) {
      * @param  {string|function} fn
      * @param  {...any[]} args
      */
-    public async execute<A extends any[], R>(fn: string | ((...args: A) => R), ...args: A) {
+    public async execute<A extends any[], R>(
+      fn: string | ((...args: A) => R),
+      ...args: A
+    ): Promise<R> {
       return await driver.executeScript(
         fn,
-        ...cloneDeep(args, arg => {
+        ...cloneDeep<any>(args, arg => {
           if (arg instanceof WebElementWrapper) {
             return arg._webElement;
           }
         })
       );
     }
 
-    public async executeAsync<A extends any[], R>(fn: string | ((...args: A) => R), ...args: A) {
+    public async executeAsync<A extends any[], R>(
+      fn: string | ((...args: A) => R),
+      ...args: A
+    ): Promise<R> {
       return await driver.executeAsyncScript(
         fn,
-        ...cloneDeep(args, arg => {
+        ...cloneDeep<any>(args, arg => {
           if (arg instanceof WebElementWrapper) {
             return arg._webElement;
           }
         })
       );
     }
 
-    public getScrollTop() {
-      return driver
-        .executeScript('return document.body.scrollTop')
-        .then((scrollSize: any) => parseInt(scrollSize, 10));
+    public async getScrollTop(): Promise<number> {
+      const scrollSize = await driver.executeScript<string>('return document.body.scrollTop');
+      return parseInt(scrollSize, 10);
     }
 
-    public getScrollLeft() {
-      return driver
-        .executeScript('return document.body.scrollLeft')
-        .then((scrollSize: any) => parseInt(scrollSize, 10));
+    public async getScrollLeft(): Promise<number> {
+      const scrollSize = await driver.executeScript<string>('return document.body.scrollLeft');
+      return parseInt(scrollSize, 10);
     }
 
     // return promise with REAL scroll position
-    public setScrollTop(scrollSize: number | string) {
-      return driver
-        .executeScript('document.body.scrollTop = ' + scrollSize)
-        .then(this.getScrollTop);
+    public async setScrollTop(scrollSize: number | string): Promise<number> {
+      await driver.executeScript('document.body.scrollTop = ' + scrollSize);
+      return this.getScrollTop();
     }
 
-    public setScrollLeft(scrollSize: number | string) {
-      return driver
-        .executeScript('document.body.scrollLeft = ' + scrollSize)
-        .then(this.getScrollLeft);
+    public async setScrollLeft(scrollSize: number | string) {
+      await driver.executeScript('document.body.scrollLeft = ' + scrollSize);
+      return this.getScrollLeft();
     }
   }
 

test/functional/services/find.ts

@@ -19,7 +19,6 @@
 
 import { WebDriver, WebElement } from 'selenium-webdriver';
 import { FtrProviderContext } from '../ftr_provider_context';
-// @ts-ignore not support yet
 import { WebElementWrapper } from './lib/web_element_wrapper';
 
 export async function FindProvider({ getService }: FtrProviderContext) {
@@ -36,10 +35,10 @@ export async function FindProvider({ getService }: FtrProviderContext) {
   const defaultFindTimeout = config.get('timeouts.find');
   const fixedHeaderHeight = config.get('layout.fixedHeaderHeight');
 
-  const wrap = (webElement: WebElementWrapper | WebElement) =>
+  const wrap = (webElement: WebElement | WebElementWrapper) =>
     new WebElementWrapper(webElement, webdriver, defaultFindTimeout, fixedHeaderHeight, log);
 
-  const wrapAll = (webElements: Array<WebElementWrapper | WebElement>) => webElements.map(wrap);
+  const wrapAll = (webElements: Array<WebElement | WebElementWrapper>) => webElements.map(wrap);
 
   class Find {
     public currentWait = defaultFindTimeout;
@@ -149,13 +148,12 @@ export async function FindProvider({ getService }: FtrProviderContext) {
 
     public async descendantExistsByCssSelector(
       selector: string,
-      parentElement: any,
+      parentElement: WebElementWrapper,
       timeout: number = WAIT_FOR_EXISTS_TIME
     ): Promise<boolean> {
       log.debug(`Find.descendantExistsByCssSelector('${selector}') with timeout=${timeout}`);
-      return await this.exists(async () =>
-        wrapAll(await parentElement._webElement.findElements(By.css(selector), timeout))
-      );
+      const els = await parentElement._webElement.findElements(By.css(selector));
+      return await this.exists(async () => wrapAll(els), timeout);
     }
 
     public async descendantDisplayedByCssSelector(
@@ -225,7 +223,13 @@ export async function FindProvider({ getService }: FtrProviderContext) {
     }
 
     public async exists(
-      findFunction: (el: WebDriver | WebElement) => WebElementWrapper | WebElementWrapper[],
+      findFunction: (
+        el: WebDriver
+      ) =>
+        | WebElementWrapper
+        | WebElementWrapper[]
+        | Promise<WebElementWrapper[]>
+        | Promise<WebElementWrapper>,
       timeout: number = WAIT_FOR_EXISTS_TIME
     ): Promise<boolean> {
       await this._withTimeout(timeout);

test/functional/services/index.ts

@@ -18,7 +18,6 @@
  */
 
 import { AppsMenuProvider } from './apps_menu';
-// @ts-ignore not TS yet
 import { BrowserProvider } from './browser';
 // @ts-ignore not TS yet
 import { ComboBoxProvider } from './combo_box';
@@ -37,7 +36,6 @@ import { EmbeddingProvider } from './embedding';
 import { FailureDebuggingProvider } from './failure_debugging';
 // @ts-ignore not TS yet
 import { FilterBarProvider } from './filter_bar';
-// @ts-ignore not TS yet
 import { FindProvider } from './find';
 // @ts-ignore not TS yet
 import { FlyoutProvider } from './flyout';
@@ -47,7 +45,6 @@ import { GlobalNavProvider } from './global_nav';
 import { InspectorProvider } from './inspector';
 // @ts-ignore not TS yet
 import { QueryBarProvider } from './query_bar';
-// @ts-ignore not TS yet
 import { RemoteProvider } from './remote';
 // @ts-ignore not TS yet
 import { RenderableProvider } from './renderable';
@@ -57,7 +54,6 @@ import { ScreenshotsProvider } from './screenshots';
 import { SnapshotsProvider } from './snapshots';
 // @ts-ignore not TS yet
 import { TableProvider } from './table';
-// @ts-ignore not TS yet
 import { TestSubjectsProvider } from './test_subjects';
 // @ts-ignore not TS yet
 import { PieChartProvider } from './visualizations';