Address some visibility issues (#4421)

* Add failing test case for visible element within overflow hidden then position absolute element.

Addresses #4395

* Write failing test case for when parent is flex and overflow hidden with el outside bounds

Addresses #4161

* Wrote failing test for visibility outside of clip-path

Addresses #1178

* Add failing tests for transform scale

Addresses #723

* Add failing test for backfact-visibility hidden example

* cs -> js fixes

* Add more specific error when el is not element

* Always return as visible when checking html or body

* Add comments + rename methods to be more exact

* Add case for isHidden when visibility is collapse

* Add failing test cases for visibility issues

* Add comment about how ensureVisibility works under the hood

* Add checks and tests for opacity: 0 to be hidden

* Simplify if/case statements to be more readable

* Expand check for offset parents to also check children of ancestor for positioning attributes

close #4395
close #755

* Fix issue where els with parents with absolute position inside overflow hidden would be calculated as not visible

* comment out opacity checks for patch release

* Add more tests around new visibility assertions

- Add case to make sure display none is not on the option or optgroup
itself

* Fix failing assertion - where el was undefined when looking for visibiliyt

* remove commented out code involving opacity 😬

packages/driver/src/cy/ensures.coffee

@@ -114,6 +114,10 @@ create = (state, expect) ->
   ensureVisibility = (subject, onFail) ->
     cmd = state("current").get("name")
 
+    # We overwrite the filter(":visible") in jquery
+    # packages/driver/src/config/jquery.coffee#L51
+    # So that this effectively calls our logic 
+    # for $dom.isVisible aka !$dom.isHidden
     if not (subject.length is subject.filter(":visible").length)
       reason = $dom.getReasonIsHidden(subject)
       node   = $dom.stringify(subject)

packages/driver/src/dom/elements.js

@@ -317,10 +317,22 @@ const isSelect = (el) => {
   return getTagName(el) === 'select'
 }
 
+const isOption = (el) => {
+  return getTagName(el) === 'option'
+}
+
+const isOptgroup = (el) => {
+  return getTagName(el) === 'optgroup'
+}
+
 const isBody = (el) => {
   return getTagName(el) === 'body'
 }
 
+const isHTML = (el) => {
+  return getTagName(el) === 'html'
+}
+
 const isSvg = function (el) {
   try {
     return 'ownerSVGElement' in el
@@ -390,6 +402,10 @@ const isAncestor = ($el, $maybeAncestor) => {
   return $el.parents().index($maybeAncestor) >= 0
 }
 
+const isChild = ($el, $maybeChild) => {
+  return $el.children().index($maybeChild) >= 0
+}
+
 const isSelector = ($el, selector) => {
   return $el.is(selector)
 }
@@ -559,10 +575,26 @@ const getFirstFocusableEl = ($el) => {
   return getFirstFocusableEl($el.parent())
 }
 
+const getFirstParentWithTagName = ($el, tagName) => {
+  // return null if we're at body/html/document
+  // cuz that means nothing has fixed position
+  if (!$el[0] || !tagName || $el.is('body,html') || $document.isDocument($el)) {
+    return null
+  }
+
+  // if we are the matching element return ourselves
+  if (getTagName($el[0]) === tagName) {
+    return $el
+  }
+
+  // else recursively continue to walk up the parent node chain
+  return getFirstParentWithTagName($el.parent(), tagName)
+}
+
 const getFirstFixedOrStickyPositionParent = ($el) => {
-  // return null if we're at body/html
+  // return null if we're at body/html/document
   // cuz that means nothing has fixed position
-  if (!$el || $el.is('body,html')) {
+  if (!$el || $el.is('body,html') || $document.isDocument($el)) {
     return null
   }
 
@@ -691,7 +723,6 @@ const getFirstDeepestElement = (elements, index = 0) => {
   }
 
   return $current
-
 }
 
 // short form css-inlines the element
@@ -773,6 +804,8 @@ module.exports = {
 
   isAncestor,
 
+  isChild,
+
   isScrollable,
 
   isTextLike,
@@ -783,8 +816,14 @@ module.exports = {
 
   isSame,
 
+  isOption,
+
+  isOptgroup,
+
   isBody,
 
+  isHTML,
+
   isInput,
 
   isTextarea,
@@ -815,6 +854,8 @@ module.exports = {
 
   getFirstDeepestElement,
 
+  getFirstParentWithTagName,
+
   getFirstFixedOrStickyPositionParent,
 
   getFirstStickyPositionParent,