How to right click and select option in WebdriverJS?

Question

I am using Selenium WebdriverJS (NOT Java selenium and NOT Webdriver.io!), which has horrible documentation for beginners. I need to right click an element and move down to "save as", then .sendKeys() then Enter since this seems to be the only way to save an image from a web page without a full page screenshot.

I am trying to implement the following Java solution in Javascript but no dice: enter image description here

Here a few of many different versions I tried. All give me errors relating to 'Keys' or 'ARROW_DOWN' or 'DOWN'.

var webdriver = require('selenium-webdriver'),
 By = webdriver.By,
 until = webdriver.until,
 button = webdriver.Button,
 promise = webdriver.promise;
 fs = require('fs');
//Generate browser
var driver = new webdriver.Builder()
 .forBrowser('chrome')
 .build();
/******* Begin Tests*******/
//Begin test from login page
driver.manage().window().maximize();
driver.get('https://www.google.com/ncr');
driver.sleep(2000);
/*********** NONE OF THESE WORK ***********/
//Actions is not defined
var GoogleLogoImg = driver.findElement(By.css('#hplogo')).then(function() {
 driver.Actions.contextClick(GoogleLogoImg)
 .sendKeys(Keys.ARROW_DOWN)
 .sendKeys(Keys.ARROW_DOWN)
 .sendKeys(Keys.RETURN)
 .perform();
})
//Keys is not defined
var GoogleLogoImg = driver.findElement(By.css('#hplogo')).then(function() {
 driver.actions().click(button.RIGHT).perform().then(function(){
 driver.sendKeys(Keys.ENTER);
 });
});
//Not a modifier key
var GoogleLogoImg = driver.findElement(By.css('#hplogo')).then(function() {
 driver.actions().click(button.RIGHT).perform().then(function(){
 new webdriver.ActionSequence(driver).
 keyDown(webdriver.Key.ARROW_DOWN). // <-- 'Not a modifier key'
 keyUp(webdriver.Key.ARROW_DOWN).
 perform();
 });
});
//Not a modifer key
var GoogleLogoImg = driver.findElement(By.css('#hplogo')).then(function() {
 driver.actions().click(button.RIGHT).perform().then(function(){
 new webdriver.ActionSequence(driver).
 keyDown(webdriver.Key.DOWN). // <-- 'Not a modifier key'
 keyUp(webdriver.Key.DOWN).
 perform();
 });
});

• Michael Durrant: Keys is not defined, hmm how about driver.Keys.enter ?

Answer 1

Your screenshots show the web browser right-click menu, not a website-generated right-click menu. This menu can not be automated via webdriver. You would need a desktop automation solution like Sikuli.

Here is an example of a right-click menu that will work with webdriver: http://www.seleniumeasy.com/selenium-tutorials/right-click-context-menu-webdriver-example

• phansen: This link appears to go to a spam site now.

Answer 2

Under "NONE OF THESE WORK" you have 4 examples. Here I'll try to explain why they don't work.

• Actions is not defined This happens because the driver object has a method actions(), not Actions member (unlike Selenium Java). Also, your callback function in .then is missing the argument that will contain the found element.

So instead you you could use:

const Keys = webdriver.Key;
driver.findElement(By.css('#hplogo')).then(function(GoogleLogoImg) {
 driver.actions.click(GoogleLogoImg, button.RIGHT)
 .sendKeys(Keys.ARROW_DOWN, Keys.ARROW_DOWN, Keys.RETURN)
 .perform();
})

• Keys is not defined This is because in WebdriverJS the set of keys is called Key, see the first line of code in the sample above.

• Not a modifier key This is because the function keyDown expects a modifier key, such as CTRL, SHIFT, etc., and not a regular key. For regular keys use sendKeys. Also ARROW_DOWN and DOWN are synonyms, they map to the same code, \uE015.

Having said all that, @timfredo is correct in saying that this will only work for a website-generated context menu. You can display the browser context menu with click, but the key events will be sent to the original element on the page, not the menu!

Answer 3

quick google search suggests:

https://stackoverflow.com/questions/11428026/select-an-option-from-the-right-click-menu-in-selenium-webdriver-java

https://stackoverflow.com/questions/433919/javascript-simulate-right-click-through-code

What else did you tried?

• codemon: None of those work. The first one is for java, not javascript. As you can see my first attempt using actions is taken from the the first link you posted - it doesn't work. I tried it verbatim and with slight modifications for javascript. It doesn't work. Do you know of a way to implement this? (In WebdriverJS). The second link you posted asks how to invoke a right click, that's not my problem as I am able to right click, but the issue is using arrow keys to navigate the context menu.

Answer 4

If you want to right-click on any element then selenium doesn't provide any direct method for that. We need to use the Actions class provided by WebDriver. The Actions class provided by Selenium Webdriver is used to generate complex user gestures including right click, double click, drag and drop etc. Here is the code:-

Actions action = new Actions(driver);
WebElement element = driver.findElement(By.id("elementId"));
action.contextClick(element).perform();

Read more: https://softwaretestingboard.com/q2a/2547/