2

I am trying to test the selection of multiple rows using drag and select through cypress. I have tried using all possible combinations of trigger commands however mousedown doesn't work together with mouseover, also the grids are not draggable but the focus which is moving

Something like in this picture, where we select multiple rows on dragging

Something like in this picture, where we select multiple rows on dragging

Any help will be highly appreciated.

The code that I have tried is:

cy.get('ag-center-cols-container .ag-cell').eq(23)
.trigger('mousedown', {which:1, force:true})
.trigger('mousemove', {clientX:30, clientY:40, screenX:30, screenY:40, pageX:30, pageY:40, force:true})
.trigger('mouseup',{which:1,force:true});
Fody
  • 23,754
  • 3
  • 20
  • 37
Lambda25
  • 21
  • 3

1 Answers1

1

This can work with a couple of changes:

  • add cypress-real-events to perform the mouse actions

  • verify that classes on the cells have added ag-cell-range-selected

  • use realHover() to select the end-point of the selection

cy.get('.ag-center-cols-container .ag-cell').eq(2)      // choose starting cell
  .realMouseDown()
  .should('have.class', 'ag-cell-range-selected')       // wait for this class
  .realMouseMove(100, 50)

cy.get('.ag-center-cols-container .ag-cell').eq(23)     // choose ending cell
  .realHover()
  .should('have.class', 'ag-cell-range-selected')       // wait for this class
  .realMouseUp()

cy.get('.ag-cell-range-selected')
  .should('have.length', 6)                             // 3x2 cells selected 
                                                        // with 10 cells per row

Strange

The mouse move seems necessary, but it's coordinates don't have any effect on the range end-point - except if you make the coordinates too big (for me x=800), it fails.

Fody
  • 23,754
  • 3
  • 20
  • 37