protractor#ElementFinder TypeScript Examples

/**
 * Returns CSS classes on given element.
 */
export async function getCssClasses(elementFinder: ElementFinder): Promise<string[]> {
  const classAttr: string = await elementFinder.getAttribute('class');
  if (!classAttr) {
    return [];
  }
  return classAttr.split(/\s+/);
}

export async function safeClick(button: ElementFinder) {
  const EC = protractor.ExpectedConditions;
  await browser.wait(EC.presenceOf(button), WAIT_TIMEOUT);
  await browser.wait(EC.visibilityOf(button), WAIT_TIMEOUT);
  await browser.wait(EC.elementToBeClickable(button), WAIT_TIMEOUT);
  await button.click();
}

async function selectRandomOptionMulti(
  options: ElementArrayFinder,
  confirmElement: ElementFinder,
  nextAnswer: AnswerTestDataType
) {
  const lastOptionIndex = (await options.count()) - 1;
  let optionIndex;

  // multi-select option
  const howManyOptionsToClick = 1; // change to test multiple clicking - may require changes in answers array
  for (let i = 0; i < howManyOptionsToClick; i++) {
    // click randomally (same option may be clicked multiple times)
    optionIndex = getValidOptionIndex(lastOptionIndex, nextAnswer);
    const optionElement = options.get(optionIndex);

    const optionText = await reverseStr(optionElement.getText());
    log(`Answer using multi-select option - click button index: ${optionIndex} of ${lastOptionIndex} (${optionText})`);
    await safeClick(optionElement);
    await safeClick(confirmElement);
  }
}

/**
 * Reads the element value of the given element.
 */
export function getInputValue(elementFinder: ElementFinder): Promise<any> {
  return browser.executeScript('return arguments[0].value', elementFinder.getWebElement()) as Promise<any>;
}

/**
 * Selects an option of a select dropdown.
 */
export async function selectOption(value: string, selectField: ElementFinder): Promise<void> {
  await selectField.$(`option[value="${value}"`).click();
}

/**
 * Removes the given attribute from the specified element.
 */
export async function removeAttribute(elementFinder: ElementFinder, name: string): Promise<void> {
  await browser.executeScript('arguments[0].removeAttribute(arguments[1]);', elementFinder.getWebElement(), name);
}

/**
 * Sets an attribute of the given name and value on the specified element.
 */
export async function setAttribute(elementFinder: ElementFinder, name: string, value: string): Promise<void> {
  await browser.executeScript('arguments[0].setAttribute(arguments[1], arguments[2]);', elementFinder.getWebElement(), name, value);
}

/**
 * Enters the given text into the given input field.
 *
 * By default, the text is set directly as input to the field, because 'sendKeys' is very slow.
 */
export async function enterText(text: string, elementFinder: ElementFinder, inputStrategy: 'sendKeys' | 'setValue' = 'setValue'): Promise<void> {
  const enterTextFn = async (): Promise<void> => {
    switch (inputStrategy) {
      case 'sendKeys': { // send keys is slow for long texts
        await elementFinder.clear();
        await elementFinder.click();
        await sendKeys(text);
        break;
      }
      case 'setValue': {
        // fire the 'input' event manually because not fired when setting the value with javascript
        await elementFinder.click();
        await browser.executeScript('arguments[0].value=arguments[1]; arguments[0].dispatchEvent(new Event(\'input\'));', elementFinder.getWebElement(), text);
        await sendKeys(Key.TAB);
        break;
      }
      default: {
        throw Error('[UnsupportedStrategyError] Input strategy not supported.');
      }
    }
  };

  try {
    await enterTextFn();
  }
  catch (error) {
    // Maybe, the element is not interactable because not scrolled into view. Try again, but scroll it into view first.
    // This error often occurs on GitHub CI, but not when running tests locally.
    if (error instanceof Error && error.name === 'ElementNotVisibleError') {
      console.log(`[ElementNotVisibleError] Element not interactable: ${elementFinder.locator().toString()}. Scrolling it into view and trying to enter text again.`, error);
      await browser.executeScript('arguments[0].scrollIntoView()', elementFinder.getWebElement());
      await enterTextFn();
      console.log(`Text successfully entered into input field: ${elementFinder.locator().toString()}`);
    }
    else {
      throw error;
    }
  }
}

/**
 * Returns if given CSS class is present on given element.
 */
