@applitools/eyes-testcafe 2.0.0-beta.8 → 2.0.0

package/lib/wrappers/EyesWebElement.js

@@ -1,383 +0,0 @@
-'use strict'
-
-const {Selector} = require('testcafe')
-const {
-  Region,
-  ArgumentGuard,
-  CoordinatesType,
-  // TypeUtils,
-  RectangleSize,
-  Location,
-  EyesError,
-  GeneralUtils,
-} = require('@applitools/eyes-common')
-// const {MouseTrigger} = require('@applitools/eyes-sdk-core')
-
-const JS_GET_SCROLL_SIZE = 'return [arguments[0].scrollWidth, arguments[0].scrollHeight];'
-
-const JS_GET_CLIENT_SIZE = 'return [arguments[0].clientWidth, arguments[0].clientHeight];'
-
-const JS_GET_COMPUTED_STYLE_FN =
-  'function getCmpStyle(el, p) { return window.getComputedStyle ? window.getComputedStyle(el, null).getPropertyValue(p) : (el.currentStyle ? el.currentStyle[p] : null); };'
-
-/**
- * @param {string} styleProp
- * @return {string}
- */
-const JS_GET_COMPUTED_STYLE_FORMATTED_STR = styleProp =>
-  `${JS_GET_COMPUTED_STYLE_FN}return getCmpStyle(arguments[0], '${styleProp}');`
-
-const JS_GET_SCROLL_LOCATION = 'return [arguments[0].scrollLeft, arguments[0].scrollTop];'
-
-const JS_GET_OVERFLOW = 'return arguments[0].style.overflow;'
-
-const JS_GET_BORDER_WIDTHS_ARR =
-  'var retVal = retVal || [];' +
-  'if (window.getComputedStyle) { ' +
-  'var computedStyle = window.getComputedStyle(elem, null);' +
-  'retVal.push(computedStyle.getPropertyValue("border-left-width"));' +
-  'retVal.push(computedStyle.getPropertyValue("border-top-width"));' +
-  'retVal.push(computedStyle.getPropertyValue("border-right-width")); ' +
-  'retVal.push(computedStyle.getPropertyValue("border-bottom-width"));' +
-  '} else if (elem.currentStyle) { ' +
-  'retVal.push(elem.currentStyle["border-left-width"]);' +
-  'retVal.push(elem.currentStyle["border-top-width"]);' +
-  'retVal.push(elem.currentStyle["border-right-width"]);' +
-  'retVal.push(elem.currentStyle["border-bottom-width"]);' +
-  '} else { ' +
-  'retVal.push(0,0,0,0);' +
-  '}'
-
-const JS_GET_SIZE_AND_BORDER_WIDTHS = `${'var elem = arguments[0]; ' +
-  'var retVal = [elem.clientWidth, elem.clientHeight]; '}${JS_GET_BORDER_WIDTHS_ARR}return retVal;`
-
-/**
- * Wraps a Testcafe Web Element.
- */
-class EyesWebElement {
-  /**
-   * @param {Logger} logger
-   * @param {EyesWebDriver} eyesDriver
-   * @param {WebElement} webElement
-   *
-   */
-  constructor(logger, eyesDriver, webElement) {
-    ArgumentGuard.notNull(logger, 'logger')
-    ArgumentGuard.notNull(eyesDriver, 'eyesDriver')
-    ArgumentGuard.notNull(webElement, 'webElement')
-
-    if (webElement instanceof EyesWebElement) {
-      return webElement
-    }
-
-    this._logger = logger
-    this._eyesDriver = eyesDriver
-
-    /** @type {PositionProvider} */
-    this._positionProvider = undefined
-    this._webElement = webElement
-  }
-
-  /**
-   * @param {object} obj
-   * @return {boolean}
-   */
-  static isLocator(obj) {
-    return !!obj && obj.addCustomMethods && obj.find && obj.parent
-  }
-
-  /**
-   * Compares two WebElements for equality.
-   *
-   * @param {!EyesWebElement|WebElement} a A WebElement.
-   * @param {!EyesWebElement|WebElement} b A WebElement.
-   * @return {!Promise<boolean>} - A promise that will be resolved to whether the two WebElements are equal.
-   */
-  static async equals(_a, _b) {
-    // TODO (amit)
-    return false
-  }
-
-  /**
-   * @override
-   */
-  toString() {
-    return GeneralUtils.toString(this, ['_logger', '_eyesDriver', '_positionProvider'])
-  }
-
-  /**
-   * @return {Promise<Region>}
-   */
-  async getBounds() {
-    const rect = await this.getRect()
-    let {x: left, y: top, width, height} = rect
-
-    if (left < 0) {
-      width = Math.max(0, width + left)
-      left = 0
-    }
-
-    if (top < 0) {
-      height = Math.max(0, height + top)
-      top = 0
-    }
-
-    return new Region(left, top, width, height, CoordinatesType.CONTEXT_RELATIVE)
-  }
-
-  /**
-   * Returns the computed value of the style property for the current element.
-   *
-   * @param {string} propStyle - The style property which value we would like to extract.
-   * @return {Promise<string>} - The value of the style property of the element, or {@code null}.
-   */
-  getComputedStyle(propStyle) {
-    return this.executeScript(JS_GET_COMPUTED_STYLE_FORMATTED_STR(propStyle))
-  }
-
-  /**
-   * @param {string} propStyle - The style property which value we would like to extract.
-   * @return {Promise<number>} - The integer value of a computed style.
-   */
-  async getComputedStyleInteger(propStyle) {
-    const result = await this.getComputedStyle(propStyle)
-    return Math.round(parseFloat(result.trim().replace('px', '')))
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getScrollLocation} instead
-   * @return {Promise<number>} - The value of the scrollLeft property of the element.
-   */
-  async getScrollLeft() {
-    const result = await this.executeScript(JS_GET_SCROLL_LOCATION)
-    return Math.ceil(result[0]) || 0
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getScrollLocation} instead
-   * @return {Promise<number>} - The value of the scrollTop property of the element.
-   */
-  async getScrollTop() {
-    const result = await this.executeScript(JS_GET_SCROLL_LOCATION)
-    return Math.ceil(result[1]) || 0
-  }
-
-  /**
-   * @return {Promise<Location>} - The value of the `scrollLeft` and `scrollTop` property of the element.
-   */
-  async getScrollLocation() {
-    const result = await this.executeScript(JS_GET_SCROLL_LOCATION)
-    return new Location(Math.ceil(result[0]) || 0, Math.ceil(result[1]) || 0)
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getScrollSize} instead
-   * @return {Promise<number>} - The value of the scrollWidth property of the element.
-   */
-  async getScrollWidth() {
-    const result = await this.executeScript(JS_GET_SCROLL_SIZE)
-    return Math.ceil(result[0]) || 0
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getScrollSize} instead
-   * @return {Promise<number>} - The value of the scrollHeight property of the element.
-   */
-  async getScrollHeight() {
-    const result = await this.executeScript(JS_GET_SCROLL_SIZE)
-    return Math.ceil(result[1]) || 0
-  }
-
-  /**
-   * @return {Promise<RectangleSize>} - The value of the `scrollWidth` and `scrollHeight` property of the element.
-   */
-  async getScrollSize() {
-    const result = await this.executeScript(JS_GET_SCROLL_SIZE)
-    return new RectangleSize(Math.ceil(result[0]) || 0, Math.ceil(result[1]) || 0)
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getClientSize} instead
-   * @return {Promise<number>}
-   */
-  async getClientWidth() {
-    const result = await this.executeScript(JS_GET_CLIENT_SIZE)
-    return Math.ceil(result[0]) || 0
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @deprecated use {@link getClientSize} instead
-   * @return {Promise<number>}
-   */
-  async getClientHeight() {
-    const result = await this.executeScript(JS_GET_CLIENT_SIZE)
-    return Math.ceil(result[1]) || 0
-  }
-
-  /**
-   * @return {Promise<RectangleSize>} - The value of the `clientWidth` and `clientHeight` property of the element.
-   */
-  async getClientSize() {
-    const result = await this.executeScript(JS_GET_CLIENT_SIZE)
-    return new RectangleSize(Math.ceil(result[0]) || 0, Math.ceil(result[1]) || 0)
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @return {Promise<number>} - The width of the left border.
-   */
-  getBorderLeftWidth() {
-    return this.getComputedStyleInteger('border-left-width')
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @return {Promise<number>} - The width of the right border.
-   */
-  getBorderRightWidth() {
-    return this.getComputedStyleInteger('border-right-width')
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @return {Promise<number>} - The width of the top border.
-   */
-  getBorderTopWidth() {
-    return this.getComputedStyleInteger('border-top-width')
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  /**
-   * @return {Promise<number>} - The width of the bottom border.
-   */
-  getBorderBottomWidth() {
-    return this.getComputedStyleInteger('border-bottom-width')
-  }
-
-  /**
-   * @return {Promise<{top: number, left: number, bottom: number, width: number, right: number, height: number}>}
-   */
-  async getSizeAndBorders() {
-    const result = await this.executeScript(JS_GET_SIZE_AND_BORDER_WIDTHS)
-    return {
-      width: Math.ceil(result[0]),
-      height: Math.ceil(result[1]),
-      left: Math.ceil(result[2].replace('px', '')),
-      top: Math.ceil(result[2].replace('px', '')),
-      right: Math.ceil(result[3].replace('px', '')),
-      bottom: Math.ceil(result[5].replace('px', '')),
-    }
-  }
-
-  /**
-   * Scrolls to the specified location inside the element.
-   *
-   * @param {Location} location - The location to scroll to.
-   * @return {Promise<Location>} - the current location after scroll.
-   */
-  scrollTo(location) {
-    try {
-      const script = `
-        if (arguments[0] === document.documentElement && window.scrollTo) {
-          window.scrollTo(${location.getX()}, ${location.getY()});
-        } else {
-          arguments[0].scrollLeft=${location.getX()}; arguments[0].scrollTop=${location.getY()};
-        }
-        return [arguments[0].scrollLeft, arguments[0].scrollTop];
-      `
-
-      const position = this.executeScript(script)
-      return new Location(Math.ceil(position[0]) || 0, Math.ceil(position[1]) || 0)
-    } catch (err) {
-      throw EyesError('Could not get scroll position!', err)
-    }
-  }
-
-  /**
-   * @return {Promise<string>} - The overflow of the element.
-   */
-  getOverflow() {
-    return this.executeScript(JS_GET_OVERFLOW)
-  }
-
-  /**
-   * @param {string} overflow - The overflow to set
-   * @return {Promise} - The overflow of the element.
-   */
-  setOverflow(overflow) {
-    return this.executeScript(`arguments[0].style.overflow = '${overflow}'`)
-  }
-
-  /**
-   * @param {string} script - The script to execute with the element as last parameter
-   * @return {Promise<*>} - The result returned from the script
-   */
-  executeScript(script) {
-    // noinspection JSValidateTypes
-    return this._eyesDriver.executeScript(script, this._webElement)
-  }
-
-  // noinspection JSCheckFunctionSignatures
-  /**
-   * @inheritDoc
-   * @return {!EyesWebElement} A WebElement that can be used to issue commands against the located element.
-   *   If the element is not found, the element will be invalidated and all scheduled commands aborted.
-   */
-  findElement(locator) {
-    // TODO (amit): i don't know if this works or when it's needed
-    return Selector(locator).then(
-      element => new EyesWebElement(this._logger, this._eyesDriver, element),
-    )
-  }
-
-  /**
-   * @inheritDoc
-   * @return {!Promise<!Array<!EyesWebElement>>} A promise that will resolve to an array of WebElements.
-   */
-  findElements(locator) {
-    // TODO (amit): i don't know when this is needed
-    return super
-      .findElements(locator)
-      .then(elements =>
-        elements.map(element => new EyesWebElement(this._logger, this._eyesDriver, element)),
-      )
-  }
-
-  /**
-   * @inheritDoc
-   * @return {Promise<{width: number, x: number, y: number, height: number}>}
-   */
-  async getRect() {
-    // The workaround is similar to Java one, but in js we always get raw data with decimal value which we should round up.
-    const rect = await this._webElement.boundingClientRect
-    const width = Math.ceil(rect.width) || 0
-    // noinspection JSSuspiciousNameCombination
-    const height = Math.ceil(rect.height) || 0
-    const x = Math.ceil(rect.x) || 0
-    // noinspection JSSuspiciousNameCombination
-    const y = Math.ceil(rect.y) || 0
-    return {width, height, x, y}
-  }
-
-  /**
-   * @return {PositionProvider}
-   */
-  getPositionProvider() {
-    return this._positionProvider
-  }
-
-  /**
-   * @param {PositionProvider} positionProvider
-   */
-  setPositionProvider(positionProvider) {
-    this._positionProvider = positionProvider
-  }
-}
-
-exports.EyesWebElement = EyesWebElement

package/lib/wrappers/EyesWebElementPromise.js

@@ -1,68 +0,0 @@
-'use strict'
-
-const {EyesWebElement} = require('./EyesWebElement')
-
-/**
- * EyesWebElementPromise is a promise that will be fulfilled with a WebElement.
- * This serves as a forward proxy on WebElement, allowing calls to be scheduled without directly on this instance
- * before the underlying WebElement has been fulfilled. In other words, the following two statements are equivalent:
- *
- *     driver.findElement({id: 'my-button'}).click();
- *     driver.findElement({id: 'my-button'}).then(function(el) {
- *       return el.click();
- *     });
- *
- * @final
- * @ignore
- */
-class EyesWebElementPromise extends EyesWebElement {
-  /**
-   * @param {Logger} logger
-   * @param {EyesWebDriver} driver The parent WebDriver instance for this element.
-   * @param {WebElement} webElement A promise that will resolve to the promised element.
-   * @param {*} locator
-   */
-  constructor(logger, driver, webElement, locator) {
-    const wrapper = webElement.then(element => new EyesWebElement(logger, driver, element))
-
-    super(logger, driver, webElement)
-
-    this._foundBy = String(locator)
-
-    // noinspection JSUnresolvedVariable
-    /**
-     * @inheritDoc
-     */
-    this.then = wrapper.then.bind(wrapper)
-
-    // noinspection JSUnresolvedVariable
-    /**
-     * @inheritDoc
-     */
-    this.catch = wrapper.catch.bind(wrapper)
-
-    /**
-     * Defers returning the element ID until the wrapped WebElement has been resolved.
-     * @override
-     */
-    this.getId = () => webElement.getId()
-  }
-
-  /**
-   * @override
-   */
-  toJSON() {
-    return {
-      foundBy: this._foundBy,
-    }
-  }
-
-  /**
-   * @override
-   */
-  toString() {
-    return `[EyesWebElementPromise] -> ${this._foundBy}`
-  }
-}
-
-exports.EyesWebElementPromise = EyesWebElementPromise