Cannot type PIN number into chakra pin using Cypress

user_19614632 0
Viewed 30

I'm having trouble testing Chakra stack pin inputs. This is the HTML, part of the Chakra UI library.

<div id="pin-stack" class="chakra-stack css-8vjnke">
  <input aria-label="Please enter your pin code" inputmode="numeric" type="tel" id="pin-input-:r1:-0" 
    autocomplete="one-time-code" placeholder="○" class="chakra-pin-input css-jyb0wy" value="" data-index="0">
  <input aria-label="Please enter your pin code" inputmode="numeric" type="tel" id="pin-input-:r1:-1"
    autocomplete="one-time-code" placeholder="○" class="chakra-pin-input css-jyb0wy" value="" data-index="1">
  <input aria-label="Please enter your pin code" inputmode="numeric" type="tel" id="pin-input-:r1:-2"
    autocomplete="one-time-code" placeholder="○" class="chakra-pin-input css-jyb0wy" value="" data-index="2"> 
  <input aria-label="Please enter your pin code" inputmode="numeric" type="tel" id="pin-input-:r1:-3"
    autocomplete="one-time-code" placeholder="○" class="chakra-pin-input css-jyb0wy" value="" data-index="3">
</div>

This is the test

cy.get('#pin-input-:r1:-0').type('1234')

Timed out retrying after 4000ms: Expected to find element

cypress
1 Answers

The id string has : characters in it, but this character is also used in other selectors for example :has().

The result of this is the id is being cut off at the : character.

Effectively it is using cy.get('#pin-input-') instead of cy.get('#pin-input-:r1:-0').

The other way to query with an id is to use a full attribute, putting the whole id string in quotes so that the selector does not get split up.

cy.get('[id="pin-input-:r1:-0"]').type('1234')
user_169977070
Related