使用Cypress测试Material-UI多行TextField时无法定位可见文本框问题

这个问题我之前在处理Material-UI旧版本的多行输入框测试时也遇到过，核心原因是Material-UI 3.x的multiline TextField会渲染两个textarea元素：一个用于内部尺寸计算（带有visibility:hidden属性），另一个是用户实际可交互的可见元素。Cypress Testing Library的getByDisplayValue会匹配所有包含目标文本的元素，恰好选中了那个不可见的，所以导致type操作失败。

下面是几种保证测试可靠性的解决方案，按推荐优先级排序：

1. 用getByRole结合标签文本定位（最推荐） #

Cypress Testing Library的getByRole会优先选择可访问的、用户可交互的元素，自动忽略带有aria-hidden="true"的隐藏元素。你可以通过输入框的角色textbox和关联的标签文本Name来精准定位可见的textarea：

it('inputs some new values but resets them', () => {
  cy.visit('/');
  // 替换原getByDisplayValue为getByRole
  cy.getByRole('textbox', { name: /name/i }).type('{backspace}nard');
  cy.getByDisplayValue(/inner five/i).select('Distants');
  cy.queryByDisplayValue(/lena/i).should('not.exist');
  cy.getByDisplayValue(/lennard/i).should('exist');
  cy.getByText(/saving/i).should('exist');
  cy.getByDisplayValue(/lena/i).should('exist');
  cy.queryByDisplayValue(/lennard/i).should('not.exist');
  cy.getByText(/saved/i).should('exist');
});

这种方法完全遵循可访问性测试原则，不依赖DOM结构的细节，是最稳定可靠的方案。

2. 过滤getByDisplayValue返回的可见元素 #

如果你更习惯使用getByDisplayValue，可以在获取元素后通过:visible过滤器筛选出可见的那个：

cy.getByDisplayValue(/lena/i).filter(':visible').type('{backspace}nard');

这种方法能直接解决当前问题，但相比第一种，它依赖CSS可见性属性，语义化稍弱，不过依然比强制操作更可靠。

3. 通过TextField的ID定位内部可见textarea #

利用你给TextField设置的id="outlined-name"，结合DOM结构找到其内部的可见textarea：

cy.get('#outlined-name').find('textarea:visible').type('{backspace}nard');

注意：这种方法依赖Material-UI的内部DOM结构，如果后续版本更新调整了组件结构，测试可能会失效，所以优先级低于前两种。

避坑提醒：不要用{force: true} #

虽然错误提示里提到可以用{force: true}绕过检查，但强烈不建议这么做：那个隐藏的textarea是只读的，强制执行type不会触发组件的onChange事件，你的测试逻辑（比如状态更新、保存提示）根本不会生效，测试会变成"假通过"，完全失去可靠性。

内容的提问来源于stack exchange，提问作者J. Hesters