Table of contents Setup Open Stackoverflow Checking visibility and enabled state of elements Let's refactor Finding elements based on text Finding using XPath Finding using linkText or partialLinkText Verifying link reference Closing the banner Finishing touches As I promised, we will start coding in this section as soon as possible. In case you missed , I highly recommend reading it beforehand, as I have provided many reasons why you should give Selenide a try. my previous article Setup You will need the Java Development Kit. I suggest getting the latest . Open JDK 17 As an IDE, I am using , but you can use anything you like. Besides IntelliJ, and are the most popular ones. IntelliJ IDEA Eclipse Visual Studio Code For source code management I use , you can find the project on . Git GitHub I usually use Maven for Java projects, but this is the perfect opportunity to learn something new, so I will use this time. In case I make any stupid mistake with Gradle, do not hesitate to tell me 😉 Gradle As Java testing framework TestNG and JUnit are the most popular ones. I will go with I will provide the required info for JUnit 5 as well. That's all you will need for the project. TestNG but Let's continue with creating a Gradle project and opening the file. Let's add the dependencies: build.gradle dependencies {
    testImplementation 'org.testng:testng:7.5'
    implementation 'com.codeborne:selenide:6.2.1'
    implementation 'org.seleniumhq.selenium:selenium-java:4.1.1'
} For JUnit: dependencies {
    testImplementation 'org.junit.jupiter:junit-jupiter-api:5.8.2'
    testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.8.2'
    implementation 'com.codeborne:selenide:6.2.1'
    implementation 'org.seleniumhq.selenium:selenium-java:4.1.1'
} Specify to use TestNG: test {
    useTestNG()
} for JUnit: test {
    useJUnitPlatform()
} We are ready to go. Only one question remains. Which site will we test? Have you ever enrolled in a highly rated course to learn about test automation just to realize half of the pages which were used as examples in the course are not existing anymore or have been changed completely? Well, it happened to me. My choice is (almost) all developers' second favourite site (right after Google) . My third favourite is if you are interested 😊. I am pretty sure Stackoverflow won't disappear in the near future, but of course, I cannot guarantee it won't change its design. Stackoverflow Baeldung It is time to write our first test. Yayyy. Let's start with something simple. Open Stackoverflow Using you do not have to use the WebDriver directly as it is for us using by default. We can open the page with one single line without any extra configuration. Selenide automatically opening and closing the browser Chrome @Test
public void openPage() {
    open("https://stackoverflow.com/");
} Just run the test and you will see Stackoverflow opening and then closing immediately. Whenever I develop and look for DOM elements, Let's do this now. I prefer to open the same page in my browser in incognito mode so I can see exactly the same result I would see whenever I open it via Selenide. The first thing I notice is that we have an accept cookie banner on this page. As in these days, we have something similar on every website, let's accept the cookie. But before that let's finish our first test. Every worthwhile test should check some conditions. Checking visibility and enabled state of elements Of course, we could select many conditions to test, but in this case, I will concentrate on the different ways of . Let's . demonstrating Selenide condition checking verify we have a visible Login and a Sign-up button In order to do that, first, we have to find the element. Looking at the (or of course, you can use Firefox or other tools if you prefer that) we can see that the . DOM in Chrome dev tools Login button is actually a link It has no id, but it . So I could use a simple CSS selector or even an ID-based selector. But is it really unique? has a class login link which seems unique If you watch carefully, you can notice despite its name, the Sign-up link has the as the Login button, so I will have to . For that purpose, I am using XPath (in general ). same login link class select based on an index prefer CSS over XPath as it is faster You might think we should as it is unique, but that as according to my experience, , not even talking about use the text to find the element I do not recommend texts are changing more often than IDs and classes testing with different languages. Let's write the selector: $x("(//a[contains(@class, 'login-link')])[1]"); It is very simple, concise, and straightforward. You can use to find an element($) or elements($$) by CSS. Similarly, you can use to find elements using XPath. $(String cssSelector), $$(String cssSelector) $x(String xpath) and $$x(String xpath) Of course, you can use the built-in Selenium commands also, using . Selenide even provides in addition to the normal Selenium selectors like , , and . By $(By) and $$(By) new selectors byText withText byAttribute In case you are not familiar with the basic Selenium selectors, I recommend again on Selenium. You will have a good grasp of them after finishing the course. One additional resource which is quite good for beginners is . Rahul Shetty's Udemy Course CSS Dinner Now that we have the element which is a SelenideElement (subclass of WebElement) we can verify its visibility: $x("(//a[contains( , 'login-link')])[1]").shouldBe(visible); It is easy to read this code. Actually writing it is also easy and fun. 😀 You could ask what happens , or what if it is present but @class in case the element is not immediately present in the DOM it needs some time to become visible? both during finding elements and also during evaluating conditions. The , but it can be configured. The should functions ( ) even have an overloaded version which also accepts a Duration to specify the timeout explicitly. Selenide uses implicit waits default is 4 sec should, shouldHave, shouldBe, ShouldNot, shouldNotHave, shouldNotBe You can run your test from your favourite IDE, or you can run it from the command line using Gradle: gradlew test Simply change the "visible" to "enabled" to check the enabled state of an element: $x("(//a[contains(@class, 'login-link')])[1]").shouldBe(enabled); Based on the previous example it is quite easy to write the verification for the Sign Up link: $x("(//a[contains(@class, 'login-link')])[2]").shouldBe(visible);
$x("(//a[contains(@class, 'login-link')])[2]").shouldBe(enabled); Let's Refactor Before moving on, let's do some , so we can make the code cleaner and we can get one step closer to the Page Object Model which I will write in a later article. Let's do 2 things. First, the Login and Sign Up refactoring extract elements as constants using meaningful names. In case you are worried about locating an element before the page even exists, then I have some good news for you. Selenium (so also Selenide) use which means the elements will only be located, whenever you call some methods on them. lazy initialization Second, we will use to get a more . I really like this technique as you will see it in later articles. So here is the code after refactor: method chaining concise code public class HomepageTest {

    private final SelenideElement loginLink = $x("(//a[contains(@class, 'login-link')])[1]");
    private final SelenideElement signUpLink = $x("(//a[contains(@class, 'login-link')])[2]");

    @Test
    public void openPage() {
        open("https://stackoverflow.com/");
        loginLink.shouldBe(visible).shouldBe(enabled);
        signUpButton.shouldBe(visible).shouldBe(enabled);
    }
} Finding elements based on text As I promised, we will get to the cookie banner soon. Just one more thing before that. As I said it is not the best idea to locate elements based on texts, but (of course you can find everything with absolute XPath expressions, but that is a horrible idea as it will break on the slightest change of the UI), or sometimes you simply have no other options you have to check if elements have a certain text. This time we will stick to English but later I will write an article about internationalization. Let's find the link with the text "About" and verify whether it is pointing to the right location. We can choose from a couple of options here: Finding using XPath $x("//a[text()='About']");
$x("//a[contains(text(), 'bout')]"); You can check for exact matches or partial matches with XPath. Finding using linkText or partialLinkText $(By.linkText("About"));
$(By.partialLinkText("bout")); You can find the element using the standard Selenium locators. Find using byText and withText $(byText("About")) $(withText("bout"));; You can also find an element using Selenide locators. is similar to linkText as it finds an element using an exact match for the text, and is similar to partialLinkText as it checks whether the element's text contains the given text or not. byText withText But there is a huge advantage here for Selenide: it , not just with links. works with every kind of element Verifying link reference This is quite simple: aboutLink.shouldHave(href("/company")); I highly recommend checking the Conditions class's , so you can get a good grasp on the different conditions offered by Selenide. documentation Closing the banner Finally, we arrived at the last topic of today's article which is accepting the cookies. Let's create another test called . First, let's find the accept button: acceptCookies Looking at the page source we can see it is a button that we have to click and it has a which . So, we can easily find it by class name: class js-accept-cookies can identify the button $(byClassName("js-accept-cookies")); After finding the button, we can method on it as we could have already learnt it using Selenium. click it by simply using the click() acceptCookiesButton.click(); In case the test does not fail, we can tell we were able to click the accept cookie button, but . The banner is a div having a class js-consent-banner. to be on the safe side let's verify whether the banner has really disappeared In order to verify it is not there anymore we can use the method: shouldNotBe private final SelenideElement acceptCookieBanner = $("div.js-consent-banner");
.
.
acceptCookieBanner.shouldNotBe(visible); or you can write: acceptCookieBanner.shouldBe(hidden); Actually They are interchangeable and also there are many synonyms among the conditions, so basically it is up to you which you find more readable. These examples mean the same: should, shouldBe and shouldHave are synonyms similarly to their counterparts shouldNot, shouldNotBe, shouldNotHave. acceptCookieBanner.shouldBe(hidden);
acceptCookieBanner.shouldNotBe(visible);
acceptCookieBanner.should(disappear);
acceptCookieBanner.shouldNot(appear); I prefer not using negation so I am going with shouldBe(hidden). Finishing Touches Before we finish let's do 2 more refactors to reduce duplication and to make the code even simpler. As we are testing the same homepage in these tests, In TestNG, you can use the annotation for this, using JUnit 5 the will be your solution. we can move the page opening to a common part that executes before each test. @BeforeMethod @BeforeEach To get a good comparison of the usage of the two frameworks, check . this article on Baeldung When verifying the Login and Sign Up link we used methods to verify whether the component is visible and enabled. Actually, , as the should methods can accept multiple conditions. 2 chained shouldBe you can merge them into one call This is the final code: public class HomepageTest {
    private final SelenideElement loginLink = $x("(//a[contains(@class, 'login-link')])[1]");
    private final SelenideElement signUpLink = $x("(//a[contains(@class, 'login-link')])[2]");
    private final SelenideElement aboutLink = $(byText("About"));
    private final SelenideElement acceptCookiesButton = $(byClassName("js-accept-cookies"));
    private final SelenideElement acceptCookieBanner = $("div.js-consent-banner");

    @BeforeMethod
    public void setup() {
        open("https://stackoverflow.com/");
    }

    @Test
    public void openPage() {
        loginLink.shouldBe(visible, enabled);
        signUpLink.shouldBe(visible, enabled);
        aboutLink.shouldHave(href("/company"));
    }

    @Test
    public void acceptCookies() {
        acceptCookiesButton.click();
        acceptCookieBanner.shouldBe(hidden);
    }
} It looks neat, don't you think? 😊 And that's all. We have finished today's lesson. I hope you enjoyed it. In the next post, Don't hesitate to share your thoughts about this article and suggest topics for upcoming ones. I will develop tests for Stackoverflow's Questions page. 📚 Before we finish, I . I used XPath to find the Sign-up link. Please do not post your solution immediately, give some time to the others. So I ask you to ❣️ give you an assignment Write a CSS selector (not using the text of the link) to find the Sign-up link! post your solution on Monday See you soon... Github: https://github.com/mszeles/selenide-tutorial In case you do , just , on , on on , on and even on . 😊 not want to miss my posts follow me here on Hashnode LinkedIn Twitter Medium.com dev.to Instagram P.S.: . 👍 Support me by sharing this article 📚 on ! ✌ Join the Selenide community LinkedIn ! ❤️ Buy me a coffee

How to Start Your Friendship with Selenide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Become an Agileish Super Learner

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

How to Become an Agileish Super Learner

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps