← Home
Browse lessons
Welcome to Testing LiveView Code setup and instructions Testing Rendering Scoping Assertions Testing Interactions Debugging LiveView Tests Testing Forms Testing Form Changes Testing Function Components Testing LiveComponents Testing Live Redirects Testing Live Patch Testing JS Hooks Testing Upload Previews Testing Uploads (Direct to Server) Testing Uploads (Direct to Cloud) Testing Async Assigns CSS Selectors for Tests Thank you!

Debugging LiveView Tests

Debugging LiveView Tests

We’ll use our CounterLive and counter_live_test.exs to see how we can debug LiveView tests.

Let’s copy a test from counter_live_done_test.exs.

test "user can increase counter", %{conn: conn} do
  {:ok, view, _} = live(conn, ~p"/counter")

  view
  |> element("#increment")
  |> render_click()

  assert has_element?(view, "#count", "1")
end

What if we didn’t know what happens when click on render_click/3?

We could do something like print the entire HTML as it’s rendered:

test "user can increase counter", %{conn: conn} do
  {:ok, view, _} = live(conn, ~p"/counter")

  view
  |> element("#increment")
  |> render_click()

  view |> render() |> IO.inspect()

  assert has_element?(view, "#count", "1")
end

That’s not very easy to read and thus unhelpful.

Using open_browser/1

Phoenix.LiveViewTest ships with an open_browser/1 function that, as the name suggests, opens a browser with the state of the page.

test "user can increase counter", %{conn: conn} do
  {:ok, view, _} = live(conn, ~p"/counter")
  view |> open_browser()

  view
  |> element("#increment")
  |> render_click()

  view |> open_browser()

  assert has_element?(view, "#count", "1")
end

So much better.

Resources