Using Actions Class to perform user actions

Hello Friends….

Today we will see how to handle series of events with Selenium WebDriver.

Now you will have question What is Series of events or actions and Where do I need while automating the application?

Have a look in below menu, having 2 Levels of sub menu.
http://jsfiddle.net/wanikirtesh/j40t0ptL/30/embedded/result/below is the source HTML of the page

<ul class="top">
    <li><a href="#">Menu1</a></li>
	<li><a href="#">Menu2 &gt;&gt;</a>
		<ul class="sub">
			<li><a href="#">SubMenu1</a></li>
			<li> <a href="#">SubMenu2 &gt;&gt;</a>
				<ul class="sub">
					<li><a target="_blank" href="http://www.google.com">Link to Google</a></li>
					<li><a href="http://facebook.com">Link to Facebook</a></li>
				</ul>
			</li>
			<li><a href="#">SubMenu3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu3</a>
	</li>
</ul>

I want to click on menu Menu2 >> SubMenu2 >> Link to Google

if we execute below code.

 /****Initializing WebDriver to FirefoxDriver***/
 WebDriver driver = new FirefoxDriver();
 driver.get("http://seleniumbyneeds.blogspot.in/2015/01/using-actions-to-hover-on-menu.html");
 
 // Switch to frame where the Menu Example is loaded
 driver.switchTo().frame(driver.findElement(By.id("myFiddler"))).switchTo().frame(0);
 
 //Clicking in Link
 driver.findElement(By.partialLinkText("Google")).click();
 

By executing above code we will get below error message. Because link to Google is not directly visible.

Caused by: org.openqa.selenium.NoSuchElementException: Unable to locate element: {“method”:”partial link text”,”selector”:”Google”}

to get the link visible we need 2 actions

  • Hover on Menu2, which will display SubMenu2
  • Hover on SubMenu2, which will expose or display Link to Google
  • and after that we click on link to Google

to simulate all above actions we will need Actions, this class provides lot of user actions and gestures which simulates the user interactions and events.

see below code which uses Actions class to perform above mentioned actions to click on Google Link

 WebDriver driver = new FirefoxDriver();
 driver.get("http://seleniumbyneeds.blogspot.in/2015/01/using-actions-to-hover-on-menu.html");
 
 // Switch to frame where the Menu Example is loaded
 driver.switchTo().frame(driver.findElement(By.id("myFiddler"))).switchTo().frame(0);
 
 //initializing object from Class org.openqa.selenium.interactions.Actions
 Actions myActionBuilder = new Actions(driver);
 
 //hover on Menu2
 myActionBuilder.moveToElement(driver.findElement(By.partialLinkText("Menu2"))).build().perform();
 
 //hover on SubMenu2
 myActionBuilder.moveToElement(driver.findElement(By.partialLinkText("SubMenu2"))).build().perform();
 
 //click on link
 myActionBuilder.moveToElement(driver.findElement(By.partialLinkText("Google"))).click().build().perform();
 
 

Here in this example we have used moveToElement action, which triggers the hover event on the given WebElement.


Now lets see drag and drop example in Actions

Have a look in below Example, in this we need to drag first block to second block

http://jsfiddle.net/wanikirtesh/fvnjws39/embedded/result below is the html source of the example. http://jsfiddle.net/wanikirtesh/fvnjws39/embedded/html/presentation

to perform drag and drop operation we will need below code.

 WebDriver driver = new FirefoxDriver();
 driver.get("http://seleniumbyneeds.blogspot.in/2015/01/using-actions-to-hover-on-menu.html");
 driver.switchTo().frame(driver.findElement(By.id("myDragFiddler"))).switchTo().frame(0);
 Actions myActionBuilder = new Actions(driver);
 myActionBuilder.dragAndDrop(driver.findElement(By.id("draggable")), driver.findElement(By.id("droppable"))).build().perform();
 

Like above both examples we can do lot of actions with Actions class, just play around and explore the things.

Keep Automating…..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s