cypress-io · jennifer-shehane · Sep 25, 2019 · Jan 25, 2018 · Jan 16, 2019 · Feb 25, 2019
diff --git a/packages/driver/README.md b/packages/driver/README.md
@@ -55,6 +55,16 @@ cd packages/driver
 npm start
 ```
 
+If you would like to run a particular integration test, see the GUI and poke around during the test, you can an exclusive test like:
+
+```bash
+cd packages/driver
+node ../../scripts/cypress run \
+  --project ./test \
+  --spec test/cypress/integration/cypress/cy_spec.coffee \
+  --headed --no-exit
+```
+
 ## Debugging
 
 In the browser

diff --git a/packages/driver/package.json b/packages/driver/package.json
@@ -36,7 +36,7 @@
     "errorhandler": "1.5.1",
     "eventemitter2": "4.1.2",
     "express": "4.16.4",
-    "jquery": "2.2.4",
+    "jquery": "3.0.0",
     "jquery.scrollto": "2.1.2",
     "js-cookie": "2.2.0",
     "jsdom": "14.1.0",

diff --git a/packages/driver/src/cy/commands/querying.coffee b/packages/driver/src/cy/commands/querying.coffee
@@ -216,6 +216,11 @@ module.exports = (Commands, Cypress, cy, state, config) ->
         ## and catch any sizzle errors!
         try
           $el = cy.$$(selector, options.withinSubject)
+          # jQuery v3 has removed its deprecated properties like ".selector"
+          # https://jquery.com/upgrade-guide/3.0/#breaking-change-deprecated-context-and-selector-properties-removed
+          # but our error messages use this property to actually show the missing element
+          # so let's put it back
+          $el.selector = selector unless $el.selector
         catch e
           e.onFail = -> if options.log is false then e else options._log.error(e)
           throw e

diff --git a/packages/driver/src/cy/snapshots.coffee b/packages/driver/src/cy/snapshots.coffee
@@ -114,7 +114,13 @@ create = ($$, state) ->
 
   createSnapshot = (name, $elToHighlight) ->
     ## create a unique selector for this el
-    $elToHighlight.attr(HIGHLIGHT_ATTR, true) if $elToHighlight?.attr
+    ## but only IF the subject is truly an element. For example
+    ## we might be wrapping a primitive like "$([1, 2]).first()"
+    ## which arrives here as number 1
+    ## jQuery v2 allowed to silently try setting 1[HIGHLIGHT_ATTR] doing nothing
+    ## jQuery v3 runs in strict mode and throws an error if you attempt to set a property
+    canHaveAttributes = _.isElement($elToHighlight && $elToHighlight[0])
+    $elToHighlight.attr(HIGHLIGHT_ATTR, true) if canHaveAttributes and $elToHighlight?.attr
 
     ## TODO: throw error here if cy is undefined!
 
@@ -146,7 +152,7 @@ create = ($$, state) ->
     ## which would reduce memory, and some CPU operations
 
     ## now remove it after we clone
-    $elToHighlight.removeAttr(HIGHLIGHT_ATTR) if $elToHighlight?.removeAttr
+    $elToHighlight.removeAttr(HIGHLIGHT_ATTR) if canHaveAttributes and $elToHighlight?.removeAttr
 
     ## preserve attributes on the <html> tag
     htmlAttrs = getHtmlAttrs($$("html")[0])

diff --git a/packages/driver/test/cypress/integration/commands/actions/type_spec.js b/packages/driver/test/cypress/integration/commands/actions/type_spec.js
@@ -1472,7 +1472,7 @@ describe('src/cy/commands/actions/type', () => {
 
           cy.get('#generic-iframe')
           .then(($iframe) => {
-            $iframe.load(() => {
+            $iframe.on('load', () => {
               loaded = true
             })
           }).scrollIntoView()

diff --git a/packages/driver/test/cypress/integration/cy/snapshot_css_spec.js b/packages/driver/test/cypress/integration/cy/snapshot_css_spec.js
@@ -9,11 +9,7 @@ const normalizeStyles = (styles) => {
 
 const addStyles = (styles, to) => {
   return new Promise((resolve) => {
-    $(styles)
-    .load(() => {
-      return resolve()
-    })
-    .appendTo(cy.$$(to))
+    $(styles).on('load', resolve).appendTo(cy.$$(to))
   })
 }
 

diff --git a/packages/runner/src/app/app.jsx b/packages/runner/src/app/app.jsx
@@ -152,11 +152,8 @@ class App extends Component {
       containerNode.className += ' screenshotting'
 
       if (!config.scale) {
-        const $window = $(window)
-        const $iframesSizeNode = $(iframesSizeNode)
-
-        iframesSizeNode.style.width = `${Math.min($window.width(), $iframesSizeNode.width())}px`
-        iframesSizeNode.style.height = `${Math.min($window.height(), $iframesSizeNode.height())}px`
+        iframesSizeNode.style.width = `${Math.min(window.innerWidth, iframesSizeNode.offsetWidth)}px`
+        iframesSizeNode.style.height = `${Math.min(window.innerHeight, iframesSizeNode.offsetHeight)}px`
         iframesSizeNode.style.transform = null
       }
 

diff --git a/packages/server/__snapshots__/5_screenshots_spec.coffee.js b/packages/server/__snapshots__/5_screenshots_spec.coffee.js
@@ -31,6 +31,7 @@ exports['e2e screenshots passes 1'] = `
     ✓ retries each screenshot for up to  XX:XX
     ✓ ensures unique paths for non-named screenshots
     2) ensures unique paths when there's a non-named screenshot and a failure
+    ✓ properly resizes the AUT iframe
     - doesn't take a screenshot for a pending test
     clipping
       ✓ can clip app screenshots
