WIP Native Events

packages/desktop-gui/package.json

@@ -44,6 +44,6 @@
     "react-bootstrap-modal": "3.0.1",
     "react-dom": "^15.6.1",
     "react-loader": "^2.4.0",
-    "zunder": "5.6.5"
+    "zunder": "5.8.2"
   }
 }

packages/driver/package.json

@@ -14,6 +14,7 @@
     "lib"
   ],
   "devDependencies": {
+    "@babel/polyfill": "^7.0.0",
     "@cypress/bower-kendo-ui": "0.0.2",
     "@cypress/sinon-chai": "1.1.0",
     "@cypress/underscore.inflection": "^1.0.0",
@@ -30,6 +31,7 @@
     "chai": "3.5.0",
     "chai-as-promised": "6.0.0",
     "chokidar-cli": "^1.2.0",
+    "chrome-remote-interface": "^0.26.1",
     "clone": "^2.1.1",
     "compression": "^1.1.0",
     "cors": "^2.7.1",
@@ -59,6 +61,7 @@
     "url-parse": "^1.1.7",
     "vanilla-text-mask": "^5.1.1",
     "wait-on": "^2.0.2",
-    "zone.js": "^0.8.18"
+    "zone.js": "^0.8.18",
+    "zunder": "^5.8.2"
   }
 }

packages/driver/src/cy/actionability.coffee

@@ -186,6 +186,7 @@ ensureElIsNotCovered = (cy, win, $el, fromViewport, options, log, onScroll) ->
   return $elAtCoords
 
 getCoordinatesForEl = (cy, $el, options) ->
+  debugger
   ## determine if this element is animating
   if options.x and options.y
     $dom.getElementCoordinatesByPositionRelativeToXY($el, options.x, options.y)

packages/driver/src/cy/commands/actions/click.coffee

@@ -9,6 +9,7 @@ $utils = require("../../../cypress/utils")
 $elements = require("../../../dom/elements")
 $selection = require("../../../dom/selection")
 $actionability = require("../../actionability")
