How to click a button using Selenium

What is Selenium?

Selenium is a popular open-source tool for automating browsers, and most commonly used by developers to automate testing for their web applications. Developers write Selenium scripts to automatically navigate to a URL, fill in forms, click on buttons in order to validate that their web application behaves according to their expectation.

In this article, we’ll explain how to click a button using Selenium with code examples.

How to click on a button using Selenium

To click on a button using Selenium, first find the element that you want to click, and then use the click() command to perform a single click using the left mouse button.

Here’s an example to click a button using Selenium Java:

// click on button with the id "login-btn"
WebElement button = driver.findElement(By.id("login-btn"));
button.click();

Here's an example to click a button using Selenium Python:

# click on button with the id "login-btn"
button = driver.find_element(By.ID, "login-btn")
button.click();

Here's an example to click a button using Selenium Javascript:

// click on button with the id "login-btn"
let button = await driver.findElement(By.id('login-btn'));
await button.click();

Using different locator strategies to find a button

There are many ways to find a button using Selenium.

A locator is a way to identify a element on a web page, and it is the argument passed to the findElement method. There are several locator strategies for finding the button to click.

Finding a button to click using ID

If the ID is set for a button, you can use the ID locator strategy to find the element. Here is an example using By.id in Java:

// click on button with the id "login-btn"
WebElement button = driver.findElement(By.id("login-btn"));
button.click();

Finding a button to click using class name

If the class is set on a button, you can use the class name locator strategy to find the button. Here is an example using By.className in Java:

// click on button that has the class "add-to-cart-btn"
WebElement button = driver.findElement(By.className("add-to-cart-btn"));
button.click();

Finding a button to click by link text

If the button we want to click is a link, styled as a button, you can use the link text locator strategy to find the button. Here is an example using By.linkTextin Java:

// click on link with the text "Login"
WebElement button = driver.findElement(By.linkText("Login"));
button.click();

Finding a button to click using CSS selector

CSS selectors are expressions commonly used to define elements to style.

If you are familiar with using CSS selectors, you can use the CSS selector locator strategy to find a button in Selenium. Here’s an example using By.cssSelector in Java:

// click on button that has the "data-test-id" attribute set to "login-btn"
WebElement button = driver.findElement(By.cssSelector("button[data-test-id='login-btn']"));
button.click();

Finding a button to click using XPATH

XPATH is a powerful query language for navigating XML documents, include HTML web pages.

If you are familiar with using XPATH, you can use the XPATH locator strategy to find a button in Selenium. Here’s an example using By.xpath in Java:

// click on button that has the "data-test-id" attribute set to "login-btn"
WebElement button = driver.findElement(By.xpath("//button[@data-test-id=login-btn]"));
button.click();

Best practice on Selenium locator strategies

A lot of the complains about flaky Selenium tests that frequently break is often due to the use of unstable locator strategies to find elements.

It is highly recommended for testers and front-end developers to work together to define a setting convention in setting element locators for automated testing.

A common convention is to set a unique data-test-id attributes on elements, instead of using the element’s ID or class names which are frequently modified by frontend developers for binding javascript events and styling. That way, frontend developers will be mindful not to unintentionally remove or rename the data-test-id attributes referenced by the Selenium test scripts and accidentally breaking the tests.

Targeting buttons using user-facing labels with UI-licious

If setting up conventions for make element locators more stable is not possible for your team, you may want to consider alternative testing tools such as UIlicious, which allow you to write Keyword-Driven Tests and uses a smart element locator algorithm to find the target element. UIlicious lets you target elements based on its user-facing labels, which are generally more stable than using IDs, class names, css selectors and xpaths. Whenever the test is ran, the UIlicious algorithm analyses the structure of the HTML web page, and finds the target element using on a score calculated based on its semantics, labels, relevant attributes, surrounding text, accessibility, and closeness to identified elements for previous commands.

Here’s an example to click a button using user-facing labels with the I.click command in UIlicious:

// Navigate to github.com login page
I.goTo("https://github.com/login")

// Fill in login email and password
I.fill("Email", "[email protected]")
I.fill("Password", "supersecretpassword")

// Click the "Sign in" button
I.click("Sign in")

// Validate that error message is shown to user
I.see("Incorrect username or password.")

Here's the result of running the test using UIlicious:

UIlicious’s core philosophy is “Test User Journeys, not HTML”. We want you to rite tests that meaningful, readable, and easy to maintain. You can try UIlicious and test your website for free using UIlicious Snippets.

UIlicious Snippets is the free community edition of UIlicious Studio, a cloud-based IDE for writing, running, and continuously monitoring cross-browser tests for your web applications.