Fast-Forward Frontend Test Automation with Selenide

Tired of having to write a lot of code (the Gherkin feature file, the Runner class, the Steps and the Page Object classes) just for a single Frontend test?

Also, you don't need the detailed and verbose reports offered by automation libraries like Cucumber or Serenity?

Then maybe Selenide is the solution you are looking for.

Selenide is a Selenium WebDriver wrapper, it builds on this time-tested library and comes with new and powerful methods that can be checked here.

This article will present a sample frontend test automation framework built with Selenide and JUnit 5. It can be checked here and let's go step by step into its' structure.

1. Setting up Selenide and JUnit 5

As it is a Maven project, simply add the needed dependencies in the pom file:

	<dependency>
	<groupId>com.codeborne</groupId>
	<artifactId>selenide</artifactId>
	<version>${selenide.version}</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>org.junit.jupiter</groupId>
	<artifactId>junit-jupiter</artifactId>
	<version>${junit.version}</version>
	<scope>test</scope>
	</dependency>

2. Define the test data

The showcased test is for a demo contact form so the test data can be easily centralised in a .csv file, thus taking advantage of the very useful @ParametrizedTest feature from JUnit 5.

3. Implement the test

Having JUnit in place, we can use its' annotations to best structure the test for the above contact form, thus:

• We will open the webpage in the @BeforeEach step:

@BeforeEach 

public void loadWebpage() { 

 open("http://automationpractice.com/index.php?controller=contact"); 

     }

• Implement the actual test steps in a @ParametrizedTest using as test data the above .csv file:

@ParameterizedTest

@CsvFileSource(resources = "/contactForm.csv", numLinesToSkip = 1)

public void testContactForm(String subjectHeading, String emailAddress, String orderReference, String message, String uploadFile) {

        $(By.id("id_contact")).selectOption(subjectHeading);

        $(By.id("email")).setValue(emailAddress);

        $(By.id("id_order")).setValue(orderReference);

        $(By.id("message")).setValue(readTextFileAsString(message));

        $(By.id("fileUpload")).uploadFile(new File(uploadFile));

        $(By.id("submitMessage")).click();

        $(By.className("alert-success")).shouldHave(Condition.text("Your message has been successfully sent to our team"));

    }

A special mention here for the UploadFile feature from Selenide that can save you from the dreadful workarounds of trying to interact with the native OS file select window.

• Do the clean-up in the @AfterEach step:

@AfterEach
public void closeBrowser() {
        closeWebDriver();
    }

So, as seen, the main test case for this webpage can be written in a concise manner and in under 30 lines of code. Whereas going with the Gherkin approach would have implied exponentially more code and effort to structure it.