A query that expects to find exactly one element.

Contrast with Multiple.

A query that may find any number of elements, including zero.

Contrast with Single.

Translate a Html value into a Single query. This is how queries typically begin.

import Html
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (text)




test "Button has the expected text" <|
    \() ->
        Html.button [] [ Html.text "I'm a button!" ]
            |> Query.fromHtml
            |> Query.has [ text "I'm a button!" ]

Find exactly one descendant element which matches all the given selectors. If no descendants match, or if more than one matches, the test will fail.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The list has both the classes 'items' and 'active'" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.find [ tag "ul" ]
            |> Query.has [ classes [ "items", "active" ] ]

Find the descendant elements which match all the given selectors.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag)
import Expect




test "The list has three items" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.findAll [ tag "li" ]
            |> Query.count (Expect.equal 3)

Return the matched element's immediate child elements.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The <ul> only has <li> children" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.find [ tag "ul" ]
            |> Query.children []
            |> Query.each (Query.has [ tag "li" ])

Return the first element in a match. If there were no matches, the test will fail.

Query.first is a shorthand for Query.index 0 - they do the same thing.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The first <li> is called 'first item'" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.findAll [ tag "li" ]
            |> Query.first
            |> Query.has [ text "first item" ]

Return the element in a match at the given index. For example, Query.index 0 would match the first element, and Query.index 1 would match the second element.

You can pass negative numbers to "wrap around" - for example, Query.index -1 will match the last element, and Query.index -2 will match the second-to-last.

If the index falls outside the bounds of the match, the test will fail.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The second <li> is called 'second item'" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.findAll [ tag "li" ]
            |> Query.index 1
            |> Query.has [ text "second item" ]

Expect the number of elements matching the query fits the given expectation.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag)




test "The list has three items" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.findAll [ tag "li" ]
            |> Query.count (Expect.equal 3)

Expect the element to match all of the given selectors.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The list has both the classes 'items' and 'active'" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.find [ tag "ul" ]
            |> Query.has [ tag "ul", classes [ "items", "active" ] ]

Expect the element to not match all of the given selectors.

import Html exposing (div)
import Html.Attributes as Attributes
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, class)




test "The div element has no progress-bar class" <|
    \() ->
        div [ Attributes.class "button" ] []
            |> Query.fromHtml
            |> Query.find [ tag "div" ]
            |> Query.hasNot [ tag "div", class "progress-bar" ]

Expect that a Single expectation will hold true for each of the Multiple matched elements.

import Html exposing (div, ul, li)
import Html.Attributes exposing (class)
import Test.Html.Query as Query
import Test exposing (test)
import Test.Html.Selector exposing (tag, classes)




test "The list has both the classes 'items' and 'active'" <|
    \() ->
        div []
            [ ul [ class "items active" ]
                [ li [] [ text "first item" ]
                , li [] [ text "second item" ]
                , li [] [ text "third item" ]
                ]
            ]
            |> Query.fromHtml
            |> Query.findAll [ tag "ul" ]
            |> Query.each
                [ Query.has [ tag "ul" ]
                , Query.has [ classes [ "items", "active" ] ]
                ]