Reactjs Cypress找不到材质UI的文本区域

我正在构建一个React应用程序。我的组件使用Material UI版本3.9.3，E2E测试使用Cypress with Cypress测试库

我有一个多行，我想为它编写一些测试。当您将多行属性赋予TextField时，它会出于某种原因呈现三个textarea标记。其中一个具有隐藏的可见性，但仍包含一个值。还有一个包含该值的可见值，但位于树的更下方

<TextField
  id="outlined-name"
  label="Name"
  className={classes.textField}
  value={this.state.name}
  onChange={this.handleChange('name')}
  margin="normal"
  variant="outlined"
  multiline={true}
/>

抛出：

Error:       CypressError: Timed out retrying: cy.type() failed because this element is not visible:

<textarea aria-hidden="true" class="MuiPrivateTextarea-textarea-221 MuiPrivateTextarea-shadow-222" readonly="" rows="1" tabindex="-1">Lena</textarea>

This element '<textarea.MuiPrivateTextarea-textarea-221.MuiPrivateTextarea-shadow-222>' is not visible because it has CSS property: 'visibility: hidden'

Fix this problem, or use {force: true} to disable error checking.

---

如何在提供可靠信息的同时通过此测试？

您有两个主要选择。一个选项是主要利用getByLabelText来获取元素。标签系在三个元素中适当的可见元素上，因此工作可靠。然后只验证textarea的值，而不是使用该值来获取元素

例如：

    it('inputs some new values but resets them', () => {
        cy.visit('https://50wv5x5p1x.codesandbox.io/');
        cy.getByLabelText("Name").invoke("val").should("eq", "lena");
        cy.getByLabelText("Name").type('{backspace}nard');
        cy.getByLabelText("Name").invoke("val").should("eq", "lennard");
    });

另一种选择是使用Material UI的版本4。该版本于今天发布，第一个稳定版本定于5月中旬发布。Textareas在v4中已完全重新处理，不再渲染两个隐藏的Textareas，因此以下功能可以正常工作：

    it('inputs some new values but resets them', () => {
        cy.visit('https://6lj3ymm9qw.codesandbox.io/');
        cy.getByDisplayValue(/lena/i).type('{backspace}nard');
        cy.queryByDisplayValue(/lena/i).should('not.exist');
        cy.getByDisplayValue(/lennard/i).should('exist');
    });

---

你有几个主要的选择。一个选项是主要利用getByLabelText来获取元素。标签系在三个元素中适当的可见元素上，因此工作可靠。然后只验证textarea的值，而不是使用该值来获取元素

例如：

    it('inputs some new values but resets them', () => {
        cy.visit('https://50wv5x5p1x.codesandbox.io/');
        cy.getByLabelText("Name").invoke("val").should("eq", "lena");
        cy.getByLabelText("Name").type('{backspace}nard');
        cy.getByLabelText("Name").invoke("val").should("eq", "lennard");
    });

另一种选择是使用Material UI的版本4。该版本于今天发布，第一个稳定版本定于5月中旬发布。Textareas在v4中已完全重新处理，不再渲染两个隐藏的Textareas，因此以下功能可以正常工作：

    it('inputs some new values but resets them', () => {
        cy.visit('https://6lj3ymm9qw.codesandbox.io/');
        cy.getByDisplayValue(/lena/i).type('{backspace}nard');
        cy.queryByDisplayValue(/lena/i).should('not.exist');
        cy.getByDisplayValue(/lennard/i).should('exist');
    });

尝试使用inputProps：

<TextField
  inputProps={{
    'id': "outlined-name"
  }}
  label="Name"
  className={classes.textField}
  value={this.state.name}
  onChange={this.handleChange('name')}
  margin="normal"
  variant="outlined"
  multiline={true}
/>

尝试使用inputProps：

<TextField
  inputProps={{
    'id': "outlined-name"
  }}
  label="Name"
  className={classes.textField}
  value={this.state.name}
  onChange={this.handleChange('name')}
  margin="normal"
  variant="outlined"
  multiline={true}
/>

---

请显示实际文本字段的代码，以及与您包含的cypress测试代码和错误消息对应的问题。您当前的问题不是多行的，也没有搜索的占位符文本。。。。还有，你使用的是什么版本的材料界面？@RyanCogswell对不起，我把代码复制错了。现在它是正确的。请显示实际文本字段的代码，以及与您包含的cypress测试代码和错误消息对应的问题。您当前的问题不是多行的，也没有搜索的占位符文本。。。。还有，你使用的是什么版本的材料界面？@RyanCogswell对不起，我把代码复制错了。现在它是正确的。谢谢你，瑞安。我选择升级到beta版，就像你把cypress和react测试混合在一起一样-library@AlonDahari不，这是问题中提到的。谢谢你，瑞安。我选择升级到beta版，就像你把cypress和react测试混合在一起一样-library@AlonDahari不，这是问题中指出的使用。