@mtes-mct/monitor-ui 11.9.0 → 11.10.0

package/cypress/index.js

@@ -45,7 +45,7 @@ function findElementBytext(selector, text, { fallbackSelector, index = 0, inElem
     return foundElement;
 }
 
-const RETRIES$2 = 5;
+const RETRIES$1 = 5;
 function findButton(label, preSelector, { index, prevSubjectElement }) {
     const buttonElement = findElementBytext(`${preSelector}button`, label, {
         index,
@@ -71,7 +71,7 @@ function findButton(label, preSelector, { index, prevSubjectElement }) {
     }
     return undefined;
 }
-function clickButton(prevSubjectElements, label, { index = 0, withinSelector } = {}, leftRetries = RETRIES$2) {
+function clickButton(prevSubjectElements, label, { index = 0, withinSelector } = {}, leftRetries = RETRIES$1) {
     const prevSubjectElement = prevSubjectElements ? prevSubjectElements[0] : undefined;
     if (prevSubjectElements && !prevSubjectElements[0]) {
         throw new Error('`prevSubjectElements[0]` is undefined.');
@@ -86,7 +86,7 @@ function clickButton(prevSubjectElements, label, { index = 0, withinSelector } =
     }
     if (leftRetries > 0) {
         return cy.wait(250).then(()=>{
-            cy.log(`Retrying (${RETRIES$2 - leftRetries + 1} / ${RETRIES$2})...`);
+            cy.log(`Retrying (${RETRIES$1 - leftRetries + 1} / ${RETRIES$1})...`);
             return clickButton(prevSubjectElements, label, {
                 index,
                 withinSelector
@@ -110,598 +110,85 @@ function clickLink(linkText) {
     });
 }
 
-function _isPlaceholder(a) {
-  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
-}
-
-/**
- * Optimized internal one-arity curry function.
- *
- * @private
- * @category Function
- * @param {Function} fn The function to curry.
- * @return {Function} The curried function.
- */
-
-function _curry1(fn) {
-  return function f1(a) {
-    if (arguments.length === 0 || _isPlaceholder(a)) {
-      return f1;
-    } else {
-      return fn.apply(this, arguments);
-    }
-  };
-}
-
-/**
- * Optimized internal two-arity curry function.
- *
- * @private
- * @category Function
- * @param {Function} fn The function to curry.
- * @return {Function} The curried function.
- */
-
-function _curry2(fn) {
-  return function f2(a, b) {
-    switch (arguments.length) {
-      case 0:
-        return f2;
-
-      case 1:
-        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
-          return fn(a, _b);
-        });
-
-      default:
-        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
-          return fn(_a, b);
-        }) : _isPlaceholder(b) ? _curry1(function (_b) {
-          return fn(a, _b);
-        }) : fn(a, b);
-    }
-  };
-}
-
-/**
- * Tests whether or not an object is an array.
- *
- * @private
- * @param {*} val The object to test.
- * @return {Boolean} `true` if `val` is an array, `false` otherwise.
- * @example
- *
- *      _isArray([]); //=> true
- *      _isArray(null); //=> false
- *      _isArray({}); //=> false
- */
-var _isArray = Array.isArray || function _isArray(val) {
-  return val != null && val.length >= 0 && Object.prototype.toString.call(val) === '[object Array]';
-};
-
-function _arrayFromIterator(iter) {
-  var list = [];
-  var next;
-
-  while (!(next = iter.next()).done) {
-    list.push(next.value);
-  }
-
-  return list;
-}
-
-function _includesWith(pred, x, list) {
-  var idx = 0;
-  var len = list.length;
-
-  while (idx < len) {
-    if (pred(x, list[idx])) {
-      return true;
-    }
-
-    idx += 1;
-  }
-
-  return false;
-}
-
-function _functionName(f) {
-  // String(x => x) evaluates to "x => x", so the pattern may not match.
-  var match = String(f).match(/^function (\w*)/);
-  return match == null ? '' : match[1];
-}
-
-function _has(prop, obj) {
-  return Object.prototype.hasOwnProperty.call(obj, prop);
-}
-
-// Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-function _objectIs(a, b) {
-  // SameValue algorithm
-  if (a === b) {
-    // Steps 1-5, 7-10
-    // Steps 6.b-6.e: +0 != -0
-    return a !== 0 || 1 / a === 1 / b;
-  } else {
-    // Step 6.a: NaN == NaN
-    return a !== a && b !== b;
-  }
-}
-
-var _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
-
-var toString = Object.prototype.toString;
-
-var _isArguments =
-/*#__PURE__*/
-function () {
-  return toString.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
-    return toString.call(x) === '[object Arguments]';
-  } : function _isArguments(x) {
-    return _has('callee', x);
-  };
-}();
-
-var hasEnumBug = !
-/*#__PURE__*/
-{
-  toString: null
-}.propertyIsEnumerable('toString');
-var nonEnumerableProps = ['constructor', 'valueOf', 'isPrototypeOf', 'toString', 'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString']; // Safari bug
-
-var hasArgsEnumBug =
-/*#__PURE__*/
-function () {
-
-  return arguments.propertyIsEnumerable('length');
-}();
-
-var contains = function contains(list, item) {
-  var idx = 0;
-
-  while (idx < list.length) {
-    if (list[idx] === item) {
-      return true;
-    }
-
-    idx += 1;
-  }
-
-  return false;
-};
-/**
- * Returns a list containing the names of all the enumerable own properties of
- * the supplied object.
- * Note that the order of the output array is not guaranteed to be consistent
- * across different JS platforms.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Object
- * @sig {k: v} -> [k]
- * @param {Object} obj The object to extract properties from
- * @return {Array} An array of the object's own properties.
- * @see R.keysIn, R.values, R.toPairs
- * @example
- *
- *      R.keys({a: 1, b: 2, c: 3}); //=> ['a', 'b', 'c']
- */
-
-
-var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ?
-/*#__PURE__*/
-_curry1(function keys(obj) {
-  return Object(obj) !== obj ? [] : Object.keys(obj);
-}) :
-/*#__PURE__*/
-_curry1(function keys(obj) {
-  if (Object(obj) !== obj) {
-    return [];
-  }
-
-  var prop, nIdx;
-  var ks = [];
-
-  var checkArgsLength = hasArgsEnumBug && _isArguments(obj);
-
-  for (prop in obj) {
-    if (_has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
-      ks[ks.length] = prop;
-    }
-  }
-
-  if (hasEnumBug) {
-    nIdx = nonEnumerableProps.length - 1;
-
-    while (nIdx >= 0) {
-      prop = nonEnumerableProps[nIdx];
-
-      if (_has(prop, obj) && !contains(ks, prop)) {
-        ks[ks.length] = prop;
-      }
-
-      nIdx -= 1;
-    }
-  }
-
-  return ks;
-});
-
-/**
- * Gives a single-word string description of the (native) type of a value,
- * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
- * attempt to distinguish user Object types any further, reporting them all as
- * 'Object'.
- *
- * @func
- * @memberOf R
- * @since v0.8.0
- * @category Type
- * @sig * -> String
- * @param {*} val The value to test
- * @return {String}
- * @example
- *
- *      R.type({}); //=> "Object"
- *      R.type(1); //=> "Number"
- *      R.type(false); //=> "Boolean"
- *      R.type('s'); //=> "String"
- *      R.type(null); //=> "Null"
- *      R.type([]); //=> "Array"
- *      R.type(/[A-z]/); //=> "RegExp"
- *      R.type(() => {}); //=> "Function"
- *      R.type(async () => {}); //=> "AsyncFunction"
- *      R.type(undefined); //=> "Undefined"
- */
-
-var type =
-/*#__PURE__*/
-_curry1(function type(val) {
-  return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
-});
-
-/**
- * private _uniqContentEquals function.
- * That function is checking equality of 2 iterator contents with 2 assumptions
- * - iterators lengths are the same
- * - iterators values are unique
- *
- * false-positive result will be returned for comparison of, e.g.
- * - [1,2,3] and [1,2,3,4]
- * - [1,1,1] and [1,2,3]
- * */
-
-function _uniqContentEquals(aIterator, bIterator, stackA, stackB) {
-  var a = _arrayFromIterator(aIterator);
-
-  var b = _arrayFromIterator(bIterator);
-
-  function eq(_a, _b) {
-    return _equals(_a, _b, stackA.slice(), stackB.slice());
-  } // if *a* array contains any element that is not included in *b*
-
-
-  return !_includesWith(function (b, aItem) {
-    return !_includesWith(eq, aItem, b);
-  }, b, a);
-}
-
-function _equals(a, b, stackA, stackB) {
-  if (_objectIs$1(a, b)) {
-    return true;
-  }
-
-  var typeA = type(a);
-
-  if (typeA !== type(b)) {
-    return false;
-  }
-
-  if (typeof a['fantasy-land/equals'] === 'function' || typeof b['fantasy-land/equals'] === 'function') {
-    return typeof a['fantasy-land/equals'] === 'function' && a['fantasy-land/equals'](b) && typeof b['fantasy-land/equals'] === 'function' && b['fantasy-land/equals'](a);
-  }
-
-  if (typeof a.equals === 'function' || typeof b.equals === 'function') {
-    return typeof a.equals === 'function' && a.equals(b) && typeof b.equals === 'function' && b.equals(a);
-  }
-
-  switch (typeA) {
-    case 'Arguments':
-    case 'Array':
-    case 'Object':
-      if (typeof a.constructor === 'function' && _functionName(a.constructor) === 'Promise') {
-        return a === b;
-      }
-
-      break;
-
-    case 'Boolean':
-    case 'Number':
-    case 'String':
-      if (!(typeof a === typeof b && _objectIs$1(a.valueOf(), b.valueOf()))) {
-        return false;
-      }
-
-      break;
-
-    case 'Date':
-      if (!_objectIs$1(a.valueOf(), b.valueOf())) {
-        return false;
-      }
-
-      break;
-
-    case 'Error':
-      return a.name === b.name && a.message === b.message;
-
-    case 'RegExp':
-      if (!(a.source === b.source && a.global === b.global && a.ignoreCase === b.ignoreCase && a.multiline === b.multiline && a.sticky === b.sticky && a.unicode === b.unicode)) {
-        return false;
-      }
-
-      break;
-  }
-
-  var idx = stackA.length - 1;
-
-  while (idx >= 0) {
-    if (stackA[idx] === a) {
-      return stackB[idx] === b;
-    }
-
-    idx -= 1;
-  }
-
-  switch (typeA) {
-    case 'Map':
-      if (a.size !== b.size) {
-        return false;
-      }
-
-      return _uniqContentEquals(a.entries(), b.entries(), stackA.concat([a]), stackB.concat([b]));
-
-    case 'Set':
-      if (a.size !== b.size) {
-        return false;
-      }
-
-      return _uniqContentEquals(a.values(), b.values(), stackA.concat([a]), stackB.concat([b]));
-
-    case 'Arguments':
-    case 'Array':
-    case 'Object':
-    case 'Boolean':
-    case 'Number':
-    case 'String':
-    case 'Date':
-    case 'Error':
-    case 'RegExp':
-    case 'Int8Array':
-    case 'Uint8Array':
-    case 'Uint8ClampedArray':
-    case 'Int16Array':
-    case 'Uint16Array':
-    case 'Int32Array':
-    case 'Uint32Array':
-    case 'Float32Array':
-    case 'Float64Array':
-    case 'ArrayBuffer':
-      break;
-
-    default:
-      // Values of other types are only equal if identical.
-      return false;
-  }
-
-  var keysA = keys(a);
-
-  if (keysA.length !== keys(b).length) {
-    return false;
-  }
-
-  var extendedStackA = stackA.concat([a]);
-  var extendedStackB = stackB.concat([b]);
-  idx = keysA.length - 1;
-
-  while (idx >= 0) {
-    var key = keysA[idx];
-
-    if (!(_has(key, b) && _equals(b[key], a[key], extendedStackA, extendedStackB))) {
-      return false;
-    }
-
-    idx -= 1;
-  }
-
-  return true;
-}
-
-/**
- * Returns `true` if its arguments are equivalent, `false` otherwise. Handles
- * cyclical data structures.
- *
- * Dispatches symmetrically to the `equals` methods of both arguments, if
- * present.
- *
- * @func
- * @memberOf R
- * @since v0.15.0
- * @category Relation
- * @sig a -> b -> Boolean
- * @param {*} a
- * @param {*} b
- * @return {Boolean}
- * @example
- *
- *      R.equals(1, 1); //=> true
- *      R.equals(1, '1'); //=> false
- *      R.equals([1, 2, 3], [1, 2, 3]); //=> true
- *
- *      const a = {}; a.v = a;
- *      const b = {}; b.v = b;
- *      R.equals(a, b); //=> true
- */
-
-var equals =
-/*#__PURE__*/
-_curry2(function equals(a, b) {
-  return _equals(a, b, [], []);
-});
-
-function _isObject(x) {
-  return Object.prototype.toString.call(x) === '[object Object]';
-}
-
-function _isString(x) {
-  return Object.prototype.toString.call(x) === '[object String]';
-}
-
-/**
- * Tests whether or not an object is a typed array.
- *
- * @private
- * @param {*} val The object to test.
- * @return {Boolean} `true` if `val` is a typed array, `false` otherwise.
- * @example
- *
- *      _isTypedArray(new Uint8Array([])); //=> true
- *      _isTypedArray(new Float32Array([])); //=> true
- *      _isTypedArray([]); //=> false
- *      _isTypedArray(null); //=> false
- *      _isTypedArray({}); //=> false
- */
-function _isTypedArray(val) {
-  var type = Object.prototype.toString.call(val);
-  return type === '[object Uint8ClampedArray]' || type === '[object Int8Array]' || type === '[object Uint8Array]' || type === '[object Int16Array]' || type === '[object Uint16Array]' || type === '[object Int32Array]' || type === '[object Uint32Array]' || type === '[object Float32Array]' || type === '[object Float64Array]' || type === '[object BigInt64Array]' || type === '[object BigUint64Array]';
+function findElementParentBySelector(element, parentSelector, index = 0) {
+    let foundElement;
+    let foundElementIndex = 0;
+    const potentialParents = Cypress.$(element).parents(parentSelector);
+    potentialParents// eslint-disable-next-line func-names
+    .each(function() {
+        if (foundElementIndex === index) {
+            foundElement = this;
+            return;
+        }
+        foundElementIndex += 1;
+    });
+    return foundElement;
 }
 
-/**
- * Returns the empty value of its argument's type. Ramda defines the empty
- * value of Array (`[]`), Object (`{}`), String (`''`),
- * TypedArray (`Uint8Array []`, `Float32Array []`, etc), and Arguments. Other
- * types are supported if they define `<Type>.empty`,
- * `<Type>.prototype.empty` or implement the
- * [FantasyLand Monoid spec](https://github.com/fantasyland/fantasy-land#monoid).
- *
- * Dispatches to the `empty` method of the first argument, if present.
- *
- * @func
- * @memberOf R
- * @since v0.3.0
- * @category Function
- * @sig a -> a
- * @param {*} x
- * @return {*}
- * @example
- *
- *      R.empty(Just(42));               //=> Nothing()
- *      R.empty([1, 2, 3]);              //=> []
- *      R.empty('unicorns');             //=> ''
- *      R.empty({x: 1, y: 2});           //=> {}
- *      R.empty(Uint8Array.from('123')); //=> Uint8Array []
- */
-
-var empty =
-/*#__PURE__*/
-_curry1(function empty(x) {
-  return x != null && typeof x['fantasy-land/empty'] === 'function' ? x['fantasy-land/empty']() : x != null && x.constructor != null && typeof x.constructor['fantasy-land/empty'] === 'function' ? x.constructor['fantasy-land/empty']() : x != null && typeof x.empty === 'function' ? x.empty() : x != null && x.constructor != null && typeof x.constructor.empty === 'function' ? x.constructor.empty() : _isArray(x) ? [] : _isString(x) ? '' : _isObject(x) ? {} : _isArguments(x) ? function () {
-    return arguments;
-  }() : _isTypedArray(x) ? x.constructor.from('') : void 0 // else
-  ;
-});
-
-/**
- * Returns `true` if the given value is its type's empty value; `false`
- * otherwise.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Logic
- * @sig a -> Boolean
- * @param {*} x
- * @return {Boolean}
- * @see R.empty
- * @example
- *
- *      R.isEmpty([1, 2, 3]);           //=> false
- *      R.isEmpty([]);                  //=> true
- *      R.isEmpty('');                  //=> true
- *      R.isEmpty(null);                //=> false
- *      R.isEmpty({});                  //=> true
- *      R.isEmpty({length: 0});         //=> false
- *      R.isEmpty(Uint8Array.from('')); //=> true
- */
-
-var isEmpty =
-/*#__PURE__*/
-_curry1(function isEmpty(x) {
-  return x != null && equals(x, empty(x));
-});
-
-var isEmpty$1 = isEmpty;
-
-function checkCheckbox(checkboxInputElement, value) {
+function checkCheckbox(fieldElement, value, _label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
+        }
+    });
     if (value) {
-        cy.wrap(checkboxInputElement).scrollIntoView().check({
+        cy.wrap(fieldElement).find('input[type="checkbox"]').check({
             force: true
-        });
+        }).wait(250);
     } else {
-        cy.wrap(checkboxInputElement).scrollIntoView().uncheck({
+        cy.wrap(fieldElement).find('input[type="checkbox"]').uncheck({
             force: true
-        });
+        }).wait(250);
     }
 }
 
-const RETRIES$1 = 5;
-function checkMultiCheckboxOptions(fieldsetElement, values, leftRetries = RETRIES$1) {
-    cy.wrap(fieldsetElement).scrollIntoView();
+function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
+    cy.wrap(fieldsetElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
+        }
+    });
     cy.wrap(fieldsetElement).find('input[type="checkbox"]').uncheck({
         force: true
     }).wait(250);
-    if (fieldsetElement.querySelector('[aria-checked="true"]') && leftRetries > 0) {
-        cy.wait(250).then(()=>{
-            cy.log(`Retrying (${RETRIES$1 - leftRetries + 1} / ${RETRIES$1})...`);
-            checkMultiCheckboxOptions(fieldsetElement, values, leftRetries - 1);
-        });
+    // If `values` is undefined, we don't need to check anything
+    if (!values) {
         return;
     }
-    if (values) {
-        values.forEach((value)=>{
-            cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').check({
-                force: true
-            });
+    values.forEach((value)=>{
+        cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').check({
+            force: true
         });
-    }
+    });
+    cy.wait(250);
 }
 
