Cypress can't find Material-UI's textarea

问题

I'm building a React app. I use Material-UI version 3.9.3 for my components and Cypress with Cypress Testing Library for my E2E tests.

I have a multiline <TextField /> for which I want to write some tests. When you give the multiline prop to TextField it renders for some reason three textarea tags. One of these has a visibility of hidden, but still contains a value. There is also a visible one containing the value, but further down in the tree.

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

When I try to target it with the cypress tests, they fail because they say the element isn't visible:

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

Throws:

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.

How can I get this test to pass while still providing reliable information?

回答1:

You have a couple main options. One option is to primarily leverage getByLabelText to get the element. The label is tied to the appropriate, visible element of the three so it works reliably. Then just verify the value of the textarea rather than using the value to get the element.

Example:

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

Another option would be to use version 4 of Material-UI. The first beta version was released today and the first stable release is targeted for mid-May. Textareas have been completely reworked in v4 and no longer render the two hidden textareas, so the following just works:

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

回答2:

Try with 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}
/>

and then you get it with the id:

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

来源：https://stackoverflow.com/questions/55759856/cypress-cant-find-material-uis-textarea

标签

reactjs

material-ui

cypress

react-testing-library