WebElement in Selenide

Anything present on the webpage such as textbox, text, button, link, table, radio button, checkbox etc, are called as webelement.

web elements in selenide

Before performing any action on webelement (typing, clicking, selecting etc ), selenium has to uniquely identify those elements.

How to find WebElement ?

In order to interact with UI objects with Selenide we need to be able to identify webpage elements fast and in an accurate way(sometimes uniquely). We don’t want to refactor these locators very often so we must choose the right locators from the start.

There are some browser tools that you can use in order to identify web elements in the DOM easier.

1. TryXpath for Firefox
2. Google Developer Tools for Chrome
3. Web Inspector for Safari

Sample HTML


							<html>
							<body>
								<div id="fruit"><br><br><br>
									<button id='blue' type="button">Blueberry</button><br><br>
									<button type="button" class ='ban' name='button'  >Banana</button><br><br>
									<button type="button">Strawberry</button><br><br>
									</div>
								</body>
							</html>
							

Find Element

In Selenide we can find the webpage element using $ sign, we can use all the attributes present in the element to find it. $ finds only one element, selenide performs action on the first element if there is more than one match

Find Elements

Selenide finds all the matching element when $$ sign is used to find the element. $$ finds all the mattching elements and return List <WebElements>

Find Element by CSS

Selenide consider the CSS selector as default locator

Without mentioning CSS(internall takes it as css) :

								import static com.codeborne.selenide.Selenide.*;
								public class ByCSS {
									public static void main(String[] args) {
										open("https://google.com");
										//print number of matching elements
										System.out.println("Number Of elements present :"+ $$(".gsfi").size());
										// google search bar with css selector '.' mean class
										$(".gsfi").sendKeys("sendkeys with help of class");
									}
								}
								


With CSSSelector explicit


								import static com.codeborne.selenide.Selenide.*;
								public class ByCSS {
									public static void main(String[] args) {
										open("https://google.com");
										
										//print number of matching elements
										System.out.println("Number Of elements present :"+ $$(".gsfi").size());
										
										// google search bar with css selector '.' mean class
										$(".gsfi").sendKeys("sendkeys with help of class");
									}
								}
								

Find Element By Id

We can find the web element id, below program enters first sendkeys to gogle search field


							import static com.codeborne.selenide.Selenide.*;
							import org.openqa.selenium.By;
							public class ById {
								public static void main(String[] args) {
									open("https://google.com");
									
									//print number of matching elements
									System.out.println("Number Of elements present : " + $$(By.id("lst-ib")).size());
											
									// google search bar
									$(By.id("lst-ib")).sendKeys("first sendkeys");
								}
							}
							

Find Element By Class

We can find web element using class attribute of html.


							import static com.codeborne.selenide.Selenide.*;
							import org.openqa.selenium.By;
							public class ByClass {
								public static void main(String[] args) {
									open("https://google.com");
									
									//print number of matching elements
									System.out.println("Number Of elements present :" + $$(By.className("gsfi")).size());
									
									// google search bar
									$(By.className("gsfi")).sendKeys("sendkeys with help of class");
								}
							}
							

Find Element by Name

We can find the web element with help of name attribute present in the html


							
							import static com.codeborne.selenide.Selenide.*;
							import org.openqa.selenium.By;
							public class ByName {
								public static void main(String[] args) {
									open("https://google.com");
									
									//print number of matching elements
									System.out.println("Number Of elements present : " + $$(By.name("q")).size());
									
									// google search bar using name 'q'
									$(By.name("q")).sendKeys("first sendkeys");
								}
							}
							

Find Element with TagName

We can find the web element with help of tagname present in the html


							public class ByTagName {
								public static void main(String[] args) {
									open("https://google.com");
									
									//print number of matching elements
									System.out.println("Number Of elements present : " + $$(By.tagName("input")).size());
									
									// google search bar
									$(By.tagName("input")).sendKeys("tagname locator");
								}
							}
							

Find element with Xpath

We can find the web element with help of xpath, xpath is nothing but combination of html attributes. We have great tutorial for building xpath and verifying it.


							import static com.codeborne.selenide.Selenide.*;
							import org.openqa.selenium.By;
							public class ByXpath {
								public static void main(String[] args) {
									open("https://google.com");
									
									//print number of matching elements
									System.out.println("Number Of elements present : " + $$(By.xpath("//input[@name='q']")).size());
									
									// google search bar with xpath
									$(By.xpath("//input[@name='q']")).sendKeys("xpath locator");
								}
							}
							

byText

We can find the element using text present in the element, here text mean the value present between > value < . Somtimes we feel like button have text like 'Google Search' but we manot able to find the button using byText locator as the buttons text are formed using value attrinute


										import static com.codeborne.selenide.Selenide.*;
										import static com.codeborne.selenide.Selectors.*;
										public class FindByText {
											public static void main(String[] args) {
												// open firefox browser by default
												open("https://google.com");
												
												//print number of matching elements
												System.out.println("Number Of elements present : " + $$(byText("Gmail")).size());
												
												// click the Gmail link on google page
												$(byText("Gmail")).click();
											}
										}
										

byValue

As I earliar mentioned some HTML elements are using Value to form the text, some element may use value attribute to showcase the values. Selenide provide us a byValue method to select the element based on Value attribute present in element


										import static com.codeborne.selenide.Selenide.*;
										import static com.codeborne.selenide.Selectors.*;
										public class FindByValue {
											public static void main(String[] args) {
												// open firefox browser by default
												open("https://google.com");
												$(byName("q")).sendKeys("selenium-webdriver.com");
												// click the Google Search button on google page
												$(byValue("Google Search")).click();
											}
										}
										

withText

Like Partila link text, we can find an element basedd on the partial (substring) present in the element by withText() method


										import static com.codeborne.selenide.Selectors.*;
										import static com.codeborne.selenide.Selenide.*;
										public class FindByPartialText {
											public static void main(String[] args) {
												// open firefox browser by default
												open("https://google.com");
												
												//print number of matching elements
												System.out.println("Number Of elements present : " + $$(withText("Gm")).size());
														
												// click the Gmail link with 'Gm' partial text on google page
												$(withText("Gm")).click();
											}
										}
										

byTitle

Title attribute is used for creating tooltips in html, we can find the element based on this title attribute with byTitle method in selenide


										import static com.codeborne.selenide.Selenide.*;
										import static com.codeborne.selenide.Selectors.*;
										public class FindByTitle {
											public static void main(String[] args) {
												// open firefox browser by default
												open("https://google.com");
												
												//print number of matching elements
												System.out.println("Number Of elements present : " + $$(byTitle("Google apps")).size());
														
												// click the Google apps link on google page
												$(byTitle("Google apps")).click();
											}
										}
										

You can also share knowledge by Adding a topic here



Comment / Suggestion Section

Point our Mistakes and Post Your Suggestions