feat(cypress): add index to fill command

e2e/base/commands/fill.spec.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+
+import { Output } from '../../../.storybook/components/Output'
+import { StoryBox } from '../../../.storybook/components/StoryBox'
+import { useFieldControl, type TextInputProps, TextInput } from '../../../src'
+import { mountAndWait, outputShouldBe, outputShouldNotBe } from '../utils'
+
+function TextInputStory({ value, ...otherProps }: TextInputProps) {
+  const [outputValue, setOutputValue] = useState<string | undefined | '∅'>('∅')
+
+  const { controlledOnChange, controlledValue } = useFieldControl(value, setOutputValue)
+
+  return (
+    <>
+      <TextInput {...otherProps} value={controlledValue} />
+      <TextInput {...otherProps} onChange={controlledOnChange} value={controlledValue} />
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}
+
+context('Fill', () => {
+  const commonProps: TextInputProps = {
+    label: 'A text input',
+    name: 'myTextInput'
+  }
+
+  it('Should fill the second input', () => {
+    mountAndWait(
+      <StoryBox>
+        <TextInputStory {...commonProps} />
+      </StoryBox>
+    )
+
+    outputShouldNotBe()
+
+    cy.fill('A text input', 'abcd', { index: 1 })
+
+    outputShouldBe('abcd')
+  })
+})

src/cypress/commands/clickButton.ts

@@ -1,4 +1,4 @@
-import { findElementBytext } from '../utils/findElementBytext'
+import { findElementByText } from '../utils/findElementByText'
 
 const RETRIES = 5
 
@@ -13,7 +13,7 @@ function findButton(
     prevSubjectElement: HTMLElement | undefined
   }
 ): HTMLElement | undefined {
-  const buttonElement = findElementBytext(`${preSelector}button`, label, {
+  const buttonElement = findElementByText(`${preSelector}button`, label, {
     index,
     inElement: prevSubjectElement
   })
@@ -35,7 +35,7 @@ function findButton(
     return buttonElementByTitle as HTMLElement
   }
 
-  const menuItemElement = findElementBytext(`${preSelector}[role="menuitem"]`, label, {
+  const menuItemElement = findElementByText(`${preSelector}[role="menuitem"]`, label, {
     index,
     inElement: prevSubjectElement
   })

src/cypress/commands/fill/constants.ts

@@ -1,5 +1,6 @@
 export const DEFAULT_OPTIONS: Cypress.FillOptions = {
   delay: 10,
   force: true,
+  index: 0,
   retries: 5
 }

src/cypress/commands/fill/index.ts

@@ -23,7 +23,7 @@ import {
   assertStringArrayOrUndefined,
   assertStringOrUndefined
 } from './utils'
-import { findElementBytext } from '../../utils/findElementBytext'
+import { findElementByText } from '../../utils/findElementByText'
 import { throwError } from '../../utils/throwError'
 
 let TOTAL_RETRIES: number
@@ -46,7 +46,7 @@ export function fill(label: string, value: any, options: Partial<Cypress.FillOpt
     // =========================================================================
     // If it's a field labelled by a `<label />` element
 
-    const labelElement = findElementBytext<HTMLLabelElement>('label', label)
+    const labelElement = findElementByText<HTMLLabelElement>('label', label, { index: controlledOptions.index })
     if (labelElement) {
       const fieldElement = findElementParentBySelector<HTMLDivElement>(labelElement, '.Element-Field')
       if (!fieldElement) {
@@ -143,7 +143,7 @@ export function fill(label: string, value: any, options: Partial<Cypress.FillOpt
     // =========================================================================
     // If it's a field labelled by a `<legend />` element
 
-    const legendElement = findElementBytext<HTMLLegendElement>('legend', label)
+    const legendElement = findElementByText<HTMLLegendElement>('legend', label)
     if (legendElement) {
       const fieldsetElement = findElementParentBySelector<HTMLFieldSetElement>(legendElement, '.Element-Fieldset')
       if (!fieldsetElement) {

src/cypress/global.d.ts

@@ -115,6 +115,7 @@ declare namespace Cypress {
 
   interface FillOptions extends Forceable {
     delay: number
+    index: number
     retries: number
   }
 }

src/cypress/utils/findElementBytext.ts → src/cypress/utils/findElementByText.ts

@@ -2,7 +2,7 @@
 // instead of using a cleaner FP `.filter()`
 // but real experience made me think it greatly improves results stability.
 
-export function findElementBytext<T extends HTMLElement = HTMLElement>(
+export function findElementByText<T extends HTMLElement = HTMLElement>(
   selector: string,
   text: string,
   {