Find an element that can't be find in the UI-tree with Appium + webdriver.io by using an other component

find.element.js

let SEND_BUTTON_COORDINATES;
const SELECTORS = {
  INPUT: '~test-Message input',
  ADD_BUTTON: '~test-Add',
  SEND_BUTTON: '~test-Send',
};

export class ChatInput {
  /**
   * Get the chat input
   *
   * @return {*}
   */
  static get input() {
    return $(SELECTORS.INPUT);
  }

  /**
   * Set a value in the chat input
   *
   * @param {string} string The chat message
   */
  static setValue(string) {
    this.input.setValue(string);
  }

  /**
   * Get the send button
   *
   * @return {*}
   */
  static get sendButton() {
    return $(SELECTORS.SEND_BUTTON);
  }

  static submit() {
    // For Android we can use the element
    if (browser.isAndroid) {
      return this.sendButton.click();
    }

    /**
     * This is a dirty hack for iOS because the button is not
     * in the UI tree. This is caused by the position absolute
     * of the button. It's outside the view on the right side of the screen
     */
    this._getSendButtonCoordinates();
    return browser.touchPerform([{
      action: 'tap',
      options: {
        x: SEND_BUTTON_COORDINATES.x,
        y: SEND_BUTTON_COORDINATES.y,
      },
    }, {
      action: 'release',
    }]);
  }

  /**
   * Enter and send the chat message
   *
   * @param string
   */
  static sendMessage(string) {
    this.setValue(string);
    this.submit();
  }

  /**
   * Get the send button coordinates.
   *
   * @private
   */
  static _getSendButtonCoordinates() {
    if (!SEND_BUTTON_COORDINATES) {
      const addSize = $(SELECTORS.ADD_BUTTON).getElementSize();
      const addLocation = $(SELECTORS.ADD_BUTTON).getLocation();
      const screenSize = device.windowHandleSize().value;
      SEND_BUTTON_COORDINATES = {
        x: screenSize.width - (addLocation.x + Math.ceil(addSize.width / 2)),
        y: addLocation.y + Math.ceil(addSize.height / 2),
      };
    }
  }
}