Cypress clicks on ellipsis but does not open popover

user_1385449 0
Viewed 167

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});
})
kendo-grid cypress ui-automation
2 Answers

The id #snapshot-menu-button-4 is on the <svg> which may not have the click handler.

Try either parent element

cy.get('#snapshot-menu-button-4')
  .parent()
  .click()

// or

cy.get('#snapshot-menu-button-4')
  .parents('td')
  .click()
user_169977070

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

user_42826650
Related