HTMLAssertion v0.1.5 HTMLAssertion View Source

HTMLAssertion adds assertions for testing rendered HTML using CSS selectors.

Usage in Phoenix Controller and Integration Test

Import the HTML assertion functions in YourAppWeb.ConnCase. Remember to replace all instances of YourApp with your app module name.

defmodule YourAppWeb.ConnCase do
  .
  .
  .
  using do
    quote do
      # Import conveniences for testing with connections
      use Phoenix.ConnTest
      alias YourAppWeb.Router.Helpers, as: Routes
      use HTMLAssertion # Imports assert_select, refute_select
      # The default endpoint for testing
      @endpoint YourAppWeb.Endpoint
    end
  end
  .
  .
  .
end

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_select("title", "PAGE TITLE")
    # Page title is "PAGE TITLE" and there is only one title element
    |> assert_select("title", count: 1, text: "PAGE TITLE")
    # Page title matches "PAGE" and there is only one title element
    |> assert_select("title", count: 1, match: "PAGE")
    # Page has one link with href value "/signup"
    |> assert_select("a[href='/signup']", count: 1)
    # Page has at least one link
    |> assert_select("a", min: 1)
    # Page has at most two links
    |> assert_select("a", max: 2)
    # Page contains no forms
    |> refute_select("form")
  end
end

Link to this section Summary

Types

attribute_name()

HTML element attribute name

attributes()

HTML element attributes

css_selector()

CSS selector

html()

HTML response

value()

Checking value

Functions

assert_select(html, value)

Asserts an attributes in HTML element

assert_select(html, value, block_fn)

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

refute_select(html, value)

refute_select(html, value, block_fn)

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

Link to this section Types

attribute_name()

Specs

attribute_name() :: atom() | binary()

HTML element attribute name

attributes()

Specs

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

HTML element attributes

css_selector()

Specs

css_selector() :: String.t()

CSS selector

Supported selectors

Pattern	Description
*	any element
E	an 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-child	an `E` element, first child of its parent
E:last-child	an `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-type	an `E` element, first child of its type among its siblings
E:last-of-type	an `E` element, last child of its type among its siblings
E.warning	an `E` element whose class is "warning"
E#myid	an `E` element with ID equal to "myid"
E:not(s)	an `E` element that does not match simple selector s
E F	an `F` element descendant of an `E` element
E > F	an `F` element child of an `E` element
E + F	an `F` element immediately preceded by an `E` element
E ~ F	an `F` element preceded by an `E` element

html()

Specs

html() :: String.t()

HTML response

value()

Specs

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

Checking value

if nil should not exist

Link to this section Functions

assert_select(html, value)

Specs

assert_select(html(), Regex.t()) :: html() | no_return()

assert_select(html(), block_fn()) :: html() | no_return()

assert_select(html(), css_selector()) :: html() | no_return()

assert_select(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_select(html, ".zoo", class: "bar zoo")
~S{<div class="foo bar"></div><div class="zoo bar"></div>}

# check if `id` not exsists
iex> assert_select(~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_select(html, text: "Header")
~S{<h1 class="title">Header</h1>}

iex> html = ~S{<div class="container">   <h1 class="title">Header</h1>   </div>}
...> assert_select(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_select(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_select(html, text: "Some & text")
~S{<div class="foo">Some &amp; text</div>}

Selector

assert_select(html, "css selector")

    iex> html = ~S{<p><div class="foo"><h1>Header</h1></div></p>}
    ...> assert_select(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_select(html, "h1")
    ~S{<p><div class="foo"><h1>Header</h1></div></p>}

Match elements in HTML

assert_select(html, ~r{<p>Hello</p>})
assert_select(html, match: ~r{<p>Hello</p>})
assert_select(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_select(html, "h1", "Hello World") == html
true

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

assert elements in selector

assert_select(html, ".container table", ~r{<p>Hello</p>})

assert_select(html, value, block_fn)

Specs

assert_select(html(), Regex.t(), block_fn()) :: html() | no_return()

assert_select(html(), attributes(), block_fn()) :: html() | no_return()

assert_select(html(), css_selector(), block_fn()) :: html() | no_return()

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

Specs

assert_select(html(), css_selector(), value(), block_fn() | nil) ::
  html() | no_return()

assert_select(html(), css_selector(), attributes(), block_fn() | nil) ::
  html() | no_return()

refute_select(html, value)

Specs

refute_select(html(), Regex.t()) :: html() | no_return()

refute_select(html(), css_selector()) :: html() | no_return()

refute_select(html(), attributes()) :: html() | no_return()

refute_select(html, value, block_fn)

Specs

refute_select(html(), Regex.t(), block_fn()) :: html() | no_return()

refute_select(html(), attributes(), block_fn()) :: html() | no_return()

refute_select(html(), css_selector(), block_fn()) :: html() | no_return()

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

Specs

refute_select(html(), css_selector(), value(), block_fn() | nil) ::
  html() | no_return()

refute_select(html(), css_selector(), attributes(), block_fn() | nil) ::
  html() | no_return()