Finding Elements

Here are the ways to find Element in the Browser.

Finding Elements

findElement

Find an Element in the Browser.

When there is more than 1 element, then the first will be returned.

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

See supported locators at Locators.

findElements

Find many Element in the Browser.

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

# find all <li> elements in #my-list
listItems = browser |> Browser.findElements! (Css "#my-list li")

See supported locators at Locators.

tryFindElement

Try to find an Element in the Browser.

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

When there is more than 1 element, then the first will be returned.

maybeButton = browser |> Browser.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)"

See supported locators at Locators.

Locators

All functions that require a Locator can use any of the following Locators.

Css

Find by css selector.

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

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

TestId

Find by the [data-testid] attribute.

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

XPath

Find by XPath.

# find a html element by XPath.
button = browser |> Browser.findElement! (XPath "/bookstore/book[price>35]/price")