赛普拉斯找不到Material-UI的textarea

Question

我正在构建一个React应用程序。我使用Material-UI版本3.9.3作为我的组件，赛普拉斯使用赛普拉斯测试库进行我的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来获取元素。标签与三者中适当的可见元素相关联，因此它可靠地工作。然后只需验证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');
    });