The Selenium ‘click’ command

Posted by Sauce Labs

The golden rule of web application testing states that "You can find a number of bugs by simply clicking randomly on various places." This is especially true for User Interface bugs. If you are using Selenium or Selenium-RC for automating your application’s User Interface tests, it is important to know how the “Selenium.click()” command works in order to simulate user clicks.

The “Selenium.click()” command is a lesser known, yet powerful capability for testing the behavior of app UI elements, without manual intervention. For instance, we recently tested a JSP form with a few dozen dropdown lists (single and multi-select), checkboxes, and a plethora of radio buttons. Clicking each UI control manually would have been a pain in the hand. In contrast, simulating these clicks using Selenium not only saved crucial manual testing effort, it helped uncover a number of important bugs in the application as well.

How to use the Selenium Click command

To put it in simple words, the click command emulates a click operation for a link, button, checkbox or radio button. It takes a locator (an identifier for which HTML element the command refers to) as an argument.

Example: The following command invocation simulates a click on a button element named myButton

selenium.click("myButton");

Browser Support

The Selenium click command works in the following browsers:

Browser

Versions

Firefox

3, 3.5, 4

Internet Explorer

6, 7, 8, 9

Safari

3, 4, 5

Opera

9, 10, 11

Google Chrome

current

Language Support

The Selenium click command works in the following languages

Language/ Tool

Command Name

C#

selenium.Click

Java

selenium.click

PHP

$this->selenium->click

Python

self.selenium.click

Perl

$sel_click_ok

Ruby

@selenium.click

Selenium IDE

selenium.click

Challenges and Workarounds

The Selenium click command offers basic locator click functionality. Though it has several limitations, these can be overcome using the following workarounds.

  • How to click on specific coordinates?

Click command is only capable of clicking on a specific element locator. It can’t click on an element using the coordinates of the mouse event relative to the element locator. Example

selenium.clickAt("myButton", "50,50");
Moreover, it can be used to have the same effect as a click command by specifying the coordinates as “0,0”. This is especially true when using JavaScript frameworks such as extJS and GWT where a click command doesn’t work very well because it does not trigger the mouseUp event.
  • Does issuing the click command fire the onblur event?

No, it doesn’t. That’s the reason why you should use the fireEvent command in such cases. Example

selenium.FireEvent("Cancel", "click")
Sample HTML

Consider the following example as a reference point to understand how the Selenium click command works.

<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript"> function show_msg(){ alert("Selenium Rocks!"); } </script>
 </head>
 <body>
   <input type="button" id="myButton" onclick="show_msg()" value="Show Message" />
 </body>
</html>

Example Test Cases

Next, consider the following test cases to understand how the Selenium click command works in various languages. In each of the code snippets provided below, first open the application root, set the value “selenium rc” into the field named ‘q’, invoke the click command on myButton and then wait for 30 seconds for the page to load.

Python

self.selenium.open("/")
self.selenium.click("myButton")
self.selenium.wait_for_page_to_load("30000")

PHP 

$this->selenium->open("/");
$this->selenium->click("myButton");
$this->selenium->waitForPageToLoad(30000);

Ruby

@selenium.open "/"
@selenium.click "myButton"
@selenium.wait_for_page_to_load “30000

Java

selenium.open("/");
selenium.click("myButton");
selenium.waitForPageToLoad("30000");

Selenium IDE HTML Suite Test

open

/

click

myButton

waitForPageToLoad

30000

Using Selectors with Click Command

The Click command can also be used in conjunction with the following selectors.

1. css=
The CSS selector is often used with Selenium click command to uniquely identify an object or element on a web page. For example:

selenium.click("css=input[name=myButton]”)

The CSS locator is especially handy as an alternative to the XPath locator, which works painfully slowly with IE.

2. name=
As the name itself suggests, the name selector is used to click the first element with the specified @name attribute. For example:

selenium.click("name=myButton”)
3. id=
This attribute allows click on an element with the specified @id attribute. For example:
 
selenium.click("id=myButton”)

4. link=
This attribute allows clicking on a link element which contains text matching the specified pattern. For example:

selenium.click("link=myLink”)

5. xpath=
This attribute allows clicking on an element using an XPath expression. For example:

selenium.click("xpath=//input[@name=myButton' and @type='submit']")

Free Trial

Get access to a free 14-day trial version, or contact Sales for more information.