A context menu (also known as a shortcut, a popup, or a pop-up menu) is a menu displayed on a web page that appears when a user performs a right-click mouse operation. For example, here is a jQuery contextMenu plug-in from http://bit.ly/1CAV05I, which displays the editing menu when a user performs a right-click operation.
The Selenium WebDriver Actions class provides the contextClick() method to perform a right-click operation. In this recipe, we will explore how to automate interaction on a context menu.
Let's implement a test that will open a context menu and select one of the menu options using the Actions class:
@Test
public void testContextMenu() {
WebElement clickMeElement = driver.findElement(By.cssSelector("div.context-menu-one.box.menu-1"));
WebElement editMenuItem = driver.findElement(By.cssSelector("li.context-menu-item.icon-edit"));
Actions builder = new Actions(driver);
builder.contextClick(clickMeElement)
.moveToElement(editMenuItem)
.click()
.perform();
WebDriverWait wait = new WebDriverWait(driver, 10);
Alert alert = wait.until(ExpectedConditions.alertIsPresent());
assertEquals("clicked: edit", alert.getText());
alert.dismiss();
}To open the context menu on right click, the Actions class provides the contextClick() method. This method will perform a right click on a specified element:
WebElement clickMeElement = driver.findElement(By.cssSelector("div.context-menu-one.box.menu-1"));
WebElement editMenuItem = driver.findElement(By.cssSelector("li.context-menu-item.icon-edit"));
Actions builder = new Actions(driver);
builder.contextClick(clickMeElement)
.moveToElement(editMenuItem)
.click()
.perform();We can then move to the desired element, in this case a <li> element, which represents one of the menu items. To perform the menu action, the click() method is called. In this example, when the click() method is called, an alert is displayed and a test checks the message on the alert box.
In the preceding example, the test finds the menu item and then performs the click operation. You might come across menus with shortcut keys. Using the Actions class, we can use a combination of mouse events and keyboard key press events to open the desired menu option. For example, the Edit menu has "e" as a shortcut key. We can open the context menu and then send the Alt + E key combination to open the menu option in following way:
@Test
public void testContextMenuWithKeys() {
WebElement clickMeElement = driver.findElement(By.cssSelector("div.context-menu-one.box.menu-1"));
Actions builder = new Actions(driver);
builder.contextClick(clickMeElement)
.sendKeys(Keys.chord(Keys.ALT, "e"))
.perform();
WebDriverWait wait = new WebDriverWait(driver, 10);
Alert alert = wait.until(ExpectedConditions.alertIsPresent());
assertEquals("clicked: edit", alert.getText());
alert.dismiss();
}