+$native = require("../../../cypress/native_events")
 
 module.exports = (Commands, Cypress, cy, state, config) ->
   Commands.addAll({ prevSubject: "element" }, {
@@ -68,14 +69,21 @@ module.exports = (Commands, Cypress, cy, state, config) ->
           ## handle mouse events removing DOM elements
           ## https://www.w3.org/TR/uievents/#event-type-click (scroll up slightly)
 
-          if $dom.isAttached($elToClick)
-            domEvents.mouseUp = $Mouse.mouseUp($elToClick, fromViewport)
+          # if $dom.isAttached($elToClick)
+          return $native.mouseup(coords.fromViewport)
+          # .then ->
+          #    if options._log and options.log
+          #     options._log.snapshot().end()   
+          .return(null)
+
+          # if $dom.isAttached($elToClick)
+          #   domEvents.mouseUp = $Mouse.mouseUp($elToClick, fromViewport)
 
-          if $dom.isAttached($elToClick)
-            domEvents.click   = $Mouse.click($elToClick, fromViewport)
+          # if $dom.isAttached($elToClick)
+          #   domEvents.click   = $Mouse.click($elToClick, fromViewport)
 
-          if options._log
-            consoleObj = options._log.invoke("consoleProps")
+          # if options._log
+          #   consoleObj = options._log.invoke("consoleProps")
 
           consoleProps = ->
             consoleObj = _.defaults consoleObj ? {}, {
@@ -155,40 +163,44 @@ module.exports = (Commands, Cypress, cy, state, config) ->
 
             el = $elToClick.get(0)
 
-            domEvents.mouseDown = $Mouse.mouseDown($elToClick, coords.fromViewport)
-
-            ## if mousedown was cancelled then or caused
-            ## our element to be removed from the DOM
-            ## just resolve after mouse down and dont
-            ## send a focus event
-            if domEvents.mouseDown.preventedDefault or not $dom.isAttached($elToClick)
-              afterMouseDown($elToClick, coords)
-            else
-              if $elements.isInput(el) or $elements.isTextarea(el) or $elements.isContentEditable(el)
-                if !$elements.isNeedSingleValueChangeInputElement(el)
-                  $selection.moveSelectionToEnd(el)
-
-              ## retrieve the first focusable $el in our parent chain
-              $elToFocus = $elements.getFirstFocusableEl($elToClick)
-
-              if cy.needsFocus($elToFocus, $previouslyFocused)
-                cy.fireFocus($elToFocus.get(0))
-
-                ## if we are currently trying to focus
-                ## the body then calling body.focus()
-                ## is a noop, and it will not blur the
-                ## current element, which is all so wrong
-                if $elToFocus.is("body")
-                  $focused = cy.getFocused()
-
-                  ## if the current focused element hasn't changed
-                  ## then blur manually
-                  if $elements.isSame($focused, $previouslyFocused)
-                    cy.fireBlur($focused.get(0))
-
-              afterMouseDown($elToClick, coords)
+            return $native.mousedown($elToClick, coords.fromViewport)
+              .then(()=>afterMouseDown($elToClick, coords))
+
+            # domEvents.mouseDown = $Mouse.mouseDown($elToClick, coords.fromViewport)
+
+            # ## if mousedown was cancelled then or caused
+            # ## our element to be removed from the DOM
+            # ## just resolve after mouse down and dont
+            # ## send a focus event
+            # if domEvents.mouseDown.preventedDefault or not $dom.isAttached($elToClick)
+            #   afterMouseDown($elToClick, coords)
+            # else
+            #   if $elements.isInput(el) or $elements.isTextarea(el) or $elements.isContentEditable(el)
+            #     if !$elements.isNeedSingleValueChangeInputElement(el)
+            #       $selection.moveSelectionToEnd(el)
+
+            #   ## retrieve the first focusable $el in our parent chain
+            #   $elToFocus = $elements.getFirstFocusableEl($elToClick)
+
+            #   if cy.needsFocus($elToFocus, $previouslyFocused)
+            #     cy.fireFocus($elToFocus.get(0))
+
+            #     ## if we are currently trying to focus
+            #     ## the body then calling body.focus()
+            #     ## is a noop, and it will not blur the
+            #     ## current element, which is all so wrong
+            #     if $elToFocus.is("body")
+            #       $focused = cy.getFocused()
+
+            #       ## if the current focused element hasn't changed
+            #       ## then blur manually
+            #       if $elements.isSame($focused, $previouslyFocused)
+            #         cy.fireBlur($focused.get(0))
+
+              # afterMouseDown($elToClick, coords)
         })
         .catch (err) ->
+          debugger
           ## snapshot only on click failure
           err.onFail = ->
             if options._log

packages/driver/src/cypress/native_events.js

@@ -0,0 +1,81 @@
+require('@babel/polyfill')
+
+window.criRequest = function () {}
+const CRI = require('chrome-remote-interface')
+
+const Promise = require('bluebird')
+const debug = require('debug')('cypress:driver')
+
+let client
+
+const init = () => {
+  return Promise.try(() => {
+    if (client) {
+      return client
+    }
+    // console.log('cy config', Cypress.config())
+    const wsUrl = Cypress.config('wsUrl') //'sdf'//window.config.wsUrl
+
+    return CRI({
+      target: wsUrl,
+      local: true,
+    })
+    .then((cri_client) => {
+      client = cri_client
+
+    })
+    .catch((e) => { })
+  })
+}
+
+const mousedown = ($elToClick, coords) => {
+  // const x = coords.x + (coords.right - coords.left) / 2
+  // const y = coords.y + (coords.bottom - coords.top) / 2
+  const { x, y } = calculateTrueCoords(coords, $elToClick)
+  return client.send('Input.dispatchMouseEvent', {
+    x,
+    y,
+    type: 'mouseMoved',
+  })
+
+  .then(() => {
+    return client.send('Input.dispatchMouseEvent', {
+      x: coords.x,
+      y: coords.y,
+      type: 'mousePressed',
+      button: 'left',
+      clickCount: 1,
+    })
+  })
+}
+
+const mouseup = ($elToClick, coords) => {
+  const { x, y } = calculateTrueCoords(coords, $elToClick)
+  return client.send('Input.dispatchMouseEvent', {
+    x,
+    y,
+    type: 'mouseReleased',
+    button: 'left',
+    clickCount: 1,
+  })
+}
+
+module.exports = {
+  mousedown,
+  mouseup,
+}
+
+
+const calculateTrueCoords = (coords, $elToClick) => {
+  let x = coords.x
+  let y = coords.y
+  let curWindow = $elToClick.ownerDocument.defaultView
+  while (curWindow.frameElement) {
+    const frame = curWindow.frameElement
+    const rect = frame.getBoundingClientRect()
+    x += rect.x
+    y += rect.y
+    curWindow = curWindow.parent
+  }
+  return { x, y }
+}

packages/driver/src/dom/coordinates.coffee

@@ -19,11 +19,22 @@ getElementPositioning = ($el) ->
   topCenter = center.y
   leftCenter = center.x
 
+  ## factor in elements within iframes
+  iframe = cy.state("$autIframe").get(0).getBoundingClientRect()
+
   return {
     scrollTop: el.scrollTop
     scrollLeft: el.scrollLeft
     width: rect.width
     height: rect.height
+    fromTopViewport: {
+      top: rect.top + iframe.top
+      left: rect.left + iframe.left
+      right: rect.right + iframe.right
+      bottom: rect.bottom + iframe.bottom
+      topCenter: topCenter + iframe.top
+      leftCenter: leftCenter + iframe.left
+    }
     fromViewport: {
       top: rect.top
       left: rect.left
@@ -134,7 +145,7 @@ getElementCoordinatesByPosition = ($el, position = "center") ->
   ## but also from the viewport so
   ## whoever is calling us can use it
   ## however they'd like
-  { width, height, fromViewport, fromWindow } = positionProps
+  { width, height, fromViewport, fromWindow, fromTopViewport } = positionProps
 
   ## dynamically call the function by transforming the name
   ## bottom -> getBottomCoordinates
@@ -163,6 +174,10 @@ getElementCoordinatesByPosition = ($el, position = "center") ->
     left: fromWindow.left
   })
 
+  ## HACK: fix this plz
+  fromTopViewport.x = viewportTargetCoords.x + fromTopViewport.left
+  fromTopViewport.y = viewportTargetCoords.y + fromTopViewport.top
+
   fromViewport.x = viewportTargetCoords.x
   fromViewport.y = viewportTargetCoords.y
 
@@ -175,6 +190,7 @@ getElementCoordinatesByPosition = ($el, position = "center") ->
   return {
     width
     height
+    fromTopViewport
     fromViewport
     fromWindow
   }

packages/reporter/package.json

@@ -24,26 +24,29 @@
         "babelify",
         {
           "presets": [
-            "env",
-            "react",
-            "stage-1"
+            "@babel/env",
+            "@babel/react"
           ],
           "plugins": [
             "add-module-exports",
-            "transform-decorators-legacy"
+            [
+              "@babel/plugin-proposal-class-properties",
+              {
+                "loose": true
+              }
+            ]
           ]
         }
       ]
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@cypress/react-tooltip": "0.3.1",
     "@cypress/releaser": "0.1.12",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
     "bin-up": "^1.1.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.8.0",
