A step that identifies an element to which later steps will be applied.

Spec.when "the button is clicked twice"
  [ Spec.Markup.target << by [ tag "button" ]
  , Spec.Markup.Event.click
  , Spec.Markup.Event.click
  ]

Represents an observation of HTML.

Observe all HTML elements that match the selector provided to Spec.Markup.query.

Spec.Markup.observeElements
  |> Spec.Markup.query << by [ attribute ("data-attr", "some-value") ]
  |> Spec.expect (Spec.Claim.isListWithLength 3)

If no elements match the query, then the subject of the claim will be an empty list.

Observe an HTML element that matches the selector provided to Spec.Markup.query.

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ attribute ("data-attr", "some-value") ]
  |> Spec.expect (Spec.Markup.text <| 
    Spec.Claim.isEqual Debug.toString "something fun"
  )

Claim that an element is not present in the document like so:

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ id "not-present" ]
  |> Spec.expect Spec.Claim.isnNothing

Search for HTML elements.

Use this function in conjunction with observe, observeElement, or observeElements to observe the HTML document.

Observe the title of an HTML document.

Note: It only makes sense to observe the title if your program is constructed with Browser.document or Browser.application.

Represents an HTML element.

Claim that the HTML element's text satisfies the given claim.

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ tag "div" ]
  |> Spec.expect (
    Spec.Markup.text <|
      Spec.Claim.isStringContaining 1 "red"
  )

Note that an observed HTML element's text includes the text belonging to all its descendants.

Claim that the specified attribute value satisfies the given claim.

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ tag "div" ]
  |> Spec.expect (
    Spec.Markup.attribute "class" <|
      Spec.Claim.isSomethingWhere <|
      Spec.Claim.isStringContaining 1 "red"
  )

If you receive an error that the attribute you're interested in is not found, try Spec.Markup.property instead. Elm-spec is examining the actual DOM element, and it's not always clear whether Elm uses the attribute or the associated property to configure the element.

On the difference between attributes and properties, see this.

Apply the given decoder to the HTML element and make a claim about the resulting value.

Use this function to observe a property of an HTML element. For example, you could observe whether a button is disabled like so:

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ tag "button" ]
  |> Spec.expect (
    Spec.Markup.property
      (Json.Decode.field "disabled" Json.Decode.bool)
      Spec.Claim.isTrue
  )

Some common properties one might make claims about:

• style => an object
• hidden => a boolean value
• checked => a boolean value
• value (for an input element) => a string

On the difference between attributes and properties, see this.