Use open_browser() in tests when using WSL

Phoenix Forum Questions / Help
, , , , ,
1

Has anyone by any chance using WSL tried to use open_browser in your tests?

I’ve heard one could do something like open_browser(lv, &System.cmd("wslview", [&1])). But I have no idea how to make WSL or Elixir know how to open my default browser.

Has anyone gone through this and have been victorious? :rofl:

Thanks!

2

Not referring to tests in particular, but on WSL, you can run applications “on the Windows side”, such as cmd.exe. cmd.exe allows you to provide a shell command.

In Bash for example, you can do something like this:

cmd.exe /C "start https://elixirforum.com/"

# or
cmd.exe /C "start $( echo "https://jwt.ms/#access_token=${access_token}" )"

In Elixir, this might be a start:

System.cmd("cmd.exe", ["/C", "start https://elixirforum.com/"])

However, escaping stuff the right way can always be ‘difficult’ (https://flatt.tech/research/posts/batbadbut-you-cant-securely-execute-commands-on-windows/)

2 Likes
3

I had some success with this:

  def open_browser_wsl(view) do
    Phoenix.LiveViewTest.open_browser(view, fn html_unix_path ->
      {wsl_path, 0} = System.cmd("wslpath", ["-aw", html_unix_path])
      cmd_args = ["/C", "start", String.trim_trailing(wsl_path), "/C", "bash"]
      System.cmd("cmd.exe", cmd_args)
    end)
  end
3 Likes
4

Nice this one worked!

The only problem is adding this function every time I need to open the browser :smile:

Will keep it in a notepad!

5

Good one! Kinda the same path I was trying with System.cmd

6

Just add a helper to your ConnCase :upside_down_face:

Otherwise, one of you should consider contributing this to PhoenixTest if it’s universal enough (I had to look up what WSL is so I don’t know anything here, but I did do some work around open_browser for that lib).

7

Do your test files have a line like this:

use MyAppWeb.ConnCase

?

If so, you can just write the function in test/support/conn_case.ex and then it will be available in all your live view tests.

8

Ah, yes. This. I am saying the same thing. :slight_smile:

9

I do not know if it is universal at all. It worked for me, one day. That’s all.
After that, all bets are off
I guarantee nothing!
Life is chaos! :wink:

10

That’s the function we would need to “contribute” to: phoenix_test/lib/phoenix_test/open_browser.ex at main · germsvel/phoenix_test · GitHub

Actually it’s a good idea to contribute, but I still know too little about what’s really going on behind it to contribute, so I’m gonna do some homework and… who knows, right? :person_shrugging:

11

I tried using my answer today and it needed improvement because CSS was not being loaded.

I have a hacky way of making the CSS work (which is better than no way).

First, use this slightly better open_browser_wsl function.

      def open_browser_wsl(view) do
        Phoenix.LiveViewTest.open_browser(view, fn html_unix_path ->
          drive_dir = "/c"
          {wsl_path, 0} = System.cmd("wslpath", ["-aw", html_unix_path])
          cmd_args = [drive_dir, "start", String.trim_trailing(wsl_path), drive_dir, "zsh"]
          opts = [cd: "/mnt" <> drive_dir]
          System.cmd("cmd.exe", cmd_args, opts)
        end)
      end

It is better for 2 reasons:

  1. It changes directory so there is no more annoying warning about not being a Windows path.
  2. It makes the drive letter clearly customizable, in case that is necessary.

I usually just slap that function into the block of code in conn_case.ex that starts with:

  using do
    quote do

With the function inside the using block, any test that has use MyAppWeb.ConnCase will be able to call open_browser_wsl(view).

Now for the CSS. Configure the test Endpoint so that static URLs can be resolved. In config/text.exs, add this:

static_url_path =
  try do
    {windows_static_path, 0} = System.cmd("wslpath", ["-aw", "priv/static"])

    windows_static_path
    |> String.trim()
    |> String.trim_leading("\\")
    |> String.replace("\\", "/")
    |> then(&Kernel.<>("file://", &1))
  rescue
      # revert to default path if command not found, else re-raise the error
      e in ErlangError -> if e.original == :enoent, do: "/", else: reraise(e, __STACKTRACE__)
  end

and then finally tell the Endpoint (still in the test config file) to use this static path:

config :my_app, RangerWeb.Endpoint,
  # ...
  static_url: [host: "localhost", path: static_url_path]

The try/rescue block is to make sure people who don’t use WSL can still run tests.

It’s hacky, for sure, but now CSS will be loaded.

@ricksonoliveira Please mark this answer as the solution. It is better than my previous answer.

12

Just saw this now @slouchpie that’s very good! Thanks for this!