cabbie-sync/lib/element.js

A synchronous webdriver client

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _util = require('util');

var _driver = require('./driver');

var _driver2 = _interopRequireDefault(_driver);

var _elementHandle = require('./flow-types/element-handle');

var _selectorTypes = require('./enums/selector-types');

var _selectorTypes2 = _interopRequireDefault(_selectorTypes);

var _addDebugging = require('./add-debugging');

var _addDebugging2 = _interopRequireDefault(_addDebugging);

var _baseClass = require('./base-class');

var _baseClass2 = _interopRequireDefault(_baseClass);

var _mouse = require('./mouse');

var _mouse2 = _interopRequireDefault(_mouse);

var _touch = require('./touch');

var _touch2 = _interopRequireDefault(_touch);

var _waitFor = require('./utils/wait-for');

var _waitFor2 = _interopRequireDefault(_waitFor);

var _flowRuntime = require('flow-runtime');

var _flowRuntime2 = _interopRequireDefault(_flowRuntime);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var SelectorType = _flowRuntime2.default.tdz(function () {
  return _selectorTypes.SelectorType;
});

/*
 * A representation of a remote element.  You can use it to click on, type text into and check the attributes of.
 *
 * ```js
 * const element = await driver.activeWindow.getElement('[data-test-id="my-test-element"]');
 *
 * const elements = await driver.activeWindow.getElements('.some-class-name');
 * ```
 */
/**
* 
* This file is generated automatically, run npm run build to re-generate.
**/

var ElementHandle = _flowRuntime2.default.tdz(function () {
  return _elementHandle.ElementHandle;
});

var Driver = _flowRuntime2.default.tdz(function () {
  return _driver2.default;
});

