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.hasText "something fun")

If the element cannot be found in the document, the claim will be rejected.

Observe an HTML element that may not be present in the document.

Use this observer if you want to make a claim about the presence or absence of an HTML element.

Spec.Markup.observe
  |> Spec.Markup.query << by [ id "some-element" ]
  |> Spec.expect Spec.Claim.isNothing

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 text belonging to the HTML element contains the given text.

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

Claim that the HTML element has the given attribute with the given value.

Spec.Markup.observeElement
  |> Spec.Markup.query << by [ tag "div" ]
  |> Spec.expect (
    Spec.Markup.hasAttribute ("class", "red")
  )

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
  )

On the difference between attributes and properties, see this.