Question

我正在构建一个React应用。我将Material-UI版本3.9.3用于我的组件，并将Cypress与Cypress Testing Library用于我的E2E测试。

我有一个多行<TextField />，我想为此写一些测试。当您将multiline道具赋予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}
/>

当我尝试将柏树测试作为目标时，它们失败了，因为他们说该元素不可见：

it('inputs some new values but resets them', () => {
  cy.visit('/');
  cy.getByDisplayValue(/lena/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');
});

投掷：

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.

如何在仍然提供可靠信息的情况下通过此测试？

Answer 1

尝试使用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}
/>

，然后您获得ID：

cy.get('[id="outlined-name"]')

Answer 2

您有两个主要选择。一种选择是主要利用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。 first beta version已于今天发布，并且第一个稳定版本的目标时间是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');
    });

赛普拉斯找不到Material-UI的文本区域

2 个答案: