Running end to end tests (Web Browsers)

If you want to use a web browser in your test, you can “install” a web browser in your SuT Docker container. The problem with this approach is that you can not see what happens in the browser. You can not see the browser console. Also, it is a bit of a challenge to execute the same tests with different browser versions.

One of the main features provided by ElasTest is allowing tests to use web browsers. That browsers will be fully monitored, showing its windows in real time in ElasTest web interface and also recording it to later inspection. Also, the browser console will be shown alongside test and SuT logs.

Let's see how to launch a TJob that makes use of a web browser inside Elastest. As an example we will use our Chrome Test tjob which is part of the Webapp project, loaded as an example when you first start ElasTest. If you have deleted this project, you can add it manually as indicated below. This project is called Simple Web Java Test (you can check the code for this test and similar ones in other languages in section Sample test code):

Complete the form fields:

  • SuT Name: name of the Sut (Webapp)
  • SuT Description: description of the SuT (Webapp description)
  • With Commands Container / With Docker Image / With Docker Compose: whether to deploy the SuT on ElasTest as some commands Container, as a Docker image or a docker-compose (With Docker Image)
  • Docker Image: image of the SuT (elastest/demo-web-java-test-sut)
  • Wait for http port: which port of the SuT should ElasTest wait to be available before starting the TJob (8080)
  • Protocol: protocol of the SuT url. Only Http and Https are available. (http)


Complete the form fields:

  • TJob Name: name of the TJob
  • Select a SuT: already created SuT to be tested through to the TJob (Webapp)
  • Environment docker image: the docker image that will host your test. This docker images should contain a client to download your code from your repository hosting service. For example, if your tests are hosted in GitHub and implemented in a Maven project with Java, you need to include a git client, Maven and the Java Development Kit (JDK) in the image. Indeed, this image contains Git, Maven and Java (elastest/test-etm-alpinegitjava)
  • Commands: these are the bash commands to be executed to download the code from a repository and to execute the tests. The specific commands depends on the source code repository type and the technology. For example, the following commands will clone a Maven/Java repository from GitHub and execute the tests:
    git clone https://github.com/elastest/demo-projects
    cd demo-projects/simpleweb-java-test
    mvn test
  • Test Support Services (EUS): if your test is gonna require a browser or not (Checked)


When this TJob is executed, a web application is started (the Sut). When the web application is ready, the test container is executed with the specified commands. Whenever the test code requests a certain browser of a specific version using standard web driver protocol and libraries, Elastest provides it automatically. When browser is ready, test uses it to interact with the SuT and verify that web behaves as expected.

You can see the browser in real time as test runs:

When the test have been executed, the browser recording can be opened in a new tab or opened as dialog:

Java JS PHP . . .

Let's take a look at the test code. It is implemented with JUnit 5 and Selenium webdriver libraries.


Field values when creating the TJob

Commands field:

git clone https://github.com/elastest/demo-projects
cd demo-projects/simpleweb-java-test
mvn test

Environment docker image field:

elastest/test-etm-alpinegitjava

BeforeAll method


@BeforeAll
public static void setupAllTests() {

    String sutHost = System.getenv("ET_SUT_HOST");
    if (sutHost == null) {
        sutURL = "http://localhost:8080/";
    } else {
        sutURL = "http://" + sutHost + ":8080/";
    }
    System.out.println("App url: " + sutURL);

    eusURL = System.getenv("ET_EUS_API");
    if (eusURL == null) {
        ChromeDriverManager.getInstance().setup();
    }

}


This method runs just once before all tests defined in the class.
ET_SUT_HOST variable will be the IP of our SuT. ElasTest will automatically inject the right value (localhost if not defined)
ET_EUS_API variable tells us where to connect to use Elastest browsers (standard Selenium Hub). If the variable has no value, we can consider that this service is no available and then local browsers have to be used (here we are using WebDriver Manager Java library. This library is responsible to download and configure any additional software needed to use installed browsers from tests)

BeforeEach method


@BeforeEach
public void setupTest() throws MalformedURLException {

    ChromeOptions options = new ChromeOptions();

    options.addArguments("start-maximized");

    if (eusURL == null) {
        driver = new ChromeDriver(options);
    } else {
        DesiredCapabilities caps = new DesiredCapabilities();
        caps.setBrowserName("chrome");
        caps.setCapability(ChromeOptions.CAPABILITY, options);
        driver = new RemoteWebDriver(new URL(eusURL), caps);
    }

}


This method is called before every test in this class.
It creates a browser with its window maximized: if Elastest Web Browser service is available, then the browser is a remote web browser. If not, it is a local browser. Selenium API is slightly differente in each case

AfterEach method


@AfterEach
public void teardown() {
    if (driver != null) {
        driver.quit();
    }
}

This method is called after every test execution in this class.
It is a very important method: it disposes the browser as soon as the test has finished

Test method


@Test
public void test() throws InterruptedException {

    driver.get(sutURL);

    Thread.sleep(3000);

    String newTitle = "MessageTitle";
    String newBody = "MessageBody";

    driver.findElement(By.id("title-input")).sendKeys(newTitle);
    driver.findElement(By.id("body-input")).sendKeys(newBody);

    Thread.sleep(3000);

    driver.findElement(By.id("submit")).click();

    Thread.sleep(3000);

    String title = driver.findElement(By.id("title")).getText();
    String body = driver.findElement(By.id("body")).getText();

    assertThat(title, equalTo(newTitle));
    assertThat(body, equalTo(newBody));

    Thread.sleep(3000);

}


This test is the only one defined in this class. Its logic just simulates the navigation of a real user in our webpage, sending some data within a form and checking the received data.
Sentences "Thread.sleep()" just give us some more time to see the browser in action. They are not necessary in a real project