protractor#WebElement TypeScript Examples

/**
 * Switches the WebDriver execution context to the given iframe. When resolved, future Protractor commands are sent to that iframe.
 */
export async function switchToIframe(iframe: WebElement): Promise<void> {
  await browser.switchTo().frame(iframe);
  // If the iframe mounts the testing application, wait until Angular finished initialization, that is until asynchronous APP_INITIALIZERs completed.
  // Otherwise, Protractor throws errors like 'Both AngularJS testability and Angular testability are undefined'.
  await waitUntilTestingAppInteractableElseNoop();
}

/**
   * Switches the WebDriver execution context to the iframe of the `<sci-router-outlet>`. When resolved,
   * future Protractor commands are sent to that iframe.
   */
  public async switchToRouterOutletIframe(): Promise<void> {
    await this._switchToIframeFn();

    // Get the iframe from the custom element (inside shadow DOM)
    const iframe = await browser.executeScript<WebElement>('return arguments[0].iframe', this._pageFinder.$('sci-router-outlet').getWebElement());

    // Activate this iframe's WebDriver execution context.
    await switchToIframe(iframe);
  }

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);
}

/**
   * Switches the WebDriver execution context to the iframe of this outlet. When resolved,
   * future Protractor commands are sent to that iframe.
   *
   * Elements contained within iframes can not be accessed from inside the root execution context.
   * Instead, the execution context must first be switched to the iframe.
   */
  public async switchToOutletIframe(trace: boolean = true): Promise<void> {
    // Do not wait for Angular as the page must not necessarily be an Angular page, e.g. 'about:blank'.
    await runOutsideAngularSynchronization(async (): Promise<void> => {
      // Check if the WebDriver execution context for this document is already active.
      if (this._webdriverExecutionContextId
        && this._webdriverExecutionContextId === await $('body').getAttribute(BrowserOutletPO.ATTR_WEBDRIVER_EXECUTION_CONTEXT_ID)
        && this._url === await getUrlOfCurrentWebDriverExecutionContext()) {
        return;
      }

      // In order to activate this iframe's WebDriver execution context, its parent iframe execution contexts must be activated first,
      // one by one, starting with the root context.
      if (!this._parentOutletPO) {
        await browser.switchTo().defaultContent();
        trace && console.log('Switched WebDriver execution context to the root page.');
      }
      else {
        await this._parentOutletPO.switchToOutletIframe(false);
      }

      // Get the iframe from the custom element (inside shadow DOM)
      const iframe: WebElement = await browser.executeScript('return arguments[0].iframe', this._outletFinder.$('sci-router-outlet').getWebElement());

      // Activate this iframe's WebDriver execution context.
      await switchToIframe(iframe);
      await waitUntilLocation(this._url);
      trace && console.log(`Switched WebDriver execution context to the iframe: ${this.iframePath.join(' > ')}. [${this._url}}`);

      // Set the webdriver execution context identity as attribute to the document's body element (if not already set).
      // It will be used by later interactions to decide if a context switch is required.
      if (!this._webdriverExecutionContextId) {
        this._webdriverExecutionContextId = UUID.randomUUID();
        await setAttribute($('body'), BrowserOutletPO.ATTR_WEBDRIVER_EXECUTION_CONTEXT_ID, this._webdriverExecutionContextId);
      }
    });
  }

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

private origWebElementClickFn = WebElement.prototype.click;