Working with Elements | Selenide Tutorial Series

In this post, we will learn how to work with web elements using Selenide. We will look into different locator strategies such as find by ID, CSS Selector as well as XPath.

The $ command

All Selenide elements journey begins with the $ command. To work with any selector you will add $(selector) and then take any action on that selector such as .click or .setValue etc..

This is equivalent to doing driver.findElement(selector) for those of you that are familiar with Selenium Java.

---

Check out the video below to learn about how to work with elements in Selenide:

---

Find by ID

To find an element by ID in Selenide, you can do it using the By.id –

$(By.id("get-started")).click();

The above command will command will find an ID called “get-started” in the DOM and then perform a click action on it.

Find by CSS Selector

By default with Selenide, any string you add in the selector, it will consider that as a CSS Selector. For example –

$("h1")
    .shouldHave(text("Think different. Make different."));

With CSS Selector, you do not need to provide By.something which makes working with css selectors quite easy.

Find by XPath

XPath works similarly to ID, you need to specify that you are trying to find element by xpath like this –

$(By.xpath("//a[@class=\"custom-logo-link\"]"))
    .should(be(visible));

---

So these are the three most common strategies you will be using to find element in Selenide. Simply add in the $ command and provide the selector strategy after that and Selenide will take care of finding that element and returning that back to you.

---

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

• Twitter
• LinkedIn

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -