🔗 Improve your LiveView testing with test-specific attributes

When a LiveView application begins to get complicated, testing it can become brittle. When we use CSS selectors to find the elements we want to assert on, we are tightly coupling our tests to the HTML structure of our LiveView. As the HTML structure changes, our tests will break.

A test example from the Phoenix LiveView docs looks like this:

{:ok, view, html} = live(conn, "/users")
html = view |> element("#user-13 a", "Delete") |> render_click()
refute html =~ "user-13"
refute view |> element("#user-13") |> has_element?()

This makes some assumptions about the HTML markup. There is an element with id="user-13" and an anchor tag with the text Delete. If you decide to change the HTML to use a button instead of an anchor tag, your test will break. Chances are that the id is being used here only for the test and again, if it’s removed, the test will break. The same will happen if you change the word "Delete" to a trash-can icon.

To make our tests more robust, we can use test attributes to make our tests more flexible, but we don’t want test-specific attributes in our production HTML. (I got this idea from ember-test-selectors.)