@@ -47,7 +48,7 @@ exports['e2e screenshots passes 1'] = `
       ✓ takes another screenshot
 
 
-  17 passing
+  18 passing
   1 pending
   5 failing
 
@@ -83,12 +84,12 @@ Because this error occurred during a 'after each' hook we are skipping the remai
   (Results)
 
   ┌───────────────────────────────────────┐
-  │ Tests:        22                      │
-  │ Passing:      17                      │
+  │ Tests:        23                      │
+  │ Passing:      18                      │
   │ Failing:      4                       │
   │ Pending:      1                       │
   │ Skipped:      0                       │
-  │ Screenshots:  25                      │
+  │ Screenshots:  26                      │
   │ Video:        true                    │
   │ Duration:     X seconds               │
   │ Spec Ran:     screenshots_spec.coffee │
@@ -113,6 +114,7 @@ Because this error occurred during a 'after each' hook we are skipping the remai
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/taking screenshots -- ensures unique paths for non-named screenshots (2).png (1280x720)
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/taking screenshots -- ensures unique paths when there's a non-named screenshot and a failure.png (1000x660)
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/taking screenshots -- ensures unique paths when there's a non-named screenshot and a failure (failed).png (1280x720)
+  - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/aut-resize.png (1000x2000)
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/app-clip.png (100x50)
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/runner-clip.png (120x60)
   - /foo/bar/.projects/e2e/cypress/screenshots/screenshots_spec.coffee/fullPage-clip.png (140x70)
@@ -137,9 +139,9 @@ Because this error occurred during a 'after each' hook we are skipping the remai
 
       Spec                                                Tests  Passing  Failing  Pending  Skipped 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✖ screenshots_spec.coffee                   XX:XX       22       17        4        1        - │
+  │ ✖ screenshots_spec.coffee                   XX:XX       23       18        4        1        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    1 of 1 failed (100%)                        XX:XX       22       17        4        1        -  
+    1 of 1 failed (100%)                        XX:XX       23       18        4        1        -  
 
 
 `
diff --git a/...ges/server/test/support/fixtures/projects/e2e/cypress/integration/screenshots_spec.coffee b/...ges/server/test/support/fixtures/projects/e2e/cypress/integration/screenshots_spec.coffee
@@ -56,14 +56,18 @@ describe "taking screenshots", ->
       .screenshot("color-check", { capture: "runner" })
       .task("ensure:pixel:color", {
         devicePixelRatio
-        coords: [1, 0]
-        color: [255, 255, 255] ## white
+        colors: [{
+          coords: [1, 0]
+          color: [255, 255, 255] ## white
+        }]
         name: "screenshots_spec.coffee/color-check"
       })
       .task("ensure:pixel:color", {
         devicePixelRatio
-        coords: [0, 1]
-        color: [255, 255, 255] ## white
+        colors: [{
+          coords: [0, 1]
+          color: [255, 255, 255] ## white
+        }]
         name: "screenshots_spec.coffee/color-check"
       })
 
@@ -161,6 +165,35 @@ describe "taking screenshots", ->
     cy.screenshot({ capture: "viewport" }).then ->
       throw new Error("failing on purpose")
 
+  it "properly resizes the AUT iframe", ->
+    ## ensures that the aut iframe is not undersized by making sure the screenshot
+    ## is completely white and doesn't have the black background showing
+    cy
+    .visit("http://localhost:3322/color/white")
+    .screenshot("aut-resize")
+    .task("ensure:pixel:color", {
+      devicePixelRatio
+      colors: [
+        {
+          coords: [5, 5]
+          color: [255, 255, 255] ## white
+        }
+        {
+          coords: [1275, 5]
+          color: [255, 255, 255] ## white
+        }
+        {
+          coords: [5, 715]
+          color: [255, 255, 255] ## white
+        }
+        {
+          coords: [1275, 715]
+          color: [255, 255, 255] ## white
+        }
+      ]
+      name: "screenshots_spec.coffee/aut-resize"
+    })
+
   describe "clipping", ->
     it "can clip app screenshots", ->
       cy

diff --git a/packages/server/test/support/fixtures/projects/e2e/cypress/plugins/index.js b/packages/server/test/support/fixtures/projects/e2e/cypress/plugins/index.js
@@ -30,23 +30,25 @@ module.exports = (on) => {
       throw new Error(message)
     },
 
-    'ensure:pixel:color' ({ name, coords, color, devicePixelRatio }) {
+    'ensure:pixel:color' ({ name, colors, devicePixelRatio }) {
       const imagePath = path.join(__dirname, '..', 'screenshots', `${name}.png`)
 
       return Jimp.read(imagePath)
       .then((image) => {
-        let [x, y] = coords
+        _.each(colors, ({ coords, color }) => {
+          let [x, y] = coords
 
-        x = x * devicePixelRatio
-        y = y * devicePixelRatio
+          x = x * devicePixelRatio
+          y = y * devicePixelRatio
 
-        const pixels = Jimp.intToRGBA(image.getPixelColor(x, y))
+          const pixels = Jimp.intToRGBA(image.getPixelColor(x, y))
 
-        const { r, g, b } = pixels
+          const { r, g, b } = pixels
 
-        if (!_.isEqual(color, [r, g, b])) {
-          throw new Error(`The pixel color at coords: [${x}, ${y}] does not match the expected pixel color. The color was [${r}, ${g}, ${b}] and was expected to be [${color.join(', ')}].`)
-        }
+          if (!_.isEqual(color, [r, g, b])) {
+            throw new Error(`The pixel color at coords: [${x}, ${y}] does not match the expected pixel color. The color was [${r}, ${g}, ${b}] and was expected to be [${color.join(', ')}].`)
+          }
+        })
 
         return null
       })