-function checkMultiRadioOption(fieldsetElement, value) {
-    cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="radio"]').scrollIntoView().check({
-        force: true
-    });
+function checkMultiRadioOption(fieldsetElement, value, _label) {
+    cy.wrap(fieldsetElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
+        }
+    }).find('label').contains(value).forceClick().wait(250);
     return fieldsetElement;
 }
 
-function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple) {
+function throwError(message) {
+    throw new Error(`[monitor-ui > Cypress] ${message}`);
+}
+
+function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 4 && inputElements.length !== 6) {
-        throw new Error(`Expected to find 4 or 6 inputs within in DatePicker but found ${inputElements.length}.`);
+        throwError(`Expected to find 4 or 6 inputs within in DatePicker but found ${inputElements.length}.`);
     }
-    const hasTimeInput = inputElements.length !== 4;
-    const fieldsetElementOffsetLeft = fieldsetElement.offsetLeft ? fieldsetElement.offsetLeft : (()=>{
-        if (!fieldsetElement.offsetParent) {
-            throw new Error('`fieldsetElement.offsetParent` is undefined.');
-        }
-        return fieldsetElement.offsetParent.offsetLeft;
-    })();
-    const fieldsetElementOffsetTop = fieldsetElement.offsetTop !== 0 ? fieldsetElement.offsetTop : (()=>{
-        if (!fieldsetElement.offsetParent) {
-            throw new Error('`fieldsetElement.offsetParent` is undefined.');
-        }
-        return fieldsetElement.offsetParent.offsetTop;
-    })();
+    const hasTimeInputs = inputElements.length === 6;
+    // Empty the inputs if `dateOrDateWithTimeTuple` is undefined
     if (!dateOrDateWithTimeTuple) {
+        // -------------------------------------------------------------------------
+        // Date without time
         cy.wrap(fieldsetElement).find('[aria-label="Jour"]').clear({
             force: true
         });
@@ -711,7 +198,7 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple) {
         cy.wrap(fieldsetElement).find('[aria-label="Année"]').clear({
             force: true
         });
-        if (hasTimeInput) {
+        if (hasTimeInputs) {
             cy.wrap(fieldsetElement).find('[aria-label="Heure"]').clear({
                 force: true
             });
@@ -719,40 +206,31 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple) {
                 force: true
             });
         }
