A selector used to filter sets of elements.

Matches elements that have the given tag.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (tag, text)
import Test.Html.Query as Query
import Test exposing (test)




test "the welcome <h1> says hello!" <|
    \() ->
        Html.div []
            [ Html.h1 [ Mixin.id "welcome" ] [ Html.text "Hello!" ] ]
            |> Query.fromHtml
            |> Query.find [ tag "h1" ]
            |> Query.has [ text "Hello!" ]

Matches elements that have a text attribute containing the given value.

Selector.text "11,22" will match Html.text "11,222".

If you need an exact match, take a look at exactText.

Matches elements that have a text attribute with exactly the given value (sans leading/trailing whitespace).

Selector.exactText "11,22" will not match Html.text "11,222".

Note this selector is whitespace sensitive (it doesn't trim strings prior to checking them):

Selector.exactText "11,22" will not match Html.text "\n 11,22 \n".

If you need a partial match, take a look at text.

Matches elements whose descendants match the given selectors.

(You will get the element and not the descendant.)

This is especially useful to find elements which contain specific text somewhere in their descendants.

import Tepa.Html
import Tepa.HtmlSelector exposing (class, containing, tag)
import Tepa.Mixin as Mixin
import Test exposing (test)
import Test.Html.Event as Event
import Test.Html.Query as Query


test : Test
test =
    test "..." <|
        Html.div []
            [ Html.button
                [ Mixin.class "button-notMe"
                ]
                [ Html.text "not me" ]
            , Html.button
                [ Mixin.class "button-clickMe"
                ]
                [ Html.text "click me" ]
            ]
            |> Query.fromHtml
            |> Query.find
                [ tag "button"
                , containing [ text "click me" ]
                ]
            |> Query.has [ class "button-clickMe" ]

Matches elements that have the given attribute in a way that makes sense given their semantics in Html.

Specify attribute name and its value as string. e.g.,:

attribute "type_" "button"

Helper function for boolean attributes.

boolAttribute key p =
    attribute key <|
        if p then
            "true"


        else
            "false"

Combine the given selectors into one which requires all of them to match.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (class, text, all, Selector)
import Test.Html.Query as Query
import Test exposing (test)




replyBtnSelector : Selector
replyBtnSelector =
    all [ class "btn", text "Reply" ]




test "Button has the class 'btn' and the text 'Reply'" <|
    \() ->
        Html.button [ Mixin.class "btn btn-large" ] [ Html.text "Reply" ]
            |> Query.fromHtml
            |> Query.has [ replyBtnSelector ]

Matches elements that have the given id attribute.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (id, text)
import Test.Html.Query as Query
import Test exposing (test)




test "the welcome <h1> says hello!" <|
    \() ->
        Html.div []
            [ Html.h1 [ Mixin.id "welcome" ] [ Html.text "Hello!" ] ]
            |> Query.fromHtml
            |> Query.find [ id "welcome" ]
            |> Query.has [ text "Hello!" ]

Matches elements that have the given class (and possibly others as well).

To match multiple classes at once, use classes instead.

To match the element's exact class attribute string, use exactClassName.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (class)
import Test.Html.Query as Query
import Test exposing (test)




test "Button has the class btn-large" <|
    \() ->
        Html.button [ Mixin.class "btn btn-large" ] [ Html.text "Reply" ]
            |> Query.fromHtml
            |> Query.has [ class "btn-large" ]

Matches elements that have all the given classes (and possibly others as well).

When you only care about one class instead of several, you can use class instead of passing this function a list with one value in it.

To match the element's exact class attribute string, use exactClassName.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (classes)
import Test.Html.Query as Query
import Test exposing (test)




test "Button has the classes btn and btn-large" <|
    \() ->
        Html.button [ Mixin.class "btn btn-large" ] [ Html.text "Reply" ]
            |> Query.fromHtml
            |> Query.has [ classes [ "btn", "btn-large" ] ]

Matches the element's exact class attribute string.

This is used less often than class, classes or attribute, which check for the presence of a class as opposed to matching the entire class attribute exactly.

import Tepa.Html
import Tepa.Mixin as Mixin
import Tepa.HtmlSelector exposing (exactClassName)
import Test.Html.Query as Query
import Test exposing (test)




test "Button has the exact class 'btn btn-large'" <|
    \() ->
        Html.button [ Mixin.class "btn btn-large" ] [ Html.text "Reply" ]
            |> Query.fromHtml
            |> Query.has [ exactClassName "btn btn-large" ]

Matches elements that have a disabled attribute with the given value.