`open_browser` doesn't work with `render_component`

[mfeckie]

Environment

• Elixir version (elixir -v): 1.17.1
• Phoenix version (mix deps): 1.7.17
• Phoenix LiveView version (mix deps): 1.0.0
• Operating system: OSX
• Browsers you attempted to reproduce this bug on (the more the merrier): All
• Does the problem persist after removing "assets/node_modules" and trying again? Yes:

Actual behavior

When calling open_browser in tests to debug issues, the browser doesn't open when piped from render_component.

It appears that open_browser will only work with a view or element https://github.com/phoenixframework/phoenix_live_view/blob/v1.0.7/lib/phoenix_live_view/test/live_view_test.ex#L1095-L1101

Expected behavior

I'd expect to be able to open a rendered component in the browser for debugging during tests.

I'd be happy to work on a PR for this if you folks are amenable?

[SteffenDE]

The problem is that if we simply write the component's HTML to a file and show that as usual, any CSS the component might rely on is not included on the page. So I'm not sure how useful that would be?

[mfeckie]

In the existing implementation, there seems to be some logic to wrap an %Element{} with head and body, though I see now that it doesn't add the CSS either, so I don't think it would be much different?

Having said that, being able to wrap with the root template would be much better. I wonder if there's a reasonable way to do that?

https://github.com/phoenixframework/phoenix_live_view/blob/4f27ad592cb8204b01cc327f7798bfe03b455f9c/lib/phoenix_live_view/test/live_view_test.ex#L1533-L1568

[leandrocp]

Regarding the %Element{} and CSS comment, just a note that open_browser/2 always includes head that contains the CSS link, for example in a new app you'll see this node in head:

   {"link",
    [
      {"phx-track-static", "phx-track-static"},
      {"rel", "stylesheet"},
      {"href", "/assets/app.css"}
    ], []},

But it doesn't generate the assets, which means if you delete them rm -rf priv/static/assets/* or run tests before even generating the assets (like running mix phx.server) the displayed page will have no styles because the .css simply doesn't exist yet.

So for example in a test like this one:

  describe "Index" do
    setup [:create_user]

    test "lists all users", %{conn: conn, user: user} do
      {:ok, index_live, html} = live(conn, ~p"/users")

      index_live |> element("table") |> open_browser()

      assert html =~ "Listing Users"
      assert html =~ user.name
    end
  end

Given the assets have been previously generated, you'll see:

But without assets: