Sunday, May 14, 2017

How to handle mouse and keyboard events in Selenium WebDriver

Overview

As you probably know, there are multiple operations in a webpage that you cannot cover with the basic strategies that we saw until now (Mouse operations, Drag-and-Drop…).

To perform such tasks, we will need to use an additional namespace (OpenQA.Selenium.Interactions ) that provides us the "Actions" class that we will use in the following paragraphs.

תוצאת תמונה עבור ‪How to handle mouse and keyboard events in Selenium WebDriver‬‏

Prior to the code examples, I will review the main methods of this class (There are few more that you can learn if you want to increase your knowledge):

Method Name
Description
build ()
Builds the sequence of actions that were specified so far
Click()
Clicks the mouse on last know location
Click(IWebElement)
Click the mouse on a specific element
ClickAndHold ()
Clicks and holds the mouse on last know location
ClickAndHold(IWebElement)
Click and holds the mouse on a specific element  
ContextClick ()
Right-clicks the mouse on last know location
ContextClick(IWebElement)
Right-clicks the mouse on a specific element
DoubleClick ()
Double-clicks the mouse on last know location
DoubleClick(IWebElement)
Double-clicks the mouse on specific element
DragAndDrop ()
Performs a drag-and-drop operation on one element
DragAndDropToOffset
Performs a drag-and-drop operation on one element to a specific offset
MoveToElement(IWebElement)
Moves the mouse to a specified element
Perform ()
Execute the currently build action
Release ()
Release the left mouse button from his current location
Release(IWebElement)
Release the left mouse button on the specified element

Simulating Double-Click on an element

In many cases, you will need to use the "Double-Click" event to trigger the functionality of a web element.  Selenium WebDriver API supports this operation using the Action class (C#).

The following code, will simulate a "Double-Click" event on a button, as a result, the text located in the first field, will be copied to the second one. 








HTML
<!DOCTYPE html><html><body>
<input type="text" id="TextBox1" value="Text To be Copied"><br>
<input type="text" id="TextBox2"><br><br>
<button ondblclick="CopyPaste()">Copy Text</button><script>
function CopyPaste() { document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;
}</script></body></html>

Code
[TestMethod]
public void DoubleClickEvent()
{
IWebElement button;
IWebDriver Firefox = new FirefoxDriver();
//Firefox.Navigate().GoToUrl("Webpage Address");
button = Firefox.FindElement(By.XPath("/html/body/button"));
Actions trigger = new Actions(Firefox);
trigger.MoveToElement(button).DoubleClick().Build().Perform();
}

Result: 







Simulating Mouse and Keyboard events

Selenium API supports Keystroke combinations of mouse and Keyboard events, the following code example will simulate a situation, where the user selects multiple values with "Ctrl" button and Left mouse button clicks.

In the following code example, we will use press the "Ctrl" button (Keep it pressed) and select multiple grid values with the mouse.

HTML
<select name="AnimalNames" size="5" multiple="multiple" style="width:100px">
 <option value="fo">Fox</option>
 <option value="du">Duck</option>
 <option value="sh">Shark</option>
 <option value="ti">Tigar</option>
 <option value="ea">Eagle</option>
</select>

Code
[TestMethod]
public void MouseAndKeyboardSync()
{
IWebDriver Firefox = new FirefoxDriver();
//Firefox.Navigate().GoToUrl("Webpage Address");
Firefox.Navigate().GoToUrl("file:///C:/Users/Administrator/Desktop/ddd.html");
IList<IWebElement> ListOfElements = Firefox.FindElements(By.XPath("//option"));
Actions MultipleSelectionUsingCTRL = new Actions(Firefox);
MultipleSelectionUsingCTRL.Click(ListOfElements[2]).KeyDown(Keys.Control).Click(ListOfElements[3]).Click(ListOfElements[4]).KeyDown(Keys.Control).KeyDown(Keys.Control).Build().Perform();
}

Result










Simulating Context-Menu on an element

Another basic option that you may encounter during a testing development, it when you will need to open and choose one of the options of a "Context menu" of an element.

In this code example, we will open the context menu on an element and choose the second option of "Open in a new window".

Code

[TestMethod]
public void ContextClick()
{
IWebElement WebElement;
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com");
Actions ContextClickTrigger = new Actions(Firefox);
WebElement = Firefox.FindElement(By.XPath("//a[contains(text(),'Quality Assurance')]"));
ContextClickTrigger.ContextClick(WebElement).SendKeys(Keys.Down).SendKeys(Keys.Down).SendKeys(Keys.Enter).Perform();
}


Simulating drag-and-drop operation

As we saw before, we can use the action class to simulate both simple and complex chain of events, in this code, we will perform the "drag-and-drop" operation using the " DragAndDrop" function.

Code

[TestMethod]
public void DragAndDrop()
{
IWebDriver Firefox = new FirefoxDriver();
//Firefox.Navigate().GoToUrl("Webpage Address");
Actions DragandDrop = new Actions(Firefox);
Actions builder = new Actions(Firefox);
IWebElement SourceElement = Firefox.FindElement(By.Name("source"));
IWebElement DestinationElment = Firefox.FindElement(By.Name("destination"));

Option no'1
builder.ClickAndHold(SourceElement).MoveToElement(DestinationElment).Release(DestinationElment).Build().Perform();

Option no'2
builder.DragAndDrop(SourceElement, DestinationElment).Build().Perform();
}

No comments:

Post a Comment

My Presentations