How to access HTML elements in RCPTT using Javascript

Did you ever have to write an RCPTT test to do some verification in an HTML?

Suppose that our Eclipse application under test generates HTML files and we want to check that links, buttons, fields and other elements are valid. Here is where Javascript comes to the rescue.

Javascript provides many functions that can be used to access elements on a web page through the browser. We assume that the page is opened in an internal browser so we can have access to it when testing with rcptt. This can be done using the ECL command invoke and the Javascript function evaluate executed on the control object Browser.

Accessing object properties

In the following example, we want to check that a given link with its corresponding text exist at least once in a web page.

proc linkExists [val href] [val text] {
    let [val script [concat
        "var elements = document.querySelectorAll(\"a[href='" $href "']\");"
        "for (var i = 0; i < elements.length; i++) {"
        "   if (elements[i].innerHTML != '" $text "') {"
        "       return false;"
        "   }"
        "}"
        "return true;"
        ]] {

        $script | log
        get-control Browser | get-object | invoke evaluate $script
    }
}
with [get-editor "Index"] {
    linkExists "/new" "Write a post" | verify-true
    linkExists "/new" "Write a post?" | verify-false
}

Performing actions

In this example, we just wanto to simulate a click on a given link identified by its HTML id.

proc clickOnLink [val id] {
    get-control Browser | get-object | invoke evaluate [concat "document.getElementById('" $id "').click()"]
}
get-editor "Index" | clickOnLink "connect-link"