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

Question

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

我有一个多行 <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}
/>

当我尝试用 cypress 测试定位它时，它们失败了，因为它们说该元素不可见：

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

您有几个主要选择。一种选择是主要利用 getByLabelText 来获取元素。标签与三者中适当的可见元素相关联，因此它可以可靠地工作。然后只验证文本区域的值而不是使用值来获取元素。

示例：

    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');
    });

Answer 2

尝试使用 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"]')

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

Cypress can't find Material-UI's textarea

reactjs

material-ui

cypress

react-testing-library