Element

Element module contains function to interact with Elements found in the Browser.

click : Element -> Task {} [ WebDriverError Str, ElementNotFound Str ]

Click on a Element.

# find button element
button = browser |> Browser.findElement! (Css "#submit-button")
# click the button
button |> Element.click!

getText : Element -> Task Str [ WebDriverError Str, ElementNotFound Str ]

Get text of the Element.

This function will return the displayed text in the Browser for this Element and it's children.

When the Element is not visible, then the text will be an empty Str.

# find button element
button = browser |> Browser.findElement! (Css "#submit-button")
# get button text
buttonText = button |> Element.getText!

getValue : Element -> Task.Task a [ ElementNotFound Str, PropertyTypeError Str, WebDriverError Str ] where a implements Decoding

Get value of the Element.

When there is no value in this element then returns the default value for used type:

Str - ""
Bool - Bool.false
Num - 0

# find input element
input = browser |> Browser.findElement! (Css "#email-input")
# get input value
inputValue = input |> Element.getValue!
inputValue |> Assert.shouldBe "my-email@fake-email.com"

# find input element
input = browser |> Browser.findElement! (Css "#age-input")
# get input value
inputValue = input |> Element.getValue!
inputValue |> Assert.shouldBe 18

isSelected : Element -> Task [ Selected, NotSelected ] [ WebDriverError Str, ElementNotFound Str ]

Check if Element is selected.

Can be used on checkbox inputs, radio inputs, and option elements.

# find checkbox element
checkbox = browser |> Browser.findElement! (Css "#is-tasty-checkbox")
# get button text
isTastyState = checkbox |> Element.isSelected!
# asert expected value
isTastyState |> Assert.shoulBe! Selected

isVisible : Element -> Task [ Visible, NotVisible ] [ WebDriverError Str, ElementNotFound Str ]

Check if Element is visible in the Browser.

# find error message element
errorMsg = browser |> Browser.findElement! (Css "#error-msg")
# get button text
isVisible = checkbox |> Element.isVisible!
# assert expected value
isVisible |> Assert.shoulBe! Visible

getAttribute : Element, Str -> Task Str [ WebDriverError Str, ElementNotFound Str ]

Get attribute of an Element.

Attributes are values you can see in the HTML DOM, like <input class"test" type="password" />

When the attribute is not present on the Element, this function will return empty Str.

# find input element
input = browser |> Browser.findElement! (Css "#email-input")
# get input type
inputType = input |> Element.getAttribute! "type"

getAttributeOrEmpty : Element, Str -> Task (Result Str [Empty]) [ WebDriverError Str, ElementNotFound Str ]

Get attribute of an Element.

Attributes are values you can see in the HTML DOM, like <input class"test" type="password" />

checkboxType = checkbox |> Element.getAttributeOrEmpty! "type"
when checkboxType is
    Ok type -> type |> Assert.shouldBe "checkbox"
    Err Empty -> Assert.failWith "should not be empty"

getProperty : Internal.Element, Str -> Task a [ ElementNotFound Str, PropertyTypeError Str, WebDriverError Str ] where a implements Decoding

Get property of an Element.

Properties are the keys that you get when using GetOwnProperty on a element in the browser.

This function can be used with types like: Bool, Str, I64, F64, etc. R2E will try to cast the browser response to the choosen type.

When the response is empty e.g. property does not exist, then the default value of the choosen type will be used:

Str - ""
Bool - Bool.false
Num - 0

# get input value
inputValue = input |> Element.getProperty! "value"
# expect to have value "email@emails.com"
inputValue |> Assert.shouldBe "email@emails.com"

Bool:

isChecked = nameInput |> Element.getProperty! "checked"
isChecked |> Assert.shouldBe Bool.false

Bool as Str:

isChecked = nameInput |> Element.getProperty! "checked"
isChecked |> Assert.shouldBe "false"

Num:

clientHeight = nameInput |> Element.getProperty! "clientHeight"
clientHeight |> Assert.shouldBe 17

getPropertyOrEmpty : Element, Str -> Task (Result a [Empty]) [ WebDriverError Str, ElementNotFound Str, PropertyTypeError Str ] where a implements Decoding

Get property of an Element.

Properties are the keys that you get when using GetOwnProperty on a element in the browser.

This function can be used with types like: Bool, Str, I64, F64, etc. R2E will try to cast the browser response to the choosen type.

When the response is empty e.g. property does not exist, then Err Empty will be returned.

# get input value
inputValue = input |> Element.getPropertyOrEmpty! "value"
# expect to have value "email@emails.com"
inputType |> Assert.shouldBe (Ok "email@emails.com")

isChecked = nameInput |> Element.getProperty! "checked"
when isChecked is
    Ok value -> value |> Assert.shouldBe Bool.false
    Err Empty -> Assert.failWith "input should have a checked prop"