-        cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
-        cy.wait(250);
-        return;
-    }
-    const [year, month, day, hour, minute] = dateOrDateWithTimeTuple;
-    cy.wrap(fieldsetElement).find('[aria-label="Jour"]').type(String(day).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Mois"]').type(String(month).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Année"]').type(String(year));
-    if (hasTimeInput) {
-        cy.wrap(fieldsetElement).find('[aria-label="Heure"]').type(String(hour).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Minute"]').type(String(minute).padStart(2, '0'));
+    } else {
+        const [year, month, day] = dateOrDateWithTimeTuple;
+        cy.wrap(fieldsetElement).find('[aria-label="Jour"]').type(String(day).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois"]').type(String(month).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année"]').type(String(year));
+        if (hasTimeInputs) {
+            const [hour, minute] = dateOrDateWithTimeTuple.slice(3);
+            cy.wrap(fieldsetElement).find('[aria-label="Heure"]').type(String(hour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute"]').type(String(minute).padStart(2, '0'));
+        }
     }
-    cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
     cy.wait(250);
+    // Close the calendar & ranged time picker popup by pressing the escape key
+    cy.get('body').type('{esc}');
+    cy.wrap(fieldsetElement).find('.Field-DatePicker__CalendarPicker').should('not.be.visible');
+    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
 }
 
-function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange) {
+function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _label) {
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 7 && inputElements.length !== 11) {
-        throw new Error(`Expected to find 7 or 11 inputs within in DatePicker but found ${inputElements.length}.`);
+        throwError(`Expected to find 7 or 11 inputs within in DatePicker but found ${inputElements.length}.`);
     }
     const hasTimeInput = inputElements.length !== 7;
-    const fieldsetElementOffsetLeft = fieldsetElement.offsetLeft ? fieldsetElement.offsetLeft : (()=>{
-        if (!fieldsetElement.offsetParent) {
-            throw new Error('`fieldsetElement.offsetParent` is undefined.');
-        }
-        return fieldsetElement.offsetParent.offsetLeft;
-    })();
-    const fieldsetElementOffsetTop = fieldsetElement.offsetTop !== 0 ? fieldsetElement.offsetTop : (()=>{
-        if (!fieldsetElement.offsetParent) {
-            throw new Error('`fieldsetElement.offsetParent` is undefined.');
-        }
-        return fieldsetElement.offsetParent.offsetTop;
-    })();
+    // Empty the inputs if `dateOrDateWithTimeTupleRange` is undefined
     if (!dateOrDateWithTimeTupleRange) {
         cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').clear({
             force: true
@@ -788,348 +266,405 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange) {
                 force: true
             });
         }
