View Source AssertHTML (AssertHTML v0.1.4)

AssertHTML adds ExUnit assert helpers for testing rendered HTML using CSS selectors.

Usage in Phoenix Controller and Integration Test

Assuming the html_response(conn, 200) returns:

<!DOCTYPE html>
<html>
  <head>
    <title>PAGE TITLE</title>
  </head>
  <body>
    <a href="/signup">Sign up</a>
    <a href="/help">Help</a>
  </body>
</html>

An example controller test:

defmodule YourAppWeb.PageControllerTest do
  use YourAppWeb.ConnCase, async: true

  test "should get index", %{conn: conn} do
    conn = conn
    |> get(Routes.page_path(conn, :index))

    html_response(conn, 200)
    # Page title is "PAGE TITLE"
    |> assert_html("title", "PAGE TITLE")
    # Page title is "PAGE TITLE" and there is only one title element
    |> assert_html("title", count: 1, text: "PAGE TITLE")
    # Page title matches "PAGE" and there is only one title element
    |> assert_html("title", count: 1, match: "PAGE")
    # Page has one link with href value "/signup"
    |> assert_html("a[href='/signup']", count: 1)
    # Page has at least one link
    |> assert_html("a", min: 1)
    # Page has at most two links
    |> assert_html("a", max: 2)
    # Page contains no forms
    |> refute_html("form")
  end
end

Check selector

assert_html(html, ".css .selector .exsits") - assert error if element doesn't exists in selector path. refute_html(html, ".css .selector") - assert error if element doesn't exists in selector path.

Check Attributes

Supports meta attributes:

  • :text – text in element
  • :match - contain value.

Summary

Types

HTML element attribute name

HTML element attributes

CSS selector

HTML response

Checking value

Types

@type attribute_name() :: atom() | binary()

HTML element attribute name

@type attributes() :: [{attribute_name(), value()}]

HTML element attributes

@type context() :: {matcher(), html()}
@type css_selector() :: String.t()

CSS selector

Supported selectors

PatternDescription
*any element
Ean element of type E
E[foo]an E element with a "foo" attribute
E[foo="bar"]an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"]an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E[foo^="bar"]an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo$="bar"]an E element whose "foo" attribute value ends exactly with the string "bar"
E[foo*="bar"]an E element whose "foo" attribute value contains the substring "bar"
E[foo|="en"]an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
E:nth-child(n)an E element, the n-th child of its parent
E:first-childan E element, first child of its parent
E:last-childan E element, last child of its parent
E:nth-of-type(n)an E element, the n-th child of its type among its siblings
E:first-of-typean E element, first child of its type among its siblings
E:last-of-typean E element, last child of its type among its siblings
E.warningan E element whose class is "warning"
E#myidan E element with ID equal to "myid"
E:not(s)an E element that does not match simple selector s
E Fan F element descendant of an E element
E > Fan F element child of an E element
E + Fan F element immediately preceded by an E element
E ~ Fan F element preceded by an E element
@type html() :: String.t()

HTML response

@type value() :: nil | String.t() | Regex.t()

Checking value

  • if nil should not exist

Functions

Link to this function

assert_html(html, value)

View Source
@spec assert_html(html(), Regex.t()) :: html() | no_return()
@spec assert_html(html(), block_fn()) :: html() | no_return()
@spec assert_html(html(), css_selector()) :: html() | no_return()
@spec assert_html(html(), attributes()) :: html() | no_return()

Asserts an attributes in HTML element

assert attributes

  • :text – asserts a text element in HTML
  • :match - asserts containing value in HTML
iex> html = ~S{<div class="foo bar"></div><div class="zoo bar"></div>}
...> assert_html(html, ".zoo", class: "bar zoo")
~S{<div class="foo bar"></div><div class="zoo bar"></div>}

# check if `id` not exsists
iex> assert_html(~S{<div>text</div>}, id: nil)
"<div>text</div>"

Examples check :text

Asserts a text element in HTML

iex> html = ~S{<h1 class="title">Header</h1>}
...> assert_html(html, text: "Header")
~S{<h1 class="title">Header</h1>}

iex> html = ~S{<div class="container">   <h1 class="title">Header</h1>   </div>}
...> assert_html(html, ".title", text: "Header")
~S{<div class="container">   <h1 class="title">Header</h1>   </div>}

iex> html = ~S{<h1 class="title">Header</h1>}
...> try do
...>   assert_html(html, text: "HEADER")
...> rescue
...>   e in ExUnit.AssertionError -> e
...> end
%ExUnit.AssertionError{
  left: "HEADER",
  right: "Header",
  message: "Comparison `text` attribute failed.\n\n\t<h1 class=\"title\">Header</h1>.\n"
}

iex> html = ~S{<div class="foo">Some &amp; text</div>}
...> assert_html(html, text: "Some & text")
~S{<div class="foo">Some &amp; text</div>}

Selector

assert_html(html, "css selector")

    iex> html = ~S{<p><div class="foo"><h1>Header</h1></div></p>}
    ...> assert_html(html, "p .foo h1")
    ~S{<p><div class="foo"><h1>Header</h1></div></p>}

    iex> html = ~S{<p><div class="foo"><h1>Header</h1></div></p>}
    ...> assert_html(html, "h1")
    ~S{<p><div class="foo"><h1>Header</h1></div></p>}

Match elements in HTML

assert_html(html, ~r{<p>Hello</p>})
assert_html(html, match: ~r{<p>Hello</p>})
assert_html(html, match: "<p>Hello</p>")

\# Asserts a text element in HTML

Examples

iex> html = ~S{<div class="container">   <h1 class="title">Hello World</h1>   </div>}
...> assert_html(html, "h1", "Hello World") == html
true

iex> html = ~S{<div class="container">   <h1 class="title">Hello World</h1>   </div>}
...> assert_html(html, ".title", ~r{World})
~S{<div class="container">   <h1 class="title">Hello World</h1>   </div>}

assert elements in selector

assert_html(html, ".container table", ~r{<p>Hello</p>})
Link to this function

assert_html(html, value, block_fn)

View Source
@spec assert_html(html(), Regex.t(), block_fn()) :: html() | no_return()
@spec assert_html(html(), attributes(), block_fn()) :: html() | no_return()
@spec assert_html(html(), css_selector(), block_fn()) :: html() | no_return()
Link to this function

assert_html(html, css_selector, attributes, block_fn \\ nil)

View Source
@spec assert_html(html(), css_selector(), value(), block_fn() | nil) ::
  html() | no_return()
@spec assert_html(html(), css_selector(), attributes(), block_fn() | nil) ::
  html() | no_return()
Link to this function

refute_html(html, value)

View Source
@spec refute_html(html(), Regex.t()) :: html() | no_return()
@spec refute_html(html(), css_selector()) :: html() | no_return()
@spec refute_html(html(), attributes()) :: html() | no_return()

Opposite method for assert_html

See more (t:refute_html/2)

Link to this function

refute_html(html, value, block_fn)

View Source
@spec refute_html(html(), Regex.t(), block_fn()) :: html() | no_return()
@spec refute_html(html(), attributes(), block_fn()) :: html() | no_return()
@spec refute_html(html(), css_selector(), block_fn()) :: html() | no_return()
Link to this function

refute_html(html, css_selector, attributes, block_fn \\ nil)

View Source
@spec refute_html(html(), css_selector(), value(), block_fn() | nil) ::
  html() | no_return()
@spec refute_html(html(), css_selector(), attributes(), block_fn() | nil) ::
  html() | no_return()