clientHeight = nameInput |> Element.getProperty! "clientHeight"
clientHeight |> Assert.shouldBe (Ok 17)

inputText : Element, Str -> Task.Task {} [ WebDriverError Str, ElementNotFound Str ]

Send a Str to a Element (e.g. put text into an input).

# find email input element
emailInput = browser |> Browser.findElement! (Css "#email")
# input an email into the email input
emailInput |> Element.sendKeys! "my.fake.email@fake-email.com"

Special key sequences:

{enter} - simulates an "enter" key press

# find search input element
searchInput = browser |> Browser.findElement! (Css "#search")
# input text and submit
searchInput |> Element.sendKeys! "roc lang{enter}"

clear : Internal.Element -> Task.Task {} [ WebDriverError Str, ElementNotFound Str ]

Clear an editable or resetable Element.

# find button element
input = browser |> Browser.findElement! (Css "#email-input")
# click the button
input |> Element.clear!

Locator

Supported locator strategies

Css Str - e.g. Css ".my-button-class"

TestId Str - e.g. TestId "button" => Css "[data-testid="button"]"

XPath Str - e.g. XPath "/bookstore/book[price>35]/price"

LinkText Str - e.g. LinkText "Examples" in <a href="/examples-page">Examples</a>

PartialLinkText Str - e.g. PartialLinkText "Exam" in <a href="/examples-page">Examples</a>

findElement : Element, Locator -> Task Element [ WebDriverError Str, ElementNotFound Str ]

Find an Element inside the tree of another Element in the Browser.

When there are more than 1 elements, then the first will be returned.

See supported locators at Locator.

# find the html element with a css selector "#my-id"
button = element |> Element.findElement! (Css "#my-id")

# find the html element with a css selector ".my-class"
button = element |> Element.findElement! (Css ".my-class")

# find the html element with an attribute [data-testid="my-element"]
button = element |> Element.findElement! (TestId "my-element")

tryFindElement : Element, Locator -> Task [ Found Element, NotFound ] [ WebDriverError Str, ElementNotFound Str ]

Find an Element inside the tree of another Element in the Browser.

This function returns a [Found Element, NotFound] instead of an error when element is not found.

When there are more than 1 elements, then the first will be returned.

See supported locators at Locator.

maybeButton = element |> Element.tryFindElement! (Css "#submit-button")

when maybeButton is
    NotFound -> Stdout.line! "Button not found"
    Found el ->
        buttonText = el |> Element.getText!
        Stdout.line! "Button found with text: $(buttonText)"

findSingleElement : Element, Locator -> Task Element [ AssertionError Str, ElementNotFound Str, WebDriverError Str ]

Find an Element inside the tree of another Element in the Browser.

This function will fail if the element is not found - ElementNotFound Str

This function will fail if there are more than 1 element - AssertionError Str

See supported locators at Locator.

button = element |> Element.findSingleElement! (Css "#submit-button")

findElements : Element, Locator -> Task (List Element) [ WebDriverError Str, ElementNotFound Str ]

Find all Elements inside the tree of another Element in the Browser.

When there are no elements found, then the list will be empty.

See supported locators at Locator.

# find all <li> elements in #my-list in the DOM tree of **element**
listItems = element |> Element.findElements! (Css "#my-list li")

getTagName : Element -> Task Str [ WebDriverError Str, ElementNotFound Str ]

Get the HTML tag name of an Element.

# find input element
input = browser |> Browser.findElement! (Css "#email-input")
# get input tag name
tagName = input |> Element.getTagName!
# tag name should be "input"
tagName |> Assert.shouldBe "input"

getCssProperty : Element, Str -> Task Str [ WebDriverError Str, ElementNotFound Str ]

Get a css property of an Element.

# find input element
input = browser |> Browser.findElement! (Css "#email-input")
# get input type
inputBorder = input |> Element.getCssProperty! "border"
# assert
inputBorder |> Assert.shouldBe "2px solid rgb(0, 0, 0)"

getRect : Element -> Task ElementRect [ WebDriverError Str, ElementNotFound Str ]

Get the position and size of the Element.

# find input element
input = browser |> Browser.findElement! (Css "#email-input")
# get input tag name
rect = input |> Element.getRect!
# assert the rect
rect.height |> Assert.shouldBe! 51
rect.width |> Assert.shouldBe! 139
rect.x |> Assert.shouldBeEqualTo! 226.1243566
rect.y |> Assert.shouldBeEqualTo! 218.3593754

useIFrame : Element, (Internal.Browser -> Task {} ) -> Task {}

Switch the context to an iFrame.

This function runs a callback in which you can interact with the page inside an iFrame.

frameEl = browser |> Browser.findElement! (Css "iframe")

Element.useIFrame! frameEl \frame ->
    span = frame |> Browser.findElement! (Css "#span-inside-frame")
    span |> Assert.elementShouldHaveText "This is inside an iFrame"