-        cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
-        cy.wait(250);
-        return;
-    }
-    const [startDateOrDateWithTimeTuple, endDateOrDateWithTimeTuple] = dateOrDateWithTimeTupleRange;
-    const [startYear, startMonth, startDay, startHour, startMinute] = startDateOrDateWithTimeTuple;
-    const [endYear, endMonth, endDay, endHour, endMinute] = endDateOrDateWithTimeTuple;
-    cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').type(String(startDay).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').type(String(startMonth).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').type(String(startYear));
-    if (hasTimeInput) {
-        cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').type(String(startHour).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').type(String(startMinute).padStart(2, '0'));
-    }
-    cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').type(String(endDay).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').type(String(endMonth).padStart(2, '0'));
-    cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').type(String(endYear));
-    if (hasTimeInput) {
-        cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').type(String(endHour).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').type(String(endMinute).padStart(2, '0'));
+    } else {
+        const [startDateOrDateWithTimeTuple, endDateOrDateWithTimeTuple] = dateOrDateWithTimeTupleRange;
+        const [startYear, startMonth, startDay, startHour, startMinute] = startDateOrDateWithTimeTuple;
+        const [endYear, endMonth, endDay, endHour, endMinute] = endDateOrDateWithTimeTuple;
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').type(String(startDay).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').type(String(startMonth).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').type(String(startYear));
+        if (hasTimeInput) {
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').type(String(startHour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').type(String(startMinute).padStart(2, '0'));
+        }
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').type(String(endDay).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').type(String(endMonth).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').type(String(endYear));
+        if (hasTimeInput) {
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').type(String(endHour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').type(String(endMinute).padStart(2, '0'));
+        }
     }