@@ -64,6 +67,6 @@
     "rebuild-node-sass": "^1.1.0",
     "sinon": "^1.17.4",
     "sinon-chai": "^2.8.0",
-    "zunder": "5.6.5"
+    "zunder": "5.8.2"
   }
 }

packages/runner/package.json

@@ -25,6 +25,7 @@
     "bluebird": "3.5.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.7.1",
+    "chrome-remote-interface": "^0.26.1",
     "classnames": "^2.2.5",
     "enzyme": "^2.8.2",
     "font-awesome": "^4.6.3",
@@ -41,6 +42,6 @@
     "rebuild-node-sass": "^1.1.0",
     "sinon": "^1.17.5",
     "sinon-chai": "^2.8.0",
-    "zunder": "5.6.5"
+    "zunder": "^5.8.2"
   }
 }

packages/server/lib/browsers/chrome.coffee

@@ -8,6 +8,7 @@ plugins   = require("../plugins")
 fs        = require("../util/fs")
 appData   = require("../util/app_data")
 utils     = require("./utils")
+protocol = require("./protocol")
 
 LOAD_EXTENSION = "--load-extension="
 CHROME_VERSIONS_WITH_BUGGY_ROOT_LAYER_SCROLLING = "66 67".split(" ")
@@ -185,8 +186,17 @@ module.exports = {
         ## by being the last one
         args.push("--user-data-dir=#{userDir}")
         args.push("--disk-cache-dir=#{cacheDir}")
+        ## TODO: make this a dynamic port
+        args.push("--remote-debugging-port=9222")
 
         debug("launch in chrome: %s, %s", url, args)
-
+        
         utils.launch(browserName, url, args)
+        .tap ->
+          ## TODO: pass in the port
+          protocol.getWsTargetFor()
+          .then (wsUrl) ->
+            console.log 'wsUrl', wsUrl
+            global.wsUrl = wsUrl
+
 }