Search code examples
kendo-gridcypressui-automation

Cypress clicks on ellipsis but does not open popover

Issue - The click on the ellipsis on the table opens a small pop-over, Cypress clicks on the element but does not open the popover. Any help will be greatly appreciated.

The Application: Vue Kendo grid

enter image description here

Cypress Run

enter image description here


    <td 
     data-v-cdc7d78e="">
     <div data-v-cdc7d78e="" 
          class="d-flex flex-row-reverse">
          <svg data-v-cdc7d78e="" 
               xmlns="http://www.w3.org/2000/svg" data-icon="ellipsis-vertical" 
               data-prefix="fas" 
               aria-hidden="true" 
               focusable="false" 
               role="img" 
               viewBox="0 0 128 512" 
               class="svg-inline--fa fa-ellipsis-vertical snapshot-menu-button" 
               id="snapshot-menu-button-101">
               <path fill="currentColor" 
                     d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z">
               </path>
          </svg>
          <!---->
        </div>
    </td>

The Popover - after clicking ellipsis

    <div
      id="snapshot-menu"
      role="tooltip"
      tabindex="-1" 
      data-v-cdc7d78e class="popover b-popover-left dropdown-popover"
      x-placement="left"
      style="position: absolute; will-change: transform; top: 0px; transform:translate3d(!009px, 371px,0px);"
    <div>

Things I have tried

cy.get('#snapshot-menu-button-4').invoke('attr', 'focusable', 'true').click({force: true})

cy.get('[aria-rowindex="70"]').trigger('focus').then(() => {
    cy.get('#snapshot-menu-button-4').click({force: true});
})

cy.get('[aria-rowindex="70"]').click().then(() => {
    cy.get('#snapshot-menu-button-4').click({force: true});
});

cy.get('[aria-rowindex="70"]').trigger('mouseover').then(() => {
    cy.get('#snapshot-menu-button-4').click({force: true});
})
Solution

  • Kendo Vue Grid has a cell property that allows custom templating. Depending on how the Vue template is built, you may need to investigate the issue further. If using bootstrap, the issue may be the popover element. By default, the popover is triggered by a click event. However, if you set the triggers attribute, you override the default functionality. So you will need to add 'click' to the triggers attribute