Cypress: Need a "rightclick" command

[jennifer-shehane]

I need the ability to right click an element within Cypress so that it triggers the contextmenu event and all that entails.

[oliver3]

I would also like to have this functionality.

[oliver3]

I've created my own custom command which is working for me:

Cypress.addChildCommand('contextmenu', ($subject) => {
  const log = Cypress.Log.command({
    name: 'CONTEXTMENU'
  })

  const e = document.createEvent('HTMLEvents');
  e.initEvent('contextmenu', true, false);
  $subject[0].dispatchEvent(e);

  log.snapshot().end()
})

Usage:
cy.get('.some-item').contextmenu()

[jennifer-shehane]

Thanks for sharing @oliver3. We will soon be releasing cy.trigger() which will also help with supporting custom functionality like right-click, so be on the lookout for that! #406

[brian-mann]

With 0.20.0 it's possible to simply use cy.trigger() to trigger the contextmenu event.

cy.get('button').trigger('contextmenu', options)

[tnrich]

I still would vote for a right click helper :)

[jennifer-shehane]

The delivery of a specific .rightclick() command is part of the considerations while working on the Native Events release. You can see the progress being made here: https://github.com/cypress-io/cypress/issues/2956

[TheSerg]

Workaround

Example of triggering contextmenu event:

cy.get('#nav').first().trigger('contextmenu')

Example of right clicking on an element using jQuery

cy.get('#nav').first().invoke('trigger', 'contextmenu')

[indrajitbnikam]

Hi all,
how can I click one of the button located inside of context menu?

Thanks in advance

[Bkucera]

@indrajitbnikam if you're talking about the native context menu, then you cannot, since it's not rendered to the DOM, it's native code.

[indrajitbnikam]

@Bkucera No I'm not talking about browser's native context menu. I'm talking about context menu from our application.
My code looks like this,

cy.contains(val).first().click().trigger('contextmenu');
cy.get('si-context-menu ul').contains('li', 'Delete').first().click();

It is visible in DOM and CSS selector that I'm using points towards the same element but I'm not able to click it.
As you can see,

it indicates that elements are not visible.

[indrajitbnikam]

Hi Everyone it worked, Problem was that it was not visible unless I am moving my mouse into context menu.
I addressed the problem just by adding .trigger('mouseenter') before click.
Now my code looks like this,

cy.contains(val).first().click().trigger('contextmenu');
cy.get('si-context-menu ul').contains('li', 'Delete').first().trigger('mouseenter').click();

[loveqseven]

Is right click available in 3.4.0?

[jennifer-shehane]

@loveqseven The issue will be closed and marked with a release number when it is released. If an issue is still open, it is not released.

[loveqseven]

I tried suggestions from @oliver3 and @brian-mann, they both work for some url e.g. http://teselagen.github.io/openVectorEditor/#/Editor
However, for triggering context menu on one random point on google map it does not work, any idea, what locator I can use to trigger the context menu on some random point on google map like this? thanks

[cypress-bot[bot]]

The code for this is done in cypress-io/cypress#3030, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot[bot]]

Released in 3.5.0.

[ronaiza-cardoso]

@loveqseven are you able to use the rightclick() command on the map? I'm not. :

[nbcp]

still can't use rightclick to replace trigger('contextmenu'), it's always giving me this error:

Uncaught TypeError: Cannot read property 'id' of undefined

[Bkucera]

@nbcp could you open up an issue with some screenshots / reproducible example?

[nbcp]

I wrote it up in #5698