How to mouse over a parent and child element in cypress

user_6355561 0
Viewed 216

I am trying to automate the orangehrm website using cypress (https://opensource-demo.orangehrmlive.com/index.php/auth/login)

My usecase

  1. Login to application
  2. Hover mouse on performance tab.
  3. Hover your mouse on Configure
  4. Find and click on KPIs

I tried with cypress but somehow mouse over is not working. Kindly suggest the best way to click KPI link.

screenshots

enter image description here

enter image description here

cypress
1 Answers

The cypress-real-events library hover command works ok

cy.get('#menu__Performance')
  .realHover()

cy.contains('#menu_performance_Configure', 'Configure')
  .realHover()

cy.contains('#menu_performance_searchKpi', 'KPIs')
  .click({force:true})

cy.contains('h1', 'Search Key Performance Indicators')

Note
The last command need force because element clipping does occur.

Install

npm install cypress-real-events
//or
yarn add cypress-real-events

cypress/support/index.js

import "cypress-real-events/support";
user_168648870
Related