@oracle/oraclejet-webdriver 17.1.4 → 18.0.0

package/src/elements/oj-color-palette/OjColorPaletteBase.ts

@@ -0,0 +1,259 @@
+import { OjWebElement } from '../';
+
+/**
+ * This is the base class for oj-color-palette WebElement, and is generated from the
+ * component's metadata. Do not modify these contents since they'll be replaced
+ * during the next generation.
+ * Put overrides into the WebElements's subclass, OjColorPalette.ts.
+ */
+export class OjColorPaletteBase extends OjWebElement {
+  /**
+   * Gets the value of <code>describedBy</code> property.
+   * The form component's oj-label automatically sets described-by to make it accessible. It is not meant to be set by application developer.
+   * @return The value of <code>describedBy</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getDescribedBy(): Promise<string> {
+    return this.getProperty<string>('describedBy');
+  }
+
+  /**
+   * Gets the value of <code>disabled</code> property.
+   * Specifies whether the component is disabled. The default is false.
+   * @return The value of <code>disabled</code> property.
+   * @deprecated Since 18.0.0. Disabled is not supported by the Color Palette UX specification.
+   */
+  public getDisabled(): Promise<boolean> {
+    return this.getProperty<boolean>('disabled');
+  }
+
+  /**
+   * Gets the value of <code>displayOptions</code> property.
+   * Form component display options.
+   * @return The value of <code>displayOptions</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getDisplayOptions(): Promise<DisplayOptions> {
+    return this.getProperty<DisplayOptions>('displayOptions');
+  }
+
+  /**
+   * Gets the value of <code>help</code> property.
+   * Form component help information.
+   * @return The value of <code>help</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getHelp(): Promise<Help> {
+    return this.getProperty<Help>('help');
+  }
+
+  /**
+   * Gets the value of <code>helpHints</code> property.
+   * Represents hints for an oj-form-layout element to render help information on the label of the editable component.
+   * @return The value of <code>helpHints</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getHelpHints(): Promise<HelpHints> {
+    return this.getProperty<HelpHints>('helpHints');
+  }
+
+  /**
+   * Gets the value of <code>labelDisplay</code> property.
+   * Specifies whether a text label accompanies the color swatch.
+   * @return The value of <code>labelDisplay</code> property.
+   * @deprecated Since 18.0.0. This is deprecated as labels are no longer supported.
+   */
+  public getLabelDisplay(): Promise<string> {
+    return this.getProperty<string>('labelDisplay');
+  }
+
+  /**
+   * Gets the value of <code>labelEdge</code> property.
+   * Defines how the label of a component is created. See the Help documentation for more information.
+   * @return The value of <code>labelEdge</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getLabelEdge(): Promise<string> {
+    return this.getProperty<string>('labelEdge');
+  }
+
+  /**
+   * Gets the value of <code>labelHint</code> property.
+   * Represents a hint for oj-form-layout element to render a label on the editable component.
+   * @return The value of <code>labelHint</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getLabelHint(): Promise<string> {
+    return this.getProperty<string>('labelHint');
+  }
+
+  /**
+   * Gets the value of <code>labelledBy</code> property.
+   * Used to establish a relationship between this element and another element.
+   * @return The value of <code>labelledBy</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getLabelledBy(): Promise<string> {
+    return this.getProperty<string>('labelledBy');
+  }
+
+  /**
+   * Gets the value of <code>layout</code> property.
+   * Specifies the layout of the color swatches.
+   * @return The value of <code>layout</code> property.
+   * @deprecated Since 18.0.0. This is deprecated as only grid layout values are now supported.
+   */
+  public getLayout(): Promise<string> {
+    return this.getProperty<string>('layout');
+  }
+
+  /**
+   * Sets the value of <code>messagesCustom</code> property.
+   * A list of messages added by an application to the component. See the Help documentation for more information.
+   * @param messagesCustom The value to set for <code>messagesCustom</code>
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public changeMessagesCustom(messagesCustom: Array<object>): Promise<void> {
+    return this.setProperty<Array<object>>('messagesCustom', messagesCustom);
+  }
+
+  /**
+   * Gets the value of <code>messagesCustom</code> property.
+   * A list of messages added by an application to the component. See the Help documentation for more information.
+   * @return The value of <code>messagesCustom</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getMessagesCustom(): Promise<Array<object>> {
+    return this.getProperty<Array<object>>('messagesCustom');
+  }
+
+  /**
+   * Gets the value of <code>palette</code> property.
+   * Specifies an array of objects defining the palette's color set.
+   * @return The value of <code>palette</code> property.
+   *
+   */
+  public getPalette(): Promise<Array<Palette>> {
+    return this.getProperty<Array<Palette>>('palette');
+  }
+
+  /**
+   * Gets the value of <code>placeholder</code> property.
+   * The placeholder text to set on the element.
+   * @return The value of <code>placeholder</code> property.
+   * @deprecated Since 18.0.0. oj-color-palette doesn't have a text input, so this was never needed.
+   */
+  public getPlaceholder(): Promise<string> {
+    return this.getProperty<string>('placeholder');
+  }
+
+  /**
+   * Gets the value of <code>swatchSize</code> property.
+   * Specifies the swatch size.
+   * @return The value of <code>swatchSize</code> property.
+   *
+   */
+  public getSwatchSize(): Promise<string> {
+    return this.getProperty<string>('swatchSize');
+  }
+
+  /**
+   * Gets the value of <code>translations</code> property.
+   * A collection of translated resources from the translation bundle, or null if this component has no resources.
+   * @return The value of <code>translations</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to be validated, display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getTranslations(): Promise<Translations> {
+    return this.getProperty<Translations>('translations');
+  }
+
+  /**
+   * Gets the value of <code>userAssistanceDensity</code> property.
+   * Specifies the density of the form component's user assistance presentation.
+   * @return The value of <code>userAssistanceDensity</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getUserAssistanceDensity(): Promise<string> {
+    return this.getProperty<string>('userAssistanceDensity');
+  }
+
+  /**
+   * Gets the value of <code>valid</code> property.
+   * The validity state of the component
+   * @return The value of <code>valid</code> property.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to be validated, display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  public getValid(): Promise<string> {
+    return this.getProperty<string>('valid');
+  }
+
+  /**
+   * Sets the value of <code>value</code> property.
+   * The current value of the palette element.
+   * @param value The value to set for <code>value</code>
+   *
+   */
+  public changeValue(value: object | string): Promise<void> {
+    return this.setProperty<object | string>('value', value);
+  }
+
+  /**
+   * Gets the value of <code>value</code> property.
+   * The current value of the palette element.
+   * @return The value of <code>value</code> property.
+   *
+   */
+  public getValue(): Promise<object | string> {
+    return this.getProperty<object | string>('value');
+  }
+}
+export interface DisplayOptions {
+  /**
+   * Display options for auxiliary converter hint text that determines whether it should be displayed.
+   */
+  converterHint: Array<string> | string;
+  /**
+   * Display options for auxiliary message text that determines whether it should be displayed.
+   */
+  messages: Array<string> | string;
+  /**
+   * Display options for auxiliary validator hint text that determines whether it should be displayed.
+   */
+  validatorHint: Array<string> | string;
+}
+export interface Help {
+  /**
+   * Represents advisory information for the component, such as would be appropriate for a tooltip.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  instruction: string;
+}
+export interface HelpHints {
+  /**
+   * Hint for help definition text associated with the label.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  definition: string;
+  /**
+   * Help source URL associated with the component.
+   * @deprecated Since 18.0.0. The oj-color-palette is not meant to display messages, be labelled, or be in a form layout by itself. Per the Redwood UX specification, the oj-color-palette is not intended to be a form component.
+   */
+  source: string;
+}
+export interface Palette {
+  /**
+   * the color definition
+   */
+  color: object;
+  /**
+   * optional descriptive string (refer to attribute label-display). If omitted, label defaults to the color's hex string format.
+   * @deprecated Since 18.0.0. The Redwood UX specification does not support labels.
+   */
+  label: string;
+}
+export interface Translations {
+  /**
+   * Label for swatch with no color.
+   */
+  labelNone: string;
+}

