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.Claim.isSomethingWhere <|
    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.Claim.isSomethingWhere <|
    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.Claim.isSomethingWhere <|
    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.Claim.isSomethingWhere <|
    Spec.Markup.property
      (Json.Decode.field "disabled" Json.Decode.bool)
      Spec.Claim.isTrue
  )

Some common properties one might make claims about and the type of the corresponding value:

• style (an object)
• hidden (a boolean value)
• disabled (a boolean value)
• scrollLeft, scrollTop (the element's viewport offset, float values)
• checked (a boolean value)
• value (a string)

On the difference between attributes and properties, see this.

Represents the offset of a viewport.

Observe the browser's viewport offset.

Use this function to observe that the viewport of the browser window has been set to a certain position via Browser.Dom.setViewport.

Note: If you'd like to observe the viewport offset of an element set via Browser.Dom.setViewportOf, use observeElement and property to make a claim about its scrollLeft and scrollTop properties.

A step that logs to the console the selected HTML element and its descendants.

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

If an element is currently targeted, logging a different element does not change the targeted element.

You might use this to help debug a rejected observation.