Add padding support to element#screenshot (cypress-io#4440)

Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com>
sebinsua · Sep 3, 2019 · 9c68cc8 · 9c68cc8
1 parent 1e4653b
commit 9c68cc8
Showing 1 changed file with 26 additions and 35 deletions.
diff --git a/packages/driver/src/cy/commands/screenshot.coffee b/packages/driver/src/cy/commands/screenshot.coffee
@@ -131,51 +131,46 @@ takeFullPageScreenshot = (state, automationOptions) ->
   takeScrollingScreenshots(scrolls, win, state, automationOptions)
   .finally(resetScrollOverrides)
 
-getElementWithPadding = ($el, doc, { padding }) ->
-  if not padding
-    return $el
+applyPaddingToElementPositioning = (elPosition, automationOptions) ->
+  if not automationOptions.padding
+    return elPosition
 
-  [ paddingTop, paddingRight, paddingBottom, paddingLeft ] = padding
+  [ paddingTop, paddingRight, paddingBottom, paddingLeft ] = automationOptions.padding
 
-  originalElPosition = $dom.getElementPositioning($el)
-
-  width = originalElPosition.width
-  height = originalElPosition.height
-  top = originalElPosition.fromWindow.top
-  left = originalElPosition.fromWindow.left
-
-  elWithPadding = doc.createElement('div')
-  elWithPadding.style.position = 'absolute'
-  elWithPadding.style.visibility = 'hidden'
-  elWithPadding.style.width = "#{width + paddingLeft + paddingRight}px"
-  elWithPadding.style.height = "#{height + paddingTop + paddingBottom}px"
-  elWithPadding.style.top = "#{top - paddingTop}px"
-  elWithPadding.style.left = "#{left - paddingLeft}px"
-
-  doc.body.appendChild(elWithPadding)
-
-  $(elWithPadding)
+  {
+    width: elPosition.width + paddingLeft + paddingRight
+    height: elPosition.height + paddingTop + paddingBottom
+    fromViewport: {
+      top: elPosition.fromViewport.top - paddingTop
+      left: elPosition.fromViewport.left - paddingLeft
+      bottom: elPosition.fromViewport.bottom + paddingBottom
+    }
+    fromWindow: {
+      top: elPosition.fromWindow.top - paddingTop
+    }
+  }
 
-takeElementScreenshot = ($originalEl, state, automationOptions) ->
+takeElementScreenshot = ($el, state, automationOptions) ->
   win = state("window")
   doc = state("document")
 
   resetScrollOverrides = scrollOverrides(win, doc)
 
-  viewportHeight = getViewportHeight(state)
-  viewportWidth = getViewportWidth(state)
-  $el = getElementWithPadding(
-    $originalEl
-    doc
+  elPosition = applyPaddingToElementPositioning(
+    $dom.getElementPositioning($el),
     automationOptions
   )
-  elPosition = $dom.getElementPositioning($el)
+  viewportHeight = getViewportHeight(state)
+  viewportWidth = getViewportWidth(state)
   numScreenshots = Math.ceil(elPosition.height / viewportHeight)
 
   scrolls = _.map _.times(numScreenshots), (index) ->
     y = elPosition.fromWindow.top + (viewportHeight * index)
     afterScroll = ->
-      elPosition = $dom.getElementPositioning($el)
+      elPosition = applyPaddingToElementPositioning(
+        $dom.getElementPositioning($el),
+        automationOptions
+      )
       x = Math.min(viewportWidth, elPosition.fromViewport.left)
       width = Math.min(viewportWidth - x, elPosition.width)
 
@@ -208,11 +203,7 @@ takeElementScreenshot = ($originalEl, state, automationOptions) ->
     { y, afterScroll }
 
   takeScrollingScreenshots(scrolls, win, state, automationOptions)
-  .finally(() ->
-    resetScrollOverrides()
-    if $el isnt $originalEl
-      doc.body.removeChild($el[0])
-  )
+  .finally(resetScrollOverrides)
 
 ## "app only" means we're hiding the runner UI
 isAppOnly = ({ capture }) ->