reactjs - Cypress 找不到 Material-UI 的文本区域

Question

我正在构建一个 React 应用程序。我将 Material-UI 版本 3.9.3 用于我的组件，将 Cypress 与 Cypress 测试库用于我的 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}
/>

当我尝试用 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");
    });

另一种选择是使用第 4 版的 Material-UI。 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');
    });