Cypress: I have a issues geting a textBox "HELP!" - dom

Question

I'm trying to get a textBox so in the code I added data-cy attribute:
<login.StyledInput
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={focus}
type={type}
value={value}
disabled={disabled}
onInput={onInput}
onKeyUp={onKeyUp}
data-cy={`${text}-textbox`.replace(/\s+/g, '-')}
/>
In the DOM it looks like this:
This add data-cy in all the textBox, the one I'm looking for is named data-cy=Password-textBox, at the begin, I use this to get it:
cy.get('[data-cy=Password-textbox]').eq(1);
I'm using eq(1) because is the second element with the attribute data-cy=Password-textBox but It didn't work, however, I used the code below and It worked:
cy.get('#other-form-animator > :nth-child(4) > .rs-input-group > [data-cy=Password-textbox]');
the problem is that my boss won't let me use the last one.
Does anyone know of a better-looking solution? and Why [data-cy=Password-textbox] doesn't work?

Answer 1

You are trying to get an element by css selector. That selector is a string, this to get a property - You should use double quotation marks for the property, which is a string within the string. You can literally copy paste it from the element in the inspect menu into this cy.get:
cy.get('[data-cy="Password-textbox"]').eq(1);