WIP: scroll elements into view before asserting fast visibility

Author: cacieprins

packages/driver/src/cypress/assertions/visible.ts

@@ -0,0 +1,74 @@
+import { unwrap, isJquery } from '../../dom/jquery'
+import { assert, wrap } from './assert'
+import type { Callbacks } from './assert'
+import { scrollBehaviorOptionsMap } from '../../cy/actionability'
+import { fastIsHidden } from '../../dom/visibility/fastIsHidden'
+
+function getSubjects (ref: Chai.AssertionStatic['_obj']): HTMLElement[] {
+  const unwrapped = isJquery(ref) ? unwrap(ref) : ref
+
+  if (Array.isArray(unwrapped)) {
+    return unwrapped
+  }
+
+  return [unwrapped]
+}
+
+function checkSubjects (subjects: HTMLElement[], checkVisibility: (subject: HTMLElement) => boolean): boolean {
+  return subjects.some((subject) => {
+    const configuredScrollBehavior = Cypress.config('scrollBehavior')
+
+    if (configuredScrollBehavior !== false) {
+      const block: ScrollLogicalPosition = scrollBehaviorOptionsMap[configuredScrollBehavior]
+
+      subject.scrollIntoView({ behavior: 'instant', block })
+    }
+
+    return checkVisibility(subject)
+  })
+}
+
+export function assertVisible (
+  chaiUtils: Chai.ChaiUtils,
+  callbacks: Callbacks,
+) {
+  return function (
+    this: Chai.AssertionStatic,
+  ) {
+    const subjects = getSubjects(this._obj)
+
+    const isVisible = Cypress.config('experimentalFastVisibility') ? checkSubjects(subjects, (s) => !fastIsHidden(s)) : wrap(this).is(':visible')
+
+    return assert(
+      this,
+      chaiUtils,
+      callbacks,
+      'visible',
+      isVisible,
+      'expected #{this} to be visible',
+      'expected #{this} not to be visible',
+      'visible',
+    )
+  }
+}
+
+export function assertHidden (
+  chaiUtils: Chai.ChaiUtils,
+  callbacks: Callbacks,
+) {
+  return function (this: Chai.AssertionStatic) {
+    const subjects = getSubjects(this._obj)
+    const isHidden = Cypress.config('experimentalFastVisibility') ? checkSubjects(subjects, (s) => fastIsHidden(s)) : wrap(this).is(':hidden')
+
+    return assert(
+      this,
+      chaiUtils,
+      callbacks,
+      'hidden',
+      isHidden,
+      'expected #{this} to be hidden',
+      'expected #{this} not to be hidden',
+      'hidden',
+    )
+  }
+}

packages/driver/src/cypress/chai_jquery.ts

@@ -3,7 +3,7 @@ import $dom from '../dom'
 import $elements from '../dom/elements'
 import type { Methods, PartialAssertionArgs } from './assertions/assert'
 import { assert, assertDom, accessors, selectors, wrap } from './assertions/assert'
-
+import { assertVisible, assertHidden } from './assertions/visible'
 const maybeCastNumberToString = (num: number | string) => {
   // if this is a finite number (no Infinity or NaN)
   // cast to a string
@@ -241,6 +241,14 @@ export const $chaiJquery = (chai: Chai.ChaiStatic, chaiUtils: Chai.ChaiUtils, ca
   _.each(selectors, (selectorName, selector) => {
     const sel = selector as keyof typeof selectors
 
+    if (sel === 'visible') {
+      return chai.Assertion.addProperty(sel, assertVisible(chaiUtils, callbacks))
+    }
+
+    if (sel === 'hidden') {
+      return chai.Assertion.addProperty(sel, assertHidden(chaiUtils, callbacks))
+    }
+
     return chai.Assertion.addProperty(sel, function () {
       return assert(
         this,