E2E Framework Overview

When using R2E as a E2E framework, you don't have to worry about creating and closing the browser window.

You just run all your tests and get the results.

Here is an example with 2 tests:

app [main] {
   pf: platform "https://github.com/roc-lang/basic-cli/releases/download/0.11.0/SY4WWMhWQ9NvQgvIthcv15AUeA7rAIJHAHgiaSHGhdY.tar.br",
   json: "https://github.com/lukewilliamboswell/roc-json/releases/download/0.10.0/KbIfTNbxShRX1A1FgXei1SpO5Jn8sgP6HP6PXbi-xyA.tar.br",
   r2e: "https://github.com/adomurad/r2e/releases/download/v0.2/mADbTFfAJsKbRUrCEPmJBr3WRsbhQ0JBIkr8QU1GK-E.tar.br",
}


import pf.Stdout
import pf.Task
import r2e.Test exposing [test]
import r2e.Browser
import r2e.Element
import r2e.Assert


main =
   Stdout.line! "Starting test suite!"

   tests = [test1, test2]

   # run all tests
   tests |> Test.runTests! {}


test1 = test "check roc header" \browser ->
   # go to roc-lang.org
   browser |> Browser.navigateTo! "http://roc-lang.org"
   # find header text
   header = browser |> Browser.findElement! (Css "#homepage-h1")
   # get header text
   headerText = header |> Element.getText!
   # check text
   headerText |> Assert.shouldBe "Roc"


test2 = test "use roc repl" \browser ->
   # go to roc-lang.org
   browser |> Browser.navigateTo! "http://roc-lang.org"
   # find repl input
   replInput = browser |> Browser.findElement! (Css "#source-input")
   # send keys to repl
   replInput |> Element.sendKeys! "0.1+0.2{enter}"
   # find repl output element
   outputEl = browser |> Browser.findElement! (Css ".output")
   # get output text
   outputText = outputEl |> Element.getText!
   # assert text - fail for demo purpose
   outputText |> Assert.shouldBe "0.3000000001 : Frac *"

When you run this example 1 test should succeed and 1 test should fail. The output should look like this:

➜ roc ./main.roc
Starting test suite!
Results:
Test 0: "check roc header": OK
Test 1: "use roc repl": AssertionError: Expected "0.3 : Frac *" to be "0.3000000001 : Frac *"

Total:  2
Pass:   1
Fail:   1
Test run failed

note

This example will try to use the webdriver running on "http://localhost:9515".

If you want to use different webdriver configuration, then see this.

main

The main function is simple.

1. First you run all tests sequentially by using:

   results = Test.runTests! tests {}

   The results will printed to Stdout.

   tip

   If you are interested in different report formats like HTML, JSON, JUnit XML, etc. then checkout the Reporting section.

   If you are running this in a automated pipeline and you want the pipeline to fail in case of any errors, then Test.runTests should be the last statement in main.

   warning

   When your run:

   roc ./main.roc

   Then the output of this execution will always be a "0" - success.

   When you run tests in a pipeline like "github action", it is better to build the test suite and then run it directly. This way in case of any tests fails the whole pipeline will fail.

   roc build ./main.roc
   
   ./main

tests

Defining tests

Each test is defined by using the Test.test function:

import r2e.Test exposing [test]

test1 = test "check roc header" \browser ->
    # test body

The first argument is the test name - it will be used in reports.

The second argument is a callback function that will be the test body. The callback gives you a Browser object that can be used to interact with the browser. After the test, in case of either success or failure the browser will be closed.

Interacting with the Browser

You can use the Browser module to interact with the browser.

To navigate the browser to a url, use:

browser |> Browser.navigateTo! "http://roc-lang.org"

To find Elements in the Browser, use:

replInput = browser |> Browser.findElement! (Css "#source-input")

To learn more interactions you can do with the Browser, goto the Browser Guide.

Interacting with the Elements

You can use the Element module to interact with the found Elements.

You can get text from an element by using:

headerText = header |> Element.getText!

You can type into inputs by sending keys:

replInput |> Element.sendKeys! "0.1+0.2{enter}"

note

By using the "{enter}" snippet, you can simulate the enter key press in the input.

To learn more interactions you can do with the Elements, goto the Element Guide.

Making Assertions

You can make Assertions by using the Assert module.

To check if a Str is equal to an expected value, you can use:

outputText |> Assert.shouldBe "0.3000000001 : Frac *"

note

This assertion will fail!

In Roc 0.1 + 0.2 is exactly 0.3

To learn more about Assertions, goto the Assertion Guide.