• Jobs
  • About
  • Interacting with html page elements using WebDriver September 19, 2011

    In the previous section we looked at different strategies to locate page elements using the WebDriver API. When you locate the element using the WebDriver API, you get the handle to the element as an object of the WebElement interface.

    Once we get a handle to the element, we can perform

    • Keyboard actions like type, multi select etc and
    • Mouse actions like clicking, dragging-dropping, left click etc
    Using these we can click links, set fields, move elements on the page, simulate key presses (for instance on websites that support keyboard shortcuts), right click elements and almost anything else that end users would manually do on interact with the web page.

    Here are some of the common actions your framework/ tests would have to perform.

    Clicking Elements

    The WebElement interface has a click() method. So if you would want to click an element, you would have to use findElement or findElements to find the element and call the click() method.

    Let us look at this example:

    driver.get("http://referencewebapp.qaautomation.net/");
    
    WebElement registerLink = driver.findElement(By.linkText("Register"));
    registerLink.click();
    

    Here in line 3 we got the handle to the anchor page element by looking it up using the link text. On the WebElement object we then called click() which allows us to navigate to the Registeration page. You will notice that in this case selenium handled waiting for the page transition. This is different from Selenium 1’s API where you had to explicitly call waitForPageToLoad.

    As per Selenium 2’s documentation, there are cases when the click method would not wait for the page transition. Also, if there are a lot of asynchronous calls on the new page, most of WebDriver click implementation doesn’t wait for them to complete. It would be upto you to manage the appropriate waiting logic. This is covered in more details in the next section.

    Setting form fields

    The different keyboard actions are:

    Enter text in input fields

    End users of the web application under test would type text in input fields like text fields, password fields, text area, file input field etc. To simulate the same actions, you would use the sendKeys method on the WebElement. The sendKeys method takes the characters you would want to enter in the field. For example:
    WebElement usernameField = driver.findElement(By.id("username"));
    usernameField.sendKeys("rpoonekar");
    

    Selecting value in a Drop-down/ select fields

    Drop-down fields use the same method to set values in them. The main difference is that in the sendKeys method you could pass the value or the option text as parameter to the method. For instance if your select field looked like this:

    <select name="state">
        ...
        <option value="CA">California</option>
        ...
    </select>
    

    you could set the field using either

    driver.findElement(By.name("state")).sendKeys("CA");
    

    or

    driver.findElement(By.name("state")).sendKeys("California");
    

    Selecting Radio and checkbox fields

    With choice elements, once you get a handle to the WebElement, you would need to call the click() method.

    driver.findElement(By.id("email")).click();
    

    Form Submit

    There are two way you can submit a form. The first option is locating the submit button and clicking it

    driver.findElement(By.xpath("//input[@type='submit']")).click();
    

    The second option is to call the submit() method on any field you had a reference to. If this element is within a form, WebDriver will walk up the DOM until it finds the enclosing form and then calls submit on that. If the element isn’t in a form, then the NoSuchElementException will be thrown

    WebElement state = driver.findElement(By.name("state"));
    state.sendKeys("California");
    state.submit();
    

    Of these two approaches, I recommend the first one because you are specifying precisely which element to look for and click and so it will execute faster. You are also inherently asserting if the submit element exists in the form.
    I view the second approach more than just a convenience method. The second approach can be useful when you don’t want your test to break if there are certain types of changes in the mechanism to submit the form. For instance, if the submit button is replaced with a link that submits the form. This reduces the maintenance cost of your test(s).

    Mouse actions

    Drag and Drop

    When you need to do mouse actions you could use the Mouse class. There are some common composite actions available in the Actions class. Drag and Drop is one of them. The dragAndDrop method essentially has three actions – click and hold/ mouse down, mouse move and release/ mouse up.

    Let us look at this example:

    @Test
    public void dragAndDrop() {
        driver.get("http://referencewebapp.qaautomation.net/dragndrop.php");
    
        Actions actions = new Actions(driver);
        WebElement drag = driver.findElement(By.id("draggable"));
        WebElement to = driver.findElement(By.id("droppable"));
    
        actions.dragAndDrop(drag, to);
        actions.perform();
        assertEquals("Drag-n-Drop didn't work.", "Dropped!", to.getText());
    }
    

    As you can see, the dragAndDrop methods takes two arguments, the element that you want to drag, and the element you want to drop it on.

    One of the key differences in the way Mouse is used and Actions is used is that when you call the mouse methods, it gets executed immediately. With Actions, you build the different steps and they all get executed when you call perform().

    Posted by Rahul Poonekar in : Selenium

    13 responses to “Interacting with html page elements using WebDriver”

    1. Boris says:

      I like your style. Brief and informative.
      Many thanks and waiting for the next topicks.

    2. Hagen says:

      A really good article. Helped me a lot. But the most important part (for me) is still not published: Waiting after web page interactions

      Can you give us/me a preview how to slow down Selenium?

    3. Swamy says:

      Nice explanation, uite useful for starters and exp level as well.

      Many thanks for the information.

    4. As usual great article, any day would the wait section come along?

    5. ami says:

      Very helpful article. But i’m still waiting the most important section : Waiting after web page interactions.

    6. Rahul Poonekar says:

      I am sorry it took me so long to write this up but I have finally posted the section on Waiting after web page interactions. Feedback would be appreciated!

    7. khushi says:

      Hi,

      I am trying to use this
      WebElement usernameField = driver.findElement(By.id(“username”));
      2
      usernameField.sendKeys(“rpoonekar”);

      but i am getting error on 2nd statement.
      if i change this to usernameField.sendKeys(args);
      then the error has gone. could you please tell me how to resolve

    8. khushi says:

      getting this exception while running
      Exception in thread “main” java.lang.Error: Unresolved compilation problems:
      The method sendKeys(CharSequence[]) in the type WebElement is not applicable for the arguments (String)
      The method sendKeys(CharSequence[]) in the type WebElement is not applicable for the arguments (String)

      at org.openqa.selenium.example.GmailLogin.main(GmailLogin.java:22)

    9. BrakTalk says:

      For select, shouldn’t you use the select object? Like so:

      Select select = new Select(driver.findElement(By.name(“name_of_field”)));
      select.selectByVisibleText(“item_to_select”);

    10. anusha kadambala says:

      I want to know is there any performance issue when I use findElement over find element(byId). Is there any advantage in the later one. Thankq

    11. Divya says:

      Nice Blog

    12. Hariharan says:

      hi… im having a table in my applicaiton which has unique id for the row colums. (drupal table) now my problem is

      gh

      i tried selecting the ‘gh’ word with partiallinktext but its not wotking…help me out with this and please provide more tips on how to work with drupal tables

    13. suma says:

      hi .. really good article..waiting for next topics

    Leave a Reply

    Your email address will not be published. Required fields are marked *