React项目中使用Cypress验证MUI TextField输入值失败，如何解决？

核心问题分析 #

你遇到的问题主要来自两个方面：

1. 选择器拼写错误：组件中父容器的className是create-name，但测试代码里用的是.creation-name，这会导致初始定位的元素不正确（虽然你提到视频里输入成功，可能实际代码中类名是creation-name，但仍需确保选择器与组件类名一致）。
2. 未定位到真实输入元素：MUI的TextField是封装组件，渲染后的DOM结构里，实际接收用户输入的<input>是外层容器的子元素，而非容器本身。你之前的所有断言都针对容器或标签元素，自然无法获取输入框的真实值。

修正后的测试代码 #

方案1：通过父容器定位内部input（适合类名唯一的场景）

// 修正类名拼写（确保和组件中的className一致）
cy.get('.create-name input').should('not.have.value');
const testName = 'Test name';
cy.get('.create-name input').type(testName);
// 断言输入值正确
cy.get('.create-name input').should('have.value', testName);

方案2：通过TextField的id直接定位input（更精准）

MUI的TextField会将id属性传递给内部的<input>元素，所以可以直接用id选择器定位：

cy.get('#Name').should('not.have.value');
const testName = 'Test name';
cy.get('#Name').type(testName);
cy.get('#Name').should('have.value', testName);

为什么之前的断言全部失败？ #

• .creation-name是外层div元素，没有val()方法，所以invoke('val')返回空值。
• have.text/invoke('text')获取的是元素的文本内容，而输入框的内容存储在value属性中，这两类断言天然不适用输入框。
• 若[id="Name"]定位到的是关联的label元素（MUI会自动生成label并绑定id），它的文本是Create name，自然和输入值不匹配。
• cy.contains(testName)可能因页面无匹配文本或定位到非输入框元素而失败。

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