Cypress中cy.findByRole('textbox')无法找到文本输入框的问题

测试代码 #

describe('smoke', () => {
  it('should type e-mail', () => {
    cy.visit('/auth/login');
    cy.findByRole('textbox', { name: /Seu e-mail/i }).type(
      'analyst@open-cred.com'
    );
  });
});

对应HTML结构 #

<div role="group" class="chakra-form-control css-1kxonj9">
<label for="email" id="field-:r1:-label" class="chakra-form__label css-1q3y7ys" data-invalid="">E-mail</label>
<input name="email" placeholder="Seu e-mail" type="text" id="email" class="chakra-input css-9m5lgx" value="" aria-invalid="true" aria-describedby="field-:r1:-feedback">
<div id="field-:r1:-feedback" aria-live="polite" class="chakra-form__error-message css-170ki1a">Um e-mail é necessário</div>
</div>

问题原因 #

核心问题是**findByRole的name参数匹配的是元素的可访问名称（accessible name），而非placeholder文本**：

• 该输入框通过id="email"与<label for="email">关联，因此它的可访问名称是label标签内的文本E-mail，而不是placeholder的Seu e-mail。
• 你用/Seu e-mail/i去匹配name，自然无法找到目标元素。

补充：type="text"的input确实隐式拥有textbox角色，这里的定位失败和角色本身无关，完全是名称匹配错误导致的。

解决方案 #

可以通过以下几种方式修正测试：

• 匹配正确的可访问名称（label文本）

cy.findByRole('textbox', { name: /E-mail/i }).type('analyst@open-cred.com');

• 直接通过placeholder定位
  如果想基于Seu e-mail这个文本定位，改用专门的findByPlaceholderText命令：

cy.findByPlaceholderText(/Seu e-mail/i).type('analyst@open-cred.com');

• 通过label文本直接定位
  利用输入框与label的关联关系，使用findByLabelText更直观：

cy.findByLabelText(/E-mail/i).type('analyst@open-cred.com');

内容的提问来源于stack exchange，提问作者Renato N_