package/{elements → src/elements}/oj-combobox-many/OjComboboxMany.ts

@@ -14,12 +14,11 @@ export class OjComboboxMany extends OjComboboxManyBase {
    * @override
    */
   async changeValue(value: Array<any> | null) {
-    // Call focus() on the root element
-    await this.getDriver().executeScript('arguments[0].focus()', this);
     // Only mutate if not readonly/disabled
     const readonly = await this.getReadonly();
     const disabled = await this.getDisabled();
     if (!(readonly || disabled)) {
+      await this.getDriver().executeScript((element: HTMLElement) => element.focus(), this);
       await this.whenBusyContextReady();
 
       if (value == null) {
@@ -33,16 +32,15 @@ export class OjComboboxMany extends OjComboboxManyBase {
         this.getDriver(),
         ['CustomElementUtils'],
         [this, value],
-        `
-        (({ getElementBridge }, element, value) => {
+        ({ getElementBridge }, element, value) => {
           // Retrieve the widget instance from the element
           var bridge = getElementBridge(element);
           var widget = bridge._WIDGET_INSTANCE.combobox;
-          return widget._selectItemByValue(value)
+          return widget
+            ._selectItemByValue(value)
             .then(() => true)
             .catch(() => false);
-        })
-        `
+        }
       );
 
       // If failed to set value, fallback to setProperty

package/{elements → src/elements}/oj-combobox-many/OjComboboxManyBase.ts

@@ -446,6 +446,7 @@ export interface Translations {
 export interface TranslationsRequired {
   /**
    * Hint text used by required validation error.
+   * @deprecated Since 18.0.0. Setting a required validator hint is not recommended in the Redwood design system.
    */
   hint: string;
   /**
@@ -454,7 +455,7 @@ export interface TranslationsRequired {
   messageDetail: string;
   /**
    * Message text for summarizing a required validation error.
-   * @deprecated Since 14.0.0. This is deprecated because in the Redwood design system form components do not show validator summaries, so this is no longer needed.
+   * @deprecated Since 14.0.0. In the Redwood design system form components do not show validator summaries, so this is no longer needed.
    */
   messageSummary: string;
 }

package/{elements → src/elements}/oj-combobox-one/OjComboboxOne.ts

@@ -15,27 +15,25 @@ export class OjComboboxOne extends OjComboboxOneBase {
    * @override
    */
   async changeValue(value: any) {
-    // Call focus() on the root element
-    await this.getDriver().executeScript('arguments[0].focus()', this);
     // Only mutate if not readonly/disabled
     const readonly = await this.getReadonly();
     const disabled = await this.getDisabled();
     if (!(readonly || disabled)) {
+      await this.getDriver().executeScript((element: HTMLElement) => element.focus(), this);
       await this.whenBusyContextReady();
       const isValueSet = await executeWithModules<boolean>(
         this.getDriver(),
         ['CustomElementUtils'],
         [this, value],
-        `
-        (({ getElementBridge }, element, value) => {
+        ({ getElementBridge }, element, value) => {
           // Retrieve the widget instance from the element
           var bridge = getElementBridge(element);
           var widget = bridge._WIDGET_INSTANCE.combobox;
-          return widget._selectItemByValue(value)
+          return widget
+            ._selectItemByValue(value)
             .then(() => true)
             .catch(() => false);
-        })
-        `
+        }
       );
 
       // If failed to set value, fallback to setProperty

package/{elements → src/elements}/oj-combobox-one/OjComboboxOneBase.ts

@@ -452,6 +452,7 @@ export interface Translations {
 export interface TranslationsRequired {
   /**
    * Hint text used by required validation error.
+   * @deprecated Since 18.0.0. Setting a required validator hint is not recommended in the Redwood design system.
    */
   hint: string;
   /**
@@ -460,7 +461,7 @@ export interface TranslationsRequired {
   messageDetail: string;
   /**
    * Message text for summarizing a required validation error.
-   * @deprecated Since 14.0.0. This is deprecated because in the Redwood design system form components do not show validator summaries, so this is no longer needed.
+   * @deprecated Since 14.0.0. In the Redwood design system form components do not show validator summaries, so this is no longer needed.
    */
   messageSummary: string;
 }

package/src/elements/oj-conveyor-belt/OjConveyorBelt.ts

@@ -0,0 +1,37 @@
+import { Locator } from 'selenium-webdriver';
+import { OjConveyorBeltBase } from './OjConveyorBeltBase';
+
+/**
+ * The component WebElement for [oj-conveyor-belt](../../jsdocs/oj.ojConveyorBelt.html).
+ * Do not instantiate this class directly, instead, use
+ * [ojConveyorBelt](../functions/elements.ojConveyorBelt-1.html).
+ */
+
+/**
+ * The component WebElement for [oj-conveyor-belt](../../jsdocs/oj.ojConveyorBelt.html).
+ * Do not instantiate this class directly, instead, use
+ * [ojConveyorBelt](../functions/elements.ojConveyorBelt-1.html).
+ *  <h4>Migration</h4>
+ *  When you migrate a page from using [oj-conveyor-belt](../../jsdocs/oj.ojConveyorBelt.html) to [oj-c-conveyor-belt](../../jsdocs/oj-c.ConveyorBelt.html) you will also need to migrate your WebDriver tests from OjConveyorBelt to ConveyorBeltWebElement. To do that you will need to revise type and locator instances as follows
+ *  </br><b>Type:</b> from OjConveyorBelt to [ConveyorBeltWebElement](../../cpwdtsdoc/classes/ConveyorBeltWebElement.html)
+ *  </br><b>Locator:</b> from [ojConveyorBelt](../functions/elements.ojConveyorBelt-1.html) to [findConveyorBelt](../../cpwdtsdoc/functions/findConveyorBelt.html)
+ *  </br>For more details on migrating from legacy to core pack please see component's [migration section](../../jsdocs/oj.ojConveyorBelt.html#migration-section)
+ */
+export class OjConveyorBelt extends OjConveyorBeltBase {
+  // Put overrides here
+
+  /**
+   * Scroll the conveyor belt, so that the conveyor belt's element (button, tab bar) of interest is in the view
+   *
+   * @param {Locator} locator The lookup to pass into findElement
+   */
+  async scrollElementIntoView(locator: Locator): Promise<void> {
+    await this.whenReady();
+    let el = await this.findElement(locator);
+    return await this.getDriver().executeScript(
+      (cb: any, el: Element) => cb.scrollElementIntoView(el),
+      this,
+      el
+    );
+  }
+}

package/{elements → src/elements}/oj-data-grid/OjDataGrid.ts

@@ -42,18 +42,18 @@ export class OjDataGrid extends OjDataGridBase {
       let cell = cells[i];
 
       cellMatch = await this.getDriver().executeScript(
-        [
-          'var cellContext = arguments[0]["data-oj-cellContext"];',
-          'var cellRowIndex  = cellContext.indexes.row;',
-          'var cellColumnIndex  = cellContext.indexes.column;',
-          'var cellRowKey  = cellContext.keys.row;',
-          'var cellColumnKey = cellContext.keys.column;',
-          'if ((cellRowIndex === arguments[1] || cellRowKey === arguments[3]) &&',
-          '(cellColumnIndex === arguments[2] || cellColumnKey === arguments[4])) {',
-          '  return true;',
-          '}',
-          'return false;'
-        ].join('\n'),
+        (cell: any, rowIndex: number, columnIndex: number, rowKey: any, columnKey: any) => {
+          const cellContext = cell['data-oj-cellContext'];
+          const { row: cellRowIndex, column: cellColumnIndex } = cellContext.indexes.row;
+          const { row: cellRowKey, column: cellColumnKey } = cellContext.keys.row;
+          if (
+            (cellRowIndex === rowIndex || cellRowKey === rowKey) &&
+            (cellColumnIndex === columnIndex || cellColumnKey === columnKey)
+          ) {
+            return true;
+          }
+          return false;
+        },
         cell,
         rowIndex,
         columnIndex,
@@ -83,24 +83,26 @@ export class OjDataGrid extends OjDataGridBase {
   }): Promise<SlotProxy> {
     await this.whenReady();
     const datagridCell = await this.getDriver().executeScript<WebElement>(
-      `
-      const element = arguments[0];
-      const rowIndex = arguments[1];
-      const columnIndex = arguments[2];
-      const rowKey = arguments[3];
-      const columnKey = arguments[4];
-      const cells = element.querySelectorAll('.oj-datagrid-cell');
-      for (let i = 0; i < cells.length; i++) {
-        const cellContext = cells[i]["data-oj-cellContext"];
-        const cellRowIndex  = cellContext.indexes.row;
-        const cellColumnIndex  = cellContext.indexes.column;
-        const cellRowKey  = cellContext.keys.row;
-        const cellColumnKey = cellContext.keys.column;
-        if ((cellRowIndex === rowIndex || cellRowKey === rowKey) &&
-        (cellColumnIndex === columnIndex || cellColumnKey === columnKey)) {
-          return cells[i];
+      (element: any, rowIndex: number, columnIndex: number, rowKey: K, columnKey: K) => {
+        const cells = element.querySelectorAll('.oj-datagrid-cell');
+        for (let i = 0; i < cells.length; i++) {
+          const cellContext = cells[i]['data-oj-cellContext'];
+          const cellRowIndex = cellContext.indexes.row;
+          const cellColumnIndex = cellContext.indexes.column;
+          const cellRowKey = cellContext.keys.row;
+          const cellColumnKey = cellContext.keys.column;
+          const rowExtent = cellContext.extents.row;
+          const columnExtent = cellContext.extents.column;
+          if (
+            ((rowIndex >= cellRowIndex && rowIndex < cellRowIndex + rowExtent) ||
+              cellRowKey === rowKey) &&
+            ((columnIndex >= cellColumnIndex && columnIndex < cellColumnIndex + columnExtent) ||
+              cellColumnKey === columnKey)
+          ) {
+            return cells[i];
+          }
         }
-      }`,
+      },
       this,
       itemLocator.rowIndex,
       itemLocator.columnIndex,
@@ -113,6 +115,7 @@ export class OjDataGrid extends OjDataGridBase {
       throw Error(`No corresponding cell found for the itemLocator`);
     }
   }
+
   /**
    * Forces grid to ender editMode on a particular cell.
    * @param itemLocator.rowKey The rowKey within the Collection's dataset associated with the item. (Optional if rowIndex is provided)
@@ -129,24 +132,26 @@ export class OjDataGrid extends OjDataGridBase {
   }) {
     await this.whenReady();
     const datagridCell = await this.getDriver().executeScript<WebElement>(
-      `
-      const element = arguments[0];
-      const rowIndex = arguments[1];
-      const columnIndex = arguments[2];
-      const rowKey = arguments[3];
-      const columnKey = arguments[4];
-      const cells = element.querySelectorAll('.oj-datagrid-cell');
-      for (let i = 0; i < cells.length; i++) {
-        const cellContext = cells[i]["data-oj-cellContext"];
-        const cellRowIndex  = cellContext.indexes.row;
-        const cellColumnIndex  = cellContext.indexes.column;
-        const cellRowKey  = cellContext.keys.row;
-        const cellColumnKey = cellContext.keys.column;
-        if ((cellRowIndex === rowIndex || cellRowKey === rowKey) &&
-        (cellColumnIndex === columnIndex || cellColumnKey === columnKey)) {
-          return cells[i];
+      (element: any, rowIndex: number, columnIndex: number, rowKey: K, columnKey: K) => {
+        const cells = element.querySelectorAll('.oj-datagrid-cell');
+        for (let i = 0; i < cells.length; i++) {
+          const cellContext = cells[i]['data-oj-cellContext'];
+          const cellRowIndex = cellContext.indexes.row;
+          const cellColumnIndex = cellContext.indexes.column;
+          const cellRowKey = cellContext.keys.row;
+          const cellColumnKey = cellContext.keys.column;
+          const rowExtent = cellContext.extents.row;
+          const columnExtent = cellContext.extents.column;
+          if (
+            ((rowIndex >= cellRowIndex && rowIndex < cellRowIndex + rowExtent) ||
+              cellRowKey === rowKey) &&
+            ((columnIndex >= cellColumnIndex && columnIndex < cellColumnIndex + columnExtent) ||
+              cellColumnKey === columnKey)
+          ) {
+            return cells[i];
+          }
         }
-      }`,
+      },
       this,
       itemLocator.rowIndex,
       itemLocator.columnIndex,
@@ -221,17 +226,14 @@ export class OjDataGrid extends OjDataGridBase {
       header = headers[i];
 
       headerMatch = await this.getDriver().executeScript(
-        [
-          'var headerContext = arguments[0]["data-oj-cellContext"];',
-          'var headerIndex = headerContext.index;',
-          'var headerKey = headerContext.key;',
-          'var headerLevel = headerContext.level;',
-          'if (headerKey === arguments[1] || ',
-          '(headerIndex === arguments[2] && headerLevel === arguments[3])) {',
-          '  return true;',
-          '}',
-          'return false;'
-        ].join('\n'),
+        (header: any, key: any, index: number, level: number) => {
+          const headerContext = header['data-oj-cellContext'];
+          const { index: headerIndex, key: headerKey, level: headerLevel } = headerContext;
+          if (headerKey === key || (headerIndex === index && headerLevel === level)) {
+            return true;
+          }
+          return false;
+        },
         header,
         key,
         index,
@@ -261,22 +263,34 @@ export class OjDataGrid extends OjDataGridBase {
   }): Promise<SlotProxy> {
     await this.whenReady();
     const header = await this.getDriver().executeScript<WebElement>(
-      `
-      const element = arguments[0];
-      const axis = arguments[1];
-      const key = arguments[2];
-      const index = arguments[3];
-      const level = arguments[4];
-      const headers = element.querySelectorAll('.oj-datagrid-' + axis.replace('End', '-end') + '-header-cell');
-      for (let i = 0; i < headers.length; i++) {
-        const headerContext = headers[i]["data-oj-cellContext"];
-        const headerIndex = headerContext.index;
-        const headerKey = headerContext.key;
-        const headerLevel = headerContext.level;
-        if (headerKey === key || (headerIndex === index && headerLevel === level)) {
-          return headers[i];
+      (
+        element: any,
+        axis: 'row' | 'rowEnd' | 'column' | 'columnEnd',
+        key: K,
+        index: number,
+        level: number
+      ) => {
+        const headers = element.querySelectorAll(
+          '.oj-datagrid-' + axis.replace('End', '-end') + '-header-cell'
+        );
+        for (let i = 0; i < headers.length; i++) {
+          const headerContext = headers[i]['data-oj-cellContext'];
+          const headerIndex = headerContext.index;
+          const headerKey = headerContext.key;
+          const headerLevel = headerContext.level;
+          const headerExtent = headerContext.extent;
+          const headerDepth = headerContext.depth;
+          if (
+            headerKey === key ||
+            (index >= headerIndex &&
+              index < headerIndex + headerExtent &&
+              level >= headerLevel &&
+              level < headerLevel + headerDepth)
+          ) {
+            return headers[i];
+          }
         }
-      } `,
+      },
       this,
       itemLocator.axis,
       itemLocator.key,
@@ -331,14 +345,14 @@ export class OjDataGrid extends OjDataGridBase {
       label = labels[i];
 
       labelMatch = await this.getDriver().executeScript(
-        [
-          'var labelContext = arguments[0]["data-oj-cellContext"];',
-          'var labelLevel = labelContext.level;',
-          'if (labelLevel === arguments[1]) {',
-          '  return true;',
-          '}',
-          'return false;'
-        ].join('\n'),
+        (label: any, level: number) => {
+          const labelContext = label['data-oj-cellContext'];
+          const labelLevel = labelContext.level;
+          if (labelLevel === level) {
+            return true;
+          }
+          return false;
+        },
         label,
         level
       );
@@ -362,18 +376,18 @@ export class OjDataGrid extends OjDataGridBase {
   }): Promise<SlotProxy> {
     await this.whenReady();
     const headerLabel = await this.getDriver().executeScript<WebElement>(
-      `
-      const element = arguments[0];
-      const axis = arguments[1];
-      const level = arguments[2];
-      const labels = element.querySelectorAll('.oj-datagrid-' + axis.replace('End', '-end') + '-header-label');
-      for (let i = 0; i < labels.length; i++) {  
-        const labelContext = labels[i]["data-oj-cellContext"];
-        const labelLevel = labelContext.level;
-        if (labelLevel === level) {
-          return labels[i];
+      (element: any, axis: 'row' | 'rowEnd' | 'column' | 'columnEnd', level: number) => {
+        const labels = element.querySelectorAll(
+          '.oj-datagrid-' + axis.replace('End', '-end') + '-header-label'
+        );
+        for (let i = 0; i < labels.length; i++) {
+          const labelContext = labels[i]['data-oj-cellContext'];
+          const labelLevel = labelContext.level;
+          if (labelLevel === level) {
+            return labels[i];
+          }
         }
-      }`,
+      },
       this,
       itemLocator.axis,
       itemLocator.level != null ? itemLocator.level : 0