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. 
below is the source HTML of the page

<ul class="top">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2 >></a>
        <ul class="sub">
            <li><a href="#">SubMenu1</a></li>
            <li> <a href="#">SubMenu2 >></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

below is the html source of the example.
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.....

No comments: