CODEWITHSUNDEEP
javascripttestinghovercypressend-to-end
canbax
canbax

Reputation: 3856

Trigger hover on a button on the website http://ivis.cs.bilkent.edu.tr

I want to write end-to-end tests on http://ivis.cs.bilkent.edu.tr/ From the menu, I want to do "File -> Import -> Simple AF" The second menu item "Import" should work with hover. After hover, a sub-menu should be open, and then you can click on "Simple AF".

below are my simple javascript codes.

I tried everything on https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__hover-hidden-elements/cypress/integration/hover-hidden-elements-spec.js NONE WORKED!

context('Actions', () => {
  beforeEach(() => {
    cy.visit('http://ivis.cs.bilkent.edu.tr')
  });

  it('File -> Import -> Simple AF', () => {

    // click to dismiss button
    cy.get('a#dismissButton').click();
    // click to hide 
    cy.get('body').click(10, 10);

    cy.get('a.dropdown-toggle').contains('File').click();

    // BELOW LINE IS PROBLEM ! 
    cy.get('a.dropdown-toggle').contains('Import').invoke('show').click();

    cy.get('a#import-simple-af-file').click();


  });

});

I'm very new to cypress, I plan to switch to protractor.js because of this problem.

Upvotes: 0

Views: 80

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23483

Hovering is a problem, but there is an add-on library cypress-real-events that works well

cy.contains('a.dropdown-toggle', 'Import')
  .realHover();                                       // from cypress-real-events

cy.contains('a#import-simple-af-file', 'Simple AF')
  .should('be.visible')                               // add a visibility retry here
  .click();

Upvotes: 1

Related Questions