如何使用 cypress 获取 MUI TextField 的输入值？

Question

我正在使用 cypress 来测试文本字段是否正确显示输入的文本。

cy.get('.creation-name').should('not.have.text');
const testName = 'Test name';
cy.get('.creation-name').type(`${testName}`);

TextField 是一个 MUI 组件，这是一个 React 项目。

<div className="create-name">
    <TextField
        id="Name"
        label="Create name"
        onChange={(event) => setName(event.target.value)}
    />
</div>

我可以从视频中看到文本输入正常，但是当我尝试检查它是否存在时，它失败了。我尝试了多个不同的行来获取测试文本值，包括：

//got AssertionError for all of these
cy.get('.creation-name').invoke('val').should('equal', 'Test name');//expected '' to equal Test name
cy.contains(`${testName}`).should('have.text', `${testName}`);//expected '' to equal Test name
cy.get('[id="Name"]').should('have.text', `${testName}`);//expected '' to equal Test name
cy.get('.creation-name').invoke('text').should('equal', 'Test');//expected Create name to equal Test name
cy.get('.creation-name').should('have.text', `${testName}`);//expected Create name to equal Test name

看来我没有得到任何东西，或者我正在瞄准标签。这是我第一次使用 cypress，所以我希望我没有错过任何明显的事情。

Answer 1

尝试从孩子身上获取价值<input>。

cy.get('.creation-name')  // or .create-name, maybe a typo in the question
  .find('input')
  .invoke('val')
  .should('equal', 'Test name')

与文本相关的命令contains()将不起作用，因为它是一个输入，在内部保存该值。

文本命令仅适用于在标签之间有文本的元素，例如<div>Test text</div>.