Selecting HTML elements for testing.
This is TEPA-friendly version of Test.Html.Selector.
Test.Html.Selector.Selector
A selector used to filter sets of elements.
tag : String -> Selector
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!" ]
text : String -> Selector
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
.
exactText : String -> Selector
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
.
containing : List Selector -> Selector
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" ]
attribute : String -> String -> Selector
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"
boolAttribute : String -> Basics.Bool -> Selector
Helper function for boolean attributes.
boolAttribute key p =
attribute key <|
if p then
"true"
else
"false"
all : List Selector -> Selector
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 ]
id : String -> Selector
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!" ]
class : String -> Selector
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" ]
classes : List String -> Selector
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" ] ]
exactClassName : String -> Selector
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" ]
disabled : Basics.Bool -> Selector
Matches elements that have a
disabled
attribute with the given value.