AssertHTML is a powerful Elixir library designed for parsing and extracting data from HTML and XML using CSS. It also provides ExUnit assert helpers for testing rendered HTML using CSS selectors, making it an essential tool for Phoenix Controller and Integration tests.
- HTML and XML Parsing: Easily parse and extract data from HTML and XML documents.
- CSS Selectors: Use CSS selectors to find and manipulate elements in your HTML or XML.
- ExUnit Assert Helpers: Test your rendered HTML with the help of ExUnit assert helpers.
Follow these steps to get started with AssertHTML:
- Install the Library: Add
assert_htmlto your list of dependencies inmix.exs:
defdepsdo[{:assert_html,"~> 0.1"}]endThen run mix deps.get to fetch the dependency.
- Import formating: Update your .formatter.exs file with the following import:
[import_deps: [:assert_html]]- Add the Library to your Test: Add
AssertHTMLto your test file:
useAssertHTMLAssuming the html_response(conn, 200) returns:
<!DOCTYPE html><html><head><title>PAGE TITLE</title></head><body><ahref="/signup">Sign up</a><ahref="/help">Help</a></body></html>An example controller test:
defmoduleYourAppWeb.PageControllerTestdouseYourAppWeb.ConnCase,async: truetest"should get index",%{conn: conn}doresp_conn=conn|>get(Routes.page_path(conn,:index))html_response(resp_conn,200)# The page title is "PAGE TITLE"|>assert_html("title","PAGE TITLE")# The page title is "PAGE TITLE", and there is only one title element|>assert_html("title",count: 1,text: "PAGE TITLE")# The page title matches "PAGE", and there is only one title element|>assert_html("title",count: 1,match: "PAGE")# The page has one link with the href value "/signup"|>assert_html("a[href='/signup']",count: 1)# The page has at least one link|>assert_html("a",min: 1)# The page has at most two links|>assert_html("a",max: 2)# The page contains no forms|>refute_html("form")endendassert_html(html, ~r{Hello World}) - match string in HTMLrefute_html(html, ~r{Another World}) - should not contain string in HTML
assert_html(html,".content")doassert_html(~r{Hello World})endassert_html(html, ".css .selector") - checks if an element exists in the CSS selector path
refute_html(html, ".errors .error") - checks if an element does not exist in the path
assert_html(html,"form",class: "form",method: "post",action: "/session/login")doassert_html".-email"doassert_html("label",text: "Email",for: "staticEmail",class: "col-form-label")assert_html("div input",type: "text",readonly: true,class: "form-control-plaintext",value: "email@example.com")endassert_html(".-password")doassert_html("label",text: "Password",for: "inputPassword")assert_html("div input",placeholder: "Password",type: "password",class: "form-control",id: "inputPassword")endassert_html("button",type: "submit",class: "primary")enddefmoduleExampleControllerTestdouseExUnit.Case,async: trueuseAssertHTMLtest"shows search form",%{conn: conn}doconn_resp=get(conn,Routes.page_path(conn,:new))assertresponse=html_response(conn_resp,200)assert_htmlresponsedo# Check if element exists in CSS selector pathassert_html"p.description"# Check if element doesn't existrefute_html".flash-message"# Assert form attributesassert_html"form.new_page",action: Routes.page_path(conn,:create),method: "post"do# Assert elements inside the `form.new_page` selectorassert_html"label",class: "form-label",text: "Page name"assert_html"input",type: "text",class: "form-control",value: "",name: "page_name"assert_html"button",class: "form-button",text: "Submit"endendendendDocumentation can be found at https://hexdocs.pm/assert_html.
Feel free to send your PR with proposals, improvements or corrections 😉.
Anatolii Kovalchuk (@Kr00liX)
This software is licensed under the MIT license.