'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});
})
kendo-gridcypressui-automationvisual-studio-code


Solution 1:[1]

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()

Solution 2:[2]

Maybe you can benefit from the information available in this post:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fody
Solution 2 walgab

Related Questions