Clicks handled differently in headless vs. headed (React + Material UI use case)

Current behavior:

I have test cases that click on a styled select and then click on an item in the resulting menu. When I run my tests headed, using npx cypress open, with either Chrome or Electron, the click events happen almost instantly, as expected. However, when I run the same tests headlessly, with npx cypress run, each select item click takes “timeout” seconds to complete the click. This leads to a very slow test suite when timeout is a few seconds and I have hundreds of such clicks.

Here is a video showing the headless run and unexpected behavior:

https://youtu.be/MCbIhEoN7Is

You will see the down click seems to be initiated immediately (the ripple is triggered), but it takes “timeout” ms to complete the click. (I set the defaultCommandTimeout config option to 10,000 to exaggerate the problem.)

Desired behavior:

Here is a video showing the headed run and expected behavior: https://youtu.be/vVzrdBvhnlg

Steps to reproduce:

I’m using React with Material UI. Here is the component under test in the videos:

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';

const items = ['Item 1', 'Item 2', 'Item 3'];

class App extends Component {
  state = { item: null };

  handleChange = e => this.setState({ item: e.target.value });

  render() {
    return (
      <div>
        <TextField
          select
          label="Item"
          value={this.state.item}
          onChange={this.handleChange}
          data-cy="select"
        >
          {items.map(item => (
            <MenuItem value={item} key={item} data-cy="menu-item">
              {item}
            </MenuItem>
          ))}
        </TextField>
        <p data-cy="selected-item-label">Selected: {this.state.item || 'None'}</p>
      </div>
    );
  }
}

export default App;

And here is the spec:

describe('Material UI Component Tests', () => {
  beforeEach(() => cy.visit('http://localhost:3001'));
  [0, 1, 2, 1, 0].forEach((i) => {
    it(`should select item ${i} quickly`, () => {
      cy.get('[data-cy="select"]').click()
      cy.get('[data-cy="menu-item"]').eq(i).click()
      cy.get('[data-cy="selected-item-label"]')
        .contains(`Selected: Item ${i + 1}`)
    })
  })
})

Versions

Cypress 3.0.1 Electron 59

[kuceb]

@harvitronix can you see if this is an active window issue, by running cypress run --browser chrome and then quickly clicking on a different window to take focus away from cypress? We’ve seen some specs fail in this case

[jennifer-shehane]

Hey @medric, please create a new issue detailing exactly how to reproduce the issue and we can look at it. Thanks!