var Element = function (_BaseClass) {
  (0, _inherits3.default)(Element, _BaseClass);

  /*
   * Utility methods for clicking on the element
   */
  function Element(driver /*: Driver*/, parent /*: Element | Driver*/, selector /*: string*/, elementHandle /*: ElementHandle*/) {
    (0, _classCallCheck3.default)(this, Element);

    var _driverType = _flowRuntime2.default.ref(Driver);

    var _parentType = _flowRuntime2.default.union(_flowRuntime2.default.ref(Element), _flowRuntime2.default.ref(Driver));

    var _selectorType = _flowRuntime2.default.string();

    var _elementHandleType = _flowRuntime2.default.ref(ElementHandle);

    _flowRuntime2.default.param('driver', _driverType).assert(driver);

    _flowRuntime2.default.param('parent', _parentType).assert(parent);

    _flowRuntime2.default.param('selector', _selectorType).assert(selector);

    _flowRuntime2.default.param('elementHandle', _elementHandleType).assert(elementHandle);

    var prefix = '/element/' + elementHandle.ELEMENT;

    var _this = (0, _possibleConstructorReturn3.default)(this, (Element.__proto__ || (0, _getPrototypeOf2.default)(Element)).call(this, driver, prefix));

    _this._parent = parent;
    _this._selector = selector;

    _this.elementID = elementHandle.ELEMENT;
    _this.mouse = new _mouse2.default(_this.driver, _this);
    _this.touch = new _touch2.default(_this.driver, _this);
    return _this;
  }

  /*
   * Get the value of an attribute.
   */

  /*
   * Methods for interacting with the element via touch
   */


  /*
   * The selenium id of the element
   */


  (0, _createClass3.default)(Element, [{
    key: 'getAttribute',
    value: function getAttribute(attribute /*: string*/) /*: string*/ {
      var _attributeType = _flowRuntime2.default.string();

      var _returnType = _flowRuntime2.default.return(_flowRuntime2.default.string());

      _flowRuntime2.default.param('attribute', _attributeType).assert(attribute);

      return _returnType.assert(this.requestJSON('GET', '/attribute/' + attribute));
    }

    /*
     * Test if the element have a specific class
     */

  }, {
    key: 'hasClass',
    value: function hasClass(className /*: string*/) /*: boolean*/ {
      var _classNameType = _flowRuntime2.default.string();

      var _returnType2 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      _flowRuntime2.default.param('className', _classNameType).assert(className);

      var classNames = this.getAttribute('class');
      return _returnType2.assert(!!classNames.match(new RegExp('\\b' + className + '\\b')));
    }

    /*
     * Get the text body of an element.
     */

  }, {
    key: 'getText',
    value: function getText() /*: string*/ {
      var _returnType3 = _flowRuntime2.default.return(_flowRuntime2.default.string());

      return _returnType3.assert(this.requestJSON('GET', '/text'));
    }

    /*
     * Get the tag-name of an element.
     */

  }, {
    key: 'getTagName',
    value: function getTagName() /*: string*/ {
      var _returnType4 = _flowRuntime2.default.return(_flowRuntime2.default.string());

      return _returnType4.assert(this.requestJSON('GET', '/name'));
    }

    /*
     * Query the value of an element's computed CSS property. The CSS property to query
     * should be specified using the CSS property name, not the JavaScript property name
     * (e.g. background-color instead of backgroundColor).
     */

  }, {
    key: 'getCssValue',
    value: function getCssValue(property /*: string*/) /*: string*/ {
      var _propertyType = _flowRuntime2.default.string();

      var _returnType5 = _flowRuntime2.default.return(_flowRuntime2.default.string());

      _flowRuntime2.default.param('property', _propertyType).assert(property);

      return _returnType5.assert(this.requestJSON('GET', '/css/' + property));
    }

    /*
     * Return true if the element is currently displayed on the page
     */

  }, {
    key: 'isDisplayed',
    value: function isDisplayed() /*: boolean*/ {
      var _returnType6 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      return _returnType6.assert(this.requestJSON('GET', '/displayed'));
    }

    /*
     * Return true if the form element is selected
     */

  }, {
    key: 'isSelected',
    value: function isSelected() /*: boolean*/ {
      var _returnType7 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      return _returnType7.assert(this.requestJSON('GET', '/selected'));
    }

    /*
     * Return true if the current element is equal to the supplied element
     */

  }, {
    key: 'isEqual',
    value: function isEqual(element /*: Element*/) /*: boolean*/ {
      var _elementType = _flowRuntime2.default.ref(Element);

      var _returnType8 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      _flowRuntime2.default.param('element', _elementType).assert(element);

      return _returnType8.assert(this.requestJSON('GET', '/equals/' + element.elementID));
    }

    /*
     * Return true if the form element is enabled
     */

  }, {
    key: 'isEnabled',
    value: function isEnabled() /*: boolean*/ {
      var _returnType9 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      return _returnType9.assert(this.requestJSON('GET', '/enabled'));
    }

    /*
     * Return true if the form element is disabled
     */

  }, {
    key: 'isDisabled',
    value: function isDisabled() /*: boolean*/ {
      var _returnType10 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      var isEnabled = this.isEnabled();
      return _returnType10.assert(!isEnabled);
    }

    // todo: uploading files ala wd.Element.sendKeys
    /*
     * Type a string of characters into an input
     */

  }, {
    key: 'sendKeys',
    value: function sendKeys(str /*: string | Array<string>*/) /*: void*/ {
      var _strType = _flowRuntime2.default.union(_flowRuntime2.default.string(), _flowRuntime2.default.array(_flowRuntime2.default.string()));

      var _returnType11 = _flowRuntime2.default.return(_flowRuntime2.default.void());

      _flowRuntime2.default.param('str', _strType).assert(str);

      this.requestJSON('POST', '/value', { value: Array.isArray(str) ? str : [str] });
    }

    /*
     * Clear the value of an input
     */

  }, {
    key: 'clear',
    value: function clear() /*: void*/ {
      var _returnType12 = _flowRuntime2.default.return(_flowRuntime2.default.void());

      this.requestJSON('POST', '/clear');
    }

    /*
     * Submit a form element
     */

  }, {
    key: 'submit',
    value: function submit() /*: void*/ {
      var _returnType13 = _flowRuntime2.default.return(_flowRuntime2.default.void());

      this.requestJSON('POST', '/submit');
    }

    /*
     * Get the size of an element
     */

  }, {
    key: 'getSize',
    value: function getSize() /*: { width: number; height: number; }*/ {
      var _returnType14 = _flowRuntime2.default.return(_flowRuntime2.default.object(_flowRuntime2.default.property('width', _flowRuntime2.default.number()), _flowRuntime2.default.property('height', _flowRuntime2.default.number())));

      var size = this.requestJSON('GET', '/size');
      return _returnType14.assert({ width: size.width, height: size.height });
    }

    /*
     * Get the position of an element
     */

  }, {
    key: 'getPosition',
    value: function getPosition() /*: { x: number; y: number; }*/ {
      var _returnType15 = _flowRuntime2.default.return(_flowRuntime2.default.object(_flowRuntime2.default.property('x', _flowRuntime2.default.number()), _flowRuntime2.default.property('y', _flowRuntime2.default.number())));

      var position = this.requestJSON('GET', '/location');
      return _returnType15.assert({ x: position.x, y: position.y });
    }

    /*
     * Get the frame of an element
     */

  }, {
    key: 'getFrame',
    value: function getFrame() /*: { x: number; y: number; width: number; height: number; }*/ {
      var _returnType16 = _flowRuntime2.default.return(_flowRuntime2.default.object(_flowRuntime2.default.property('x', _flowRuntime2.default.number()), _flowRuntime2.default.property('y', _flowRuntime2.default.number()), _flowRuntime2.default.property('width', _flowRuntime2.default.number()), _flowRuntime2.default.property('height', _flowRuntime2.default.number())));

      var position = this.getPosition();
      var size = this.getSize();
      return _returnType16.assert({ x: position.x, y: position.y, width: size.width, height: size.height });
    }

    /*
     * Get the absolute center of an element
     */

  }, {
    key: 'getAbsoluteCenter',
    value: function getAbsoluteCenter() /*: { x: number; y: number; }*/ {
      var _returnType17 = _flowRuntime2.default.return(_flowRuntime2.default.object(_flowRuntime2.default.property('x', _flowRuntime2.default.number()), _flowRuntime2.default.property('y', _flowRuntime2.default.number())));

      var frame = this.getFrame();
      return _returnType17.assert({ x: Math.floor(frame.width / 2) + frame.x, y: Math.floor(frame.height / 2) + frame.y });
    }

    /*
     * Get the relative center of an element
     */

  }, {
    key: 'getRelativeCenter',
    value: function getRelativeCenter() /*: { x: number; y: number; }*/ {
      var _returnType18 = _flowRuntime2.default.return(_flowRuntime2.default.object(_flowRuntime2.default.property('x', _flowRuntime2.default.number()), _flowRuntime2.default.property('y', _flowRuntime2.default.number())));

      var size = this.getSize();
      return _returnType18.assert({ x: Math.floor(size.width / 2), y: Math.floor(size.height / 2) });
    }

    /*
     * Get an element via a selector.
     * Will throw an error if the element does not exist.
     */

  }, {
    key: 'getElement',
    value: function getElement(selector /*: string*/) /*: Element*/ {
      var _this2 = this;

      var selectorType /*: SelectorType*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _selectorTypes2.default.CSS;

      var _selectorType2 = _flowRuntime2.default.string();

      var _selectorTypeType = _flowRuntime2.default.ref(SelectorType);

      var _returnType19 = _flowRuntime2.default.return(_flowRuntime2.default.ref(Element));

      _flowRuntime2.default.param('selector', _selectorType2).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType).assert(selectorType);

      var elementHandle = (0, _waitFor2.default)(function () {
        return _this2.requestJSON('POST', '/element', { using: selectorType, value: selector });
      });
      return _returnType19.assert(new Element(this.driver, this, [this._selector, selector].join(' '), elementHandle));
    }

    /*
     * Get an element via a selector.
     * Will return null if the element does not exist
     */

  }, {
    key: 'tryGetElement',
    value: function tryGetElement(selector /*: string*/) /*: Element | null*/ {
      var selectorType /*: SelectorType*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _selectorTypes2.default.CSS;

      var _selectorType3 = _flowRuntime2.default.string();

      var _selectorTypeType2 = _flowRuntime2.default.ref(SelectorType);

      var _returnType20 = _flowRuntime2.default.return(_flowRuntime2.default.union(_flowRuntime2.default.ref(Element), _flowRuntime2.default.null()));

      _flowRuntime2.default.param('selector', _selectorType3).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType2).assert(selectorType);

      try {
        var elementHandle = this.requestJSON('POST', '/element', { using: selectorType, value: selector });
        return _returnType20.assert(new Element(this.driver, this, [this._selector, selector].join(' '), elementHandle));
      } catch (ex) {
        if (ex.code === 'NoSuchElement' || ex.code === 'ElementNotVisible' || ex.code === 'ElementIsNotSelectable') {
          return _returnType20.assert(null);
        }
        throw ex;
      }
    }

    /*
     * Get elements via a selector.
     */

  }, {
    key: 'getElements',
    value: function getElements(selector /*: string*/) /*: Array<Element>*/ {
      var _this3 = this;

      var selectorType /*: SelectorType*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _selectorTypes2.default.CSS;

      var _selectorType4 = _flowRuntime2.default.string();

      var _selectorTypeType3 = _flowRuntime2.default.ref(SelectorType);

      var _returnType21 = _flowRuntime2.default.return(_flowRuntime2.default.array(_flowRuntime2.default.ref(Element)));

      _flowRuntime2.default.param('selector', _selectorType4).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType3).assert(selectorType);

      var elementHandles = this.requestJSON('POST', '/elements', { using: selectorType, value: selector });
      return _returnType21.assert(elementHandles.map(function (elementHandle) {
        return new Element(_this3.driver, _this3, [_this3._selector, selector].join(' '), elementHandle);
      }));
    }

    /*
     * Get elements by its text content, optionally narrowed down using a selector.
     *
     * N.B. this is **much** slower than getting elements by ID or css selector.
     */

  }, {
    key: 'getElementsByTextContent',
    value: function getElementsByTextContent(textContent /*: string*/) /*: Array<Element>*/ {
      var selector /*: string*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '*';
      var selectorType /*: SelectorType*/ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _selectorTypes2.default.CSS;

      var _textContentType = _flowRuntime2.default.string();

      var _selectorType5 = _flowRuntime2.default.string();

      var _selectorTypeType4 = _flowRuntime2.default.ref(SelectorType);

      var _returnType22 = _flowRuntime2.default.return(_flowRuntime2.default.array(_flowRuntime2.default.ref(Element)));

      _flowRuntime2.default.param('textContent', _textContentType).assert(textContent);

      _flowRuntime2.default.param('selector', _selectorType5).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType4).assert(selectorType);

      if (selector === 'a' && (selectorType === _selectorTypes2.default.CSS || selectorType === _selectorTypes2.default.TAG)) {
        selector = _selectorType5.assert(textContent);
        selectorType = _selectorTypeType4.assert(_selectorTypes2.default.PARTIAL_LINK_TEXT);
      }
      textContent = _textContentType.assert(textContent.trim());
      var elements = this.getElements(selector, selectorType);
      var elementsToReturn = [];
      for (var i = 0; i < elements.length; i++) {
        if (textContent === elements[i].getText().trim()) {
          elementsToReturn.push(elements[i]);
        }
      }
      return _returnType22.assert(elementsToReturn);
    }

    /*
     * Get elements by its text content, optionally narrowed down using a selector.
     *
     * N.B. this is **much** slower than getting elements by ID or css selector.
     */

  }, {
    key: 'getElementByTextContent',
    value: function getElementByTextContent(textContent /*: string*/) /*: Element*/ {
      var _this4 = this;

      var selector /*: string*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '*';
      var selectorType /*: SelectorType*/ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _selectorTypes2.default.CSS;

      var _textContentType2 = _flowRuntime2.default.string();

      var _selectorType6 = _flowRuntime2.default.string();

      var _selectorTypeType5 = _flowRuntime2.default.ref(SelectorType);

      var _returnType23 = _flowRuntime2.default.return(_flowRuntime2.default.ref(Element));

      _flowRuntime2.default.param('textContent', _textContentType2).assert(textContent);

      _flowRuntime2.default.param('selector', _selectorType6).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType5).assert(selectorType);

      var element = (0, _waitFor2.default)(function () {
        return _this4.tryGetElementByTextContent(textContent, selector, selectorType);
      });
      if (element) {
        return _returnType23.assert(element);
      }
      var err = new Error('Could not find an element with the text content: ' + textContent);
      err.name = 'NoSuchElement';
      _flowRuntime2.default.any().assert(err).code = 'NoSuchElement';
      throw err;
    }

    /*
     * Get elements by its text content, optionally narrowed down using a selector.
     *
     * N.B. this is **much** slower than getting elements by ID or css selector.
     */

  }, {
    key: 'tryGetElementByTextContent',
    value: function tryGetElementByTextContent(textContent /*: string*/) /*: Element | null*/ {
      var selector /*: string*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '*';
      var selectorType /*: SelectorType*/ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _selectorTypes2.default.CSS;

      var _textContentType3 = _flowRuntime2.default.string();

      var _selectorType7 = _flowRuntime2.default.string();

      var _selectorTypeType6 = _flowRuntime2.default.ref(SelectorType);

      var _returnType24 = _flowRuntime2.default.return(_flowRuntime2.default.union(_flowRuntime2.default.ref(Element), _flowRuntime2.default.null()));

      _flowRuntime2.default.param('textContent', _textContentType3).assert(textContent);

      _flowRuntime2.default.param('selector', _selectorType7).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType6).assert(selectorType);

      if (selector === 'a' && (selectorType === _selectorTypes2.default.CSS || selectorType === _selectorTypes2.default.TAG)) {
        selector = _selectorType7.assert(textContent);
        selectorType = _selectorTypeType6.assert(_selectorTypes2.default.PARTIAL_LINK_TEXT);
      }
      textContent = _textContentType3.assert(textContent.trim().toLowerCase());
      var elements = this.getElements(selector, selectorType);
      for (var i = 0; i < elements.length; i++) {
        if (textContent === elements[i].getText().trim().toLowerCase()) {
          return _returnType24.assert(elements[i]);
        }
      }
      return _returnType24.assert(null);
    }

    /*
     * Does a specific element exist?
     */

  }, {
    key: 'hasElement',
    value: function hasElement(selector /*: string*/) /*: boolean*/ {
      var selectorType /*: SelectorType*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _selectorTypes2.default.CSS;

      var _selectorType8 = _flowRuntime2.default.string();

      var _selectorTypeType7 = _flowRuntime2.default.ref(SelectorType);

      var _returnType25 = _flowRuntime2.default.return(_flowRuntime2.default.boolean());

      _flowRuntime2.default.param('selector', _selectorType8).assert(selector);

      _flowRuntime2.default.param('selectorType', _selectorTypeType7).assert(selectorType);

      var elements = this.getElements(selector, selectorType);
      return _returnType25.assert(elements.length > 0);
    }
  }]);
  return Element;
}(_baseClass2.default);

(0, _addDebugging2.default)(Element, {
  inspect: function inspect(obj, depth, options) {
    return 'Element(' + (0, _util.inspect)(obj._selector, options) + ')';
  }
});
exports.default = Element;