-    cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
     cy.wait(250);
+    // Close the range calendar & ranged time picker popup by pressing the escape key
+    cy.get('body').type('{esc}');
+    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangeCalendarPicker').should('not.be.visible');
+    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
 }
 
-function fillTextarea(textareaElement, value) {
-    cy.wrap(textareaElement).scrollIntoView().clear({
-        force: true
+function fillNumberInput(fieldElement, value, _label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
+        }
     });
-    if (value) {
-        cy.wrap(textareaElement).scrollIntoView().type(value, {
-            delay: 1,
-            force: true
-        });
+    cy.wrap(fieldElement).find('input[type="number"]').clear({
+        force: true
+    }).wait(250);
+    // If `value` is undefined, we don't need to input anything
+    if (!value) {
+        return;
     }
+    cy.wrap(fieldElement).find('input[type="number"]').type(String(value), {
+        force: true
+    }).wait(250);
 }
 
-function fillTextInput(textInputElement, value) {
-    cy.wrap(textInputElement).scrollIntoView().clear({
-        force: true
+function fillTextarea(fieldElement, value, _label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
+        }
     });
-    if (value) {
-        cy.wrap(textInputElement).scrollIntoView().type(value, {
-            force: true
-        });
+    cy.wrap(fieldElement).find('textarea').clear({
+        force: true
+    }).wait(250);
+    // If `value` is undefined, we don't need to input anything
+    if (!value) {
+        return;
     }
+    cy.wrap(fieldElement).find('textarea').type(value, {
+        force: true
+    }).wait(250);
 }
 
-function pickCheckPickerOptions(cypressCheckPickerInputElement, values) {
-    cypressCheckPickerInputElement.parents('.Field-CheckPicker').then(([fieldElement])=>{
-        if (!fieldElement) {
-            throw new Error('`fieldElement` is undefined.');
-        }
-        const fieldElementOffsetLeft = fieldElement.offsetLeft ? fieldElement.offsetLeft : (()=>{
-            if (!fieldElement.offsetParent) {
-                throw new Error('`fieldElement.offsetParent` is undefined.');
-            }
-            return fieldElement.offsetParent.offsetLeft;
-        })();
-        const fieldElementOffsetTop = fieldElement.offsetTop !== 0 ? fieldElement.offsetTop : (()=>{
-            if (!fieldElement.offsetParent) {
-                throw new Error('`fieldElement.offsetParent` is undefined.');
-            }
-            return fieldElement.offsetParent.offsetTop;
-        })();
-        cy.wrap(fieldElement).scrollIntoView();
-        const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
-        if (maybeCleanButton) {
-            cy.wrap(fieldElement).find('.rs-picker-toggle-clean').forceClick().wait(250);
-        }
-        if (!values) {
-            return;
+function fillTextInput(fieldElement, value, _label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
         }
-        cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
-        cy.get('.rs-picker-check-menu').then(([CheckPickerMenuElement])=>{
-            if (!CheckPickerMenuElement) {
-                throw new Error('`CheckPickerMenuElement` is undefined.');
-            }
-            const maybeSearchInput = CheckPickerMenuElement.querySelector('.rs-picker-search-bar-input');
-            values.forEach((value)=>{
-                if (maybeSearchInput) {
-                    cy.get('.rs-picker-check-menu').find('.rs-picker-search-bar-input').type(value);
-                }
-                cy.get('.rs-picker-check-menu').find('[role="option"]').contains(value).scrollIntoView().forceClick();
-            });
-            // TODO Investigate that (this should be -1).
-            cy.clickOutside(fieldElementOffsetLeft, fieldElementOffsetTop - 16);
-            cy.wait(250);
-        });
     });
+    cy.wrap(fieldElement).find('input[type="text"]').clear({
+        force: true
+    }).wait(250);
+    // If `value` is undefined, we don't need to input anything
+    if (!value) {
+        return;
+    }
+    cy.wrap(fieldElement).find('input[type="text"]').type(value, {
+        force: true
+    }).wait(250);
 }
 
-function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
-    cypressMultiSelectInputElement.parents('.Field-MultiSelect').then(([fieldElement])=>{
-        if (!fieldElement) {
-            throw new Error('`fieldElement` is undefined.');
+function pickCheckPickerOptions(fieldElement, values, label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
         }
-        const fieldElementOffsetLeft = fieldElement.offsetLeft ? fieldElement.offsetLeft : (()=>{
-            if (!fieldElement.offsetParent) {
-                throw new Error('`fieldElement.offsetParent` is undefined.');
-            }
-            return fieldElement.offsetParent.offsetLeft;
-        })();
-        const fieldElementOffsetTop = fieldElement.offsetTop !== 0 ? fieldElement.offsetTop : (()=>{
-            if (!fieldElement.offsetParent) {
-                throw new Error('`fieldElement.offsetParent` is undefined.');
-            }
-            return fieldElement.offsetParent.offsetTop;
-        })();
-        cy.wrap(fieldElement).scrollIntoView();
-        const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
-        if (maybeCleanButton) {
-            cy.wrap(fieldElement).find('.rs-picker-toggle-clean').forceClick().wait(250);
-        }
-        if (!values) {
-            return;
+    });
+    // Clear the field if there is a clear button
+    const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
+    if (maybeClearButton) {
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
+            force: true
+        }).wait(250);
+    }
+    // If `values` is undefined, we don't need to select anything
+    if (!values) {
+        return;
+    }
+    cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
+    // Wait for the picker to open
+    cy.wrap(fieldElement).find('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
+        if (!rsuitePickerPopupElement) {
+            throwError(`Could not find '.rs-picker-popup' in in field with label "${label}". Did the picker open?`);
         }
-        cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
-        cy.get('.rs-picker-check-menu').then(([multiSelectMenuElement])=>{
-            if (!multiSelectMenuElement) {
-                throw new Error('`multiSelectMenuElement` is undefined.');
+        // Search for the value if there is a search input
+        const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
+        values.forEach((value)=>{
+            if (maybeSearchInput) {
+                cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value).wait(250);
             }
-            const maybeSearchInput = multiSelectMenuElement.querySelector('.rs-picker-search-bar-input');
-            values.forEach((value)=>{
-                if (maybeSearchInput) {
-                    cy.get('.rs-picker-check-menu').find('.rs-picker-search-bar-input').type(value);
-                }
-                cy.get('.rs-picker-check-menu').find('.rs-checkbox-checker').contains(value).scrollIntoView().forceClick();
-            });
-            // TODO Investigate that (this should be -1).
-            cy.clickOutside(fieldElementOffsetLeft, fieldElementOffsetTop - 16);
-            cy.wait(250);
+            cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
         });
+        // Close the picker popup by pressing the escape key
+        cy.get('body').type('{esc}');
+        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
     });
 }
 
-function pickSelectOption(cypressSelectInputElement, value) {
-    cypressSelectInputElement.parents('.Field-Select').scrollIntoView().then(([fieldElement])=>{
-        if (!fieldElement) {
-            throw new Error('`fieldElement` is undefined.');
+function pickMultiSelectOptions(fieldElement, values, label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
         }
-        cy.wrap(fieldElement).scrollIntoView();
-        const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
-        if (maybeCleanButton) {
-            cy.wrap(fieldElement).find('.rs-picker-toggle-clean').scrollIntoView().forceClick().wait(250);
-        }
-        if (!value) {
-            return;
+    });
+    // Clear the field if there is a clear button
+    const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
+    if (maybeClearButton) {
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
+            force: true
+        }).wait(250);
+    }
+    // If `values` is undefined, we don't need to select anything
+    if (!values) {
+        return;
+    }
+    cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
+    // Wait for the picker to open
+    cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
+        if (!rsuitePickerPopupElement) {
+            throwError(`Could not find '.rs-picker-popup' in in field with label "${label}". Did the picker open?`);
         }
-        cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
-        cy.get('.rs-picker-select-menu').then(([selectMenuElement])=>{
-            if (!selectMenuElement) {
-                throw new Error('`selectMenuElement` is undefined.');
-            }
-            const maybeSearchInput = selectMenuElement.querySelector('.rs-picker-search-bar-input');
+        const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
+        values.forEach((value)=>{
+            // Search for the value if there is a search input
             if (maybeSearchInput) {
-                cy.wrap(selectMenuElement).find('.rs-picker-search-bar-input').type(value);
+                cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value).wait(250);
             }
-            cy.wrap(selectMenuElement).get('.rs-picker-select-menu-item').contains(value).scrollIntoView().click({
-                force: true
-            });
+            cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
         });
+        // Close the picker popup by pressing the escape key
+        cy.get('body').type('{esc}');
+        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
     });
 }
 
-// I have no idea why I have to add this dirty hack of setting an external variable
-// instead of using a cleaner FP `.filter()`
-// but real experience made me think it greatly improves results stability.
-function findElementBySelector(selector, { fallbackSelector, index = 0, inElement } = {}) {
-    if (inElement) {
-        let foundElement;
-        let foundElementIndex = 0;
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        Cypress.$(inElement).find(selector)// eslint-disable-next-line func-names
-        .each(function() {
-            if (!foundElement) {
-                if (foundElementIndex < index) {
-                    foundElementIndex += 1;
-                    return;
-                }
-                foundElement = this;
-            }
-        });
-        if (!foundElement && fallbackSelector) {
-            cy.log(`⚠️ Using fallback selector: "${fallbackSelector}"`);
-            const foundElementByFallbackSelector = Cypress.$(inElement).find(fallbackSelector);
-            return foundElementByFallbackSelector;
+function pickSearchOption(fieldElement, value, _label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
         }
-        return foundElement;
+    });
+    // Clear the field if there is a clear button
+    const maybeClearButton = fieldElement.querySelector('.Field-Search__ClearButton');
+    if (maybeClearButton) {
+        cy.wrap(fieldElement).find('.Field-Search__ClearButton').click({
+            force: true
+        }).wait(250);
     }
-    let foundElement;
-    let foundElementIndex = 0;
-    // eslint-disable-next-line func-names, @typescript-eslint/no-unused-expressions
-    Cypress.$(selector).each(function() {
-        if (!foundElement) {
-            if (foundElementIndex < index) {
-                foundElementIndex += 1;
-                return;
-            }
-            foundElement = this;
+    // If the value is undefined, we don't need to select anything
+    if (!value) {
+        return;
+    }
+    // Search for the value
+    cy.wrap(fieldElement).find('input[role="combobox"]').type(value);
+    // Wait for the picker to open
+    cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
+        // Select the first picker option
+        cy.wrap(rsuitePickerPopupElement).find('[role="option"]').first().scrollIntoView().forceClick().wait(250);
+    });
+}
+
+function pickSelectOption(fieldElement, value, label) {
+    cy.wrap(fieldElement).scrollIntoView({
+        offset: {
+            left: 0,
+            top: -100
         }
     });
-    if (!foundElement && fallbackSelector) {
-        // eslint-disable-next-line no-console
-        console.warn(`Using fallback selector: "${fallbackSelector}".`);
-        const foundElementByFallbackSelector = Cypress.$(fallbackSelector);
-        return foundElementByFallbackSelector;
+    // Clear the field if there is a clear button
+    const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
+    if (maybeClearButton) {
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
+            force: true
+        }).wait(250);
     }
-    return foundElement;
+    // If the value is undefined, we don't need to select anything
+    if (!value) {
+        return;
+    }
+    // Open the picker
+    cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-caret-icon').forceClick().wait(250);
+    // Wait for the picker to open
+    cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
+        if (!rsuitePickerPopupElement) {
+            throwError(`Could not find '.rs-picker-popup' in in field with label "${label}". Did the picker open?`);
+        }
+        // Search for the value if there is a search input
+        const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
+        if (maybeSearchInput) {
+            cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value).wait(250);
+        }
+        cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick().wait(250);
+    });
 }
 