export async function isCssClassPresent(elementFinder: ElementFinder, cssClass: string): Promise<boolean> {
  const classes: string[] = await getCssClasses(elementFinder);
  return classes.includes(cssClass);
}

public install(): void {
    ElementFinder.prototype.click = async function(): Promise<void> {
      await click(this.getWebElement());
    };
    WebElement.prototype.click = async function(): Promise<void> {
      await click(this);
    };
    SciListItemPO.prototype.clickAction = async function(cssClass: string): Promise<void> {
      const actionButtonFinder = this.actionsFinder.$$(`button.${cssClass}`).first();
      // hovering the action is not necessary as being clicked through script
      await click(actionButtonFinder.getWebElement());
    };
  }

/**
 * Due to an issue with the Selenium WebDriver, elements within an iframe cannot be clicked if the iframe is part of a shadow DOM.
 *
 * Error: 'Failed: unknown error: no element reference returned through a script'.
 *
 * This method clicks the element returned by the {@link ElementFinder} programmatically via script.
 *
 * ---
 * Protractor: 5.4.2
 * Chrome: 79.0.3945.0
 * Chrome WebDriver: 79.0.3945.0 // webdriver-manager update --versions.chrome=79.0.3945.0
 * Puppeteer: 2.0.0 // Chrome 79
 *
 * ---
 * See related issues:
 * https://stackoverflow.com/q/51629411
 * https://stackoverflow.com/q/58872973
 */
async function click(element: WebElement): Promise<void> {
  const script = `
    if (arguments[0].tagName === 'INPUT' && arguments[0].type === 'text') {
      arguments[0].focus();
    }
    else if (arguments[0].tagName === 'TEXTAREA') {
      arguments[0].focus();
    }
    else if (arguments[0].tagName === 'OPTION') {
      arguments[0].focus && arguments[0].focus();
      arguments[0].selected = true;
      // fire the 'change' event manually because not fired when selecting the option with javascript
      arguments[0].parentElement.dispatchEvent(new Event('change'));
    }
    else {
      arguments[0].focus && arguments[0].focus();
      arguments[0].click();
    }`;
  await browser.executeScript(script, element);
}

private _checkboxFinder: ElementFinder;

async waitForSelector(el: ElementFinder) {
    return browser.wait(ExpectedConditions.presenceOf(el), 3000);
  }

private getActiveHtlMultiOptionsConfirm(): ElementFinder {
    // get all options other than last ('other' is confirm button)
    const index = this.answersCounter.optionsMulti;
    return element.all(by.css('htl-messages htl-message-multi-options'))
      .get(index)
      .element(by.css('button.other'));
  }

// == input ==
  getHtlInput(): ElementFinder {
    return element(by.css('htl-input input'));
  }

constructor(private _pageFinder: ElementFinder, private _switchToIframeFn: SwitchToIframeFn) {
  }

private origElementFinderClickFn = ElementFinder.prototype.click;

public uninstall(): void {
    ElementFinder.prototype.click = this.origElementFinderClickFn;
    WebElement.prototype.click = this.origWebElementClickFn;
    SciListItemPO.prototype.clickAction = this.origSciListItemPOClickFn;
  }

private _contentFinder: ElementFinder;

constructor(private _pageFinder: ElementFinder, private _switchToIframeFn: SwitchToIframeFn) {
  }

constructor(private _sciListFinder: ElementFinder, private _switchToIframeFn: SwitchToIframeFn) {
    this._contextListPO = new SciListPO(this._sciListFinder);
  }

private _contentFinder: ElementFinder;

private readonly _outletFinder: ElementFinder;

constructor(private _sciPropertyFinder: ElementFinder) {
  }

constructor(private _sciParamsEnterFinder: ElementFinder) {
  }

constructor(private _sciListFinder: ElementFinder) {
  }

public async getListItems(waitUntil?: WaitUntil): Promise<SciListItemPO[]> {
    waitUntil && await this.waitForListItems(waitUntil);

    const listItemFinders: ElementFinder[] = await this._sciListFinder.$$('sci-list-item');
    return listItemFinders.map(listItemFinder => new SciListItemPO(listItemFinder));
  }

public readonly contentFinder: ElementFinder;

constructor(sciListItemFinder: ElementFinder) {
    this.contentFinder = sciListItemFinder.$('div.e2e-item');
    this.actionsFinder = sciListItemFinder.$('ul.e2e-actions').$$('li.e2e-action');
  }