dom - 赛普拉斯：我在获取文本框“帮助！”时遇到问题。

Question

我正在尝试获取一个文本框，因此在代码中我添加了 data-cy 属性：

<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, '-')}
        />

在 DOM 中，它看起来像这样：

这在所有的文本框中添加了 data-cy，我正在寻找的一个名为 data-cy=Password-textBox，在开始时，我使用它来获取它：

cy.get('[data-cy=Password-textbox]').eq(1);

我正在使用eq(1)，因为它是具有属性 data-cy=Password-textBox 的第二个元素，但是它不起作用，但是，我使用了下面的代码并且它起作用了：

cy.get('#other-form-animator > :nth-child(4) > .rs-input-group > [data-cy=Password-textbox]');

问题是我老板不让我用最后一个。

有谁知道更好看的解决方案？为什么 [data-cy=Password-textbox]不起作用？

标签： domcss-selectorsautomated-testscypresse2e-testing

Answer 1

您正在尝试通过 css 选择器获取元素。该选择器是一个字符串，用于获取属性 - 您应该为该属性使用双引号，该属性是字符串中的一个字符串。您可以将检查菜单中的元素从字面上复制粘贴到这个 cy.get 中：

cy.get('[data-cy="Password-textbox"]').eq(1);