-function waitFor(inMs) {
-    return new Promise((resolve)=>{
-        setTimeout(resolve, inMs);
-    });
+const throwAssertionError = (expectedType, component)=>throwError(`\`value\` should be of type \`${expectedType}\` in \`cy.fill(label, value)\` when used on a <${component} />.`);
+function assertBooleanOrUndefined(value, component) {
+    if (value === undefined || typeof value === 'boolean') {
+        return;
+    }
+    throwAssertionError('boolean | undefined', component);
+}
+function assertDateTupleOrDateWithTimeTupleOrUndefined(value, component) {
+    if (value === undefined) {
+        return;
+    }
+    if (Array.isArray(value) && (value.length === 3 || value.length === 5) && value.every((valueItem)=>typeof valueItem === 'number')) {
+        return;
+    }
+    throwAssertionError('DateTuple | DateWithTimeTuple | undefined', component);
+}
+function assertDateRangeTupleOrDateWithTimeRangeTupleOrUndefined(value, component) {
+    if (value === undefined) {
+        return;
+    }
+    if (Array.isArray(value) && value.length === 2 && (Array.isArray(value[0]) && value[0].length === 3 && value[1].length === 3 || Array.isArray(value[0]) && value[0].length === 5 && value[1].length === 5) && value.every((valueItem)=>Array.isArray(valueItem) && valueItem.every((valueItemItem)=>typeof valueItemItem === 'number'))) {
+        return;
+    }
+    throwAssertionError('DateRangeTuple | DateWithTimeRangeTuple | undefined', component);
+}
+function assertNumberOrUndefined(value, component) {
+    if (value === undefined || typeof value === 'number') {
+        return;
+    }
+    throwAssertionError('number | undefined', component);
+}
+function assertString(value, component) {
+    if (typeof value === 'string') {
+        return;
+    }
+    throwAssertionError('string', component);
+}
+function assertStringOrUndefined(value, component) {
+    if (value === undefined || typeof value === 'string') {
+        return;
+    }
+    throwAssertionError('string | undefined', component);
+}
+function assertStringArrayOrUndefined(value, component) {
+    if (value === undefined) {
+        return;
+    }
+    if (Array.isArray(value) && value.every((valueItem)=>typeof valueItem === 'string')) {
+        return;
+    }
+    throwAssertionError('string[] | undefined', component);
 }
 
 const RETRIES = 5;
 function fill(label, value, leftRetries = RETRIES) {
     try {
-        // -------------------------------------------------------------------------
-        // If this is a `<label />` element
+        // =========================================================================
+        // If it's a field labelled by a `<label />` element
         const labelElement = findElementBytext('label', label);
         if (labelElement) {
-            // -------------------------------------------------------------------------
-            // If the label has a `for` attribute
-            if (!isEmpty$1(labelElement.htmlFor)) {
-                const htmlforElement = findElementBySelector(`[id="${labelElement.htmlFor}"]`);
-                if (!htmlforElement) {
-                    throw new Error(`Could not find the element with [id="${labelElement.htmlFor}"] targetted by label "${label}" (via its \`for\` attribute).`);
-                }
-                const cypressHtmlforElement = cy.get(`[id="${labelElement.htmlFor}"]`);
-                cypressHtmlforElement.then(()=>{
-                    if (htmlforElement.classList.contains('rs-picker-toggle-textbox')) {
-                        const rsuitePickerElement = htmlforElement.parentElement && htmlforElement.parentElement.parentElement && htmlforElement.parentElement.parentElement.parentElement ? htmlforElement.parentElement.parentElement.parentElement.parentElement : undefined;
-                        if (!rsuitePickerElement) {
-                            throw new Error('This should never happen.');
-                        }
-                        switch(true){
-                            // Select
-                            case rsuitePickerElement.classList.contains('rs-picker-select'):
-                                pickSelectOption(cypressHtmlforElement, value !== undefined ? String(value) : value);
-                                break;
-                            // Multi Select
-                            case rsuitePickerElement.classList.contains('rs-picker-tag'):
-                                pickMultiSelectOptions(cypressHtmlforElement, Array.isArray(value) && value.length > 0 ? value : undefined);
-                                break;
-                            // Check Picker
-                            case rsuitePickerElement.classList.contains('rs-picker-check'):
-                                pickCheckPickerOptions(cypressHtmlforElement, Array.isArray(value) && value.length > 0 ? value : undefined);
-                                break;
-                            default:
-                                throw new Error(`\`cy.fill()\` can't handle Rsuite picker with class "${rsuitePickerElement.className}" elements.`);
-                        }
-                        return;
-                    }
-                    switch(htmlforElement.tagName){
-                        // Text/Number Input
-                        case 'INPUT':
-                            fillTextInput(htmlforElement, value !== undefined ? String(value) : value);
-                            break;
-                        // Textarea
-                        case 'TEXTAREA':
-                            fillTextarea(htmlforElement, value !== undefined ? String(value) : value);
-                            break;
-                        default:
-                            throw new Error(`\`cy.fill()\` doesn't handle "${htmlforElement.tagName}" elements.`);
-                    }
-                });
-                return;
-            }
-            // -------------------------------------------------------------------------
-            // If the label doesn't have a `for` attribute
-            // Checkbox Input
-            const checkboxInputElement = labelElement.querySelector('input[type="checkbox"]');
-            if (checkboxInputElement) {
-                checkCheckbox(checkboxInputElement, Boolean(value));
-                return;
-            }
-            // Text Input
-            const textInputElement = labelElement.querySelector('input[type="text"]');
-            if (textInputElement) {
-                fillTextInput(textInputElement, String(value));
-                return;
+            const fieldElement = findElementParentBySelector(labelElement, '.Element-Field');
+            if (!fieldElement) {
+                throwError(`Could not find '.Element-Field' in field with label "${label}".`);
             }
-            // Textarea
-            const textareaElement = labelElement.querySelector('textarea');
-            if (textareaElement) {
-                fillTextarea(textareaElement, String(value));
-                return;
+            switch(true){
+                // ---------------------------------------------------------------------
+                // Checkbox
+                case fieldElement.classList.contains('Field-Checkbox'):
+                    assertBooleanOrUndefined(value, 'Checkbox');
+                    checkCheckbox(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // CheckPicker
+                case fieldElement.classList.contains('Field-CheckPicker'):
+                    assertStringArrayOrUndefined(value, 'CheckPicker');
+                    pickCheckPickerOptions(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // MultiSelect
+                case fieldElement.classList.contains('Field-MultiSelect'):
+                    assertStringArrayOrUndefined(value, 'MultiSelect');
+                    pickMultiSelectOptions(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // Search
+                case fieldElement.classList.contains('Field-Search'):
+                    assertStringOrUndefined(value, 'Search');
+                    pickSearchOption(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // Select
+                case fieldElement.classList.contains('Field-Select'):
+                    assertStringOrUndefined(value, 'Select');
+                    pickSelectOption(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // NumberInput
+                case fieldElement.classList.contains('Field-NumberInput'):
+                    assertNumberOrUndefined(value, 'TextInput');
+                    fillNumberInput(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                // Textarea
+                case fieldElement.classList.contains('Field-Textarea'):
+                    assertStringOrUndefined(value, 'Textarea');
+                    fillTextarea(fieldElement, value, label);
+                    return;
+                // ---------------------------------------------------------------------
+                //  TextInput
+                case fieldElement.classList.contains('Field-TextInput'):
+                    assertStringOrUndefined(value, 'TextInput');
+                    fillTextInput(fieldElement, value, label);
+                    return;
+                default:
+                    throwError(`\`cy.fill()\` can't handle field with \`<label>\` "${label}".`);
             }
-            throw new Error(`Could find neither a checkbox, an input nor a textarea with the label "${label}".`);
         }
-        // -------------------------------------------------------------------------
-        // If this is a `<legend />` element
+        // =========================================================================
+        // If it's a field labelled by a `<legend />` element
         const legendElement = findElementBytext('legend', label);
         if (legendElement) {
-            const cypressLegendElement = cy.get('legend').contains(label);
-            cypressLegendElement.then(async ()=>{
-                await waitFor(500);
-                const fieldsetElement = legendElement.parentElement;
-                if (!fieldsetElement || fieldsetElement.tagName !== 'FIELDSET') {
-                    throw new Error(`Could not find parent fieldset of legend element with text "${label}".`);
-                }
-                if (fieldsetElement.classList.contains('Field-DatePicker')) {
-                    if ((!Array.isArray(value) || value.length !== 3 && value.length !== 5 || typeof value[0] !== 'number') && value !== undefined) {
-                        throw new Error('`value` should be of type `[number, number, number]`, `[number, number, number, number, number]` or `undefined`.');
-                    }
-                    fillDatePicker(fieldsetElement, value);
+            const fieldsetElement = findElementParentBySelector(legendElement, '.Element-Fieldset');
+            if (!fieldsetElement) {
+                throwError(`Could not find '.Element-Fieldset' in field with \`<legend />\` "${label}".`);
+            }
+            switch(true){
+                // ---------------------------------------------------------------------
+                // DatePicker
+                case fieldsetElement.classList.contains('Field-DatePicker'):
+                    assertDateTupleOrDateWithTimeTupleOrUndefined(value, 'DatePicker');
+                    fillDatePicker(fieldsetElement, value, label);
                     return;
-                }
-                if (fieldsetElement.classList.contains('Field-DateRangePicker')) {
-                    if ((!Array.isArray(value) || value.length !== 2 || !Array.isArray(value[0]) || value[0].length !== 3 && value[0].length !== 5 || value[1].length !== 3 && value[1].length !== 5) && value !== undefined) {
-                        throw new Error('`value` should be of type `[[number, number, number], [number, number, number]]` or ``[[number, number, number, number, number], [number, number, number, number, number]]`` or `undefined`.');
-                    }
-                    fillDateRangePicker(fieldsetElement, value);
+                // ---------------------------------------------------------------------
+                // DateRangePicker
+                case fieldsetElement.classList.contains('Field-DateRangePicker'):
+                    assertDateRangeTupleOrDateWithTimeRangeTupleOrUndefined(value, 'DateRangePicker');
+                    fillDateRangePicker(fieldsetElement, value, label);
                     return;
-                }
-                const isMultiCheckbox = Boolean(fieldsetElement.querySelector('input[type="checkbox"]'));
-                const isMultiRadio = Boolean(fieldsetElement.querySelector('input[type="radio"]'));
-                if (isMultiCheckbox) {
-                    checkMultiCheckboxOptions(fieldsetElement, Array.isArray(value) && value.length > 0 ? value : undefined);
+                // ---------------------------------------------------------------------
+                // MultiCheckbox
+                case fieldsetElement.classList.contains('Field-MultiCheckbox'):
+                    assertStringArrayOrUndefined(value, 'MultiCheckbox');
+                    checkMultiCheckboxOptions(fieldsetElement, value, label);
                     return;
-                }
-                if (isMultiRadio) {
-                    checkMultiRadioOption(fieldsetElement, String(value));
+                // ---------------------------------------------------------------------
+                // MultiRadio
+                case fieldsetElement.classList.contains('Field-MultiRadio'):
+                    assertString(value, 'MultiRadio');
+                    checkMultiRadioOption(fieldsetElement, value, label);
                     return;
-                }
-                throw new Error(`\`cy.fill()\` can't handle the field with legend "${label}".`);
-            });
-            return;
+                default:
+                    throwError(`\`cy.fill()\` can't handle the input element in field with \`<legend>\` "${label}".`);
+            }
         }
-        throw new Error(`Could not find label or legend element with text "${label}".`);
+        throwError(`Could not find a field labelled by a \`<label />\` or \`<legend />\` "${label}".`);
     } catch (err) {
         if (leftRetries > 0) {
             cy.wait(250).then(()=>{
-                cy.log(`Retrying (${RETRIES - leftRetries + 1} / ${RETRIES})...`);
+                cy.log(`[monitor-ui > Cypress] Retrying (${RETRIES - leftRetries + 1} / ${RETRIES})...`);
                 fill(label, value, leftRetries - 1);
             });
             return;
         }
-        throw new Error(`Could not find label or legend element with text "${label}" after ${RETRIES} attempts.`);
+        const normalizedError = err instanceof Error ? err : new Error(String(err));
+        Cypress.log({
+            consoleProps: ()=>({
+                    err,
+                    label,
+                    value
+                }),
+            displayName: 'ERROR',
+            message: String(normalizedError.message),
+            name: 'fill'
+        }).error(normalizedError);
+        throwError([
+            `Could not find or fill field with label or legend "${label}" after ${RETRIES} attempts.`,
+            `This error was thrown: “${normalizedError.message}”`,
+            `Please check the Cypress "- ERROR" log above for more details.`
+        ].join('\n'));
     }
 }
 
@@ -1137,6 +672,13 @@ function forceClick([subject]) {
     if (!subject) {
         throw new Error(`Could not find subject.`);
     }
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': subject,
+                Elements: 1
+            }),
+        name: 'forceClick'
+    });
     try {
         return subject.click({
             force: true