A selector used to filter sets of elements.

Matches elements that have the given tag.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, text)




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

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

Matches elements that have the given attribute with the given string value.

For attributes with boolean values, such as checked, use boolAttribute.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (attribute, text)




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

Matches elements that have the given attribute with the given boolean value.

For attributes with string values, such as title, use attribute.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (boolAttribute, text)




test "the disabled button says Reply" <|
    \() ->
        Html.div []
            [ Html.button [ Attr.disabled True ] [ Html.text "Reply" ] ]
            |> Query.fromHtml
            |> Query.find [ boolAttribute "disabled" True ]
            |> Query.has [ text "Reply" ]

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

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (class, text, all, Selector)




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




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

Matches elements that have the given id attribute.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (id, text)




test "the welcome <h1> says hello!" <|
    \() ->
        Html.div []
            [ Html.h1 [ Attr.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 className.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (class)




test "Button has the class btn-large" <|
    \() ->
        Html.button [ Attr.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 className.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (classes)




test "Button has the classes btn and btn-large" <|
    \() ->
        Html.button [ Attr.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 or classes, which check for the presence of a class as opposed to matching the entire class attribute exactly.

import Html
import Html.Attributes as Attr
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (className)




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

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

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

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