Wallaby testing when browser session is required (i.e. login)

How do I test some code if a browser session with some user data inside (perhaps from Guardian) is required? How do I get that session data into my Wallaby session?

1 Like

By performing the steps necessary to create that data. Click login, fill form etc

If you’re not concerned about phoenix’s ability to hold the session you can also test this without browser testing. You should also be able to set values to the conn’s session manually like so:

conn =
      conn
      |> bypass_through(MyAppWeb.Router, [:browser])
      |> put_session(:account_id, 1)

get conn, …
1 Like

Yeah. But doesn’t Wallaby create a new session for each test? If so, I must perform the steps each time I want to test something that requires me to authenticate?

Yeah, but when I’m using Wallaby (feature/acceptance testing), there is no conn, only the wallaby session. How do I then insert data into the browser session?

1 Like

Yes. That’s what setup is for. Or you can write a helper function that does this.

2 Likes

There’s no session data on the browser side. There is in the case of a default phoenix project just a cookie, which identifies the session a user does have on the server side. So you might want to see how wallaby does handle cookies in browser sessions (in the wallaby docs sessions seem to mean browsing sessions).

Edit:
Also logging in in browser testing is probably simplest done with the login page or whatever login machanism you’re using.

1 Like

Thanks a lot everyone! After googling for the terms that were suggested, I found a GitHub issue that explained that the best way of going about this is to write a helper method thats called in setup to login via the normal steps a user would take.

https://github.com/keathley/wallaby/issues/57

1 Like

It’s 2020 and Wallaby can access browser cookies. Is there any way to login a user without walking through the login steps?

I asked on stackoverflow as well:

1 Like

For future reference in case anyone bumps into this:

# test/support/test_helpers.ex
defmodule MyAppWeb.TestHelpers do
  @user_remember_me "_my_app_web_user_remember_me"

  def log_in(%{session: session} = context) do
    user = Map.get(context, :user, user_fixture())
    user_token = MyApp.Accounts.generate_user_session_token(user)

    endpoint_opts = Application.get_env(:dorado, MyAppWeb.Endpoint)
    secret_key_base = Keyword.fetch!(endpoint_opts, :secret_key_base)

    conn =
      %Plug.Conn{secret_key_base: secret_key_base}
      |> Plug.Conn.put_resp_cookie(@user_remember_me, user_token, sign: true)

    session
    |> visit("/")
    |> set_cookie(@user_remember_me, conn.resp_cookies[@user_remember_me][:value])

    {:ok, %{session: session, user: user}}
  end
end

This assumes you created MyApp.Accounts via mix phx.gen.auth. The test setup can then simply look like this:

  setup context do
    log_in(context)
  end
5 Likes

Thanks so much for providing this. Im trying to emulate something similar, but have errors stating set_cookie/3 and visit/2 are not available. I tried adding use Wallaby.Feature but that isnt available for a .ex file (undefined function setup/2 (there is no such import)).

Is there a piece I am missing from this setup? I have a “vanilla” mix phx.gen.auth.

I have this login helper working for my app, using wallaby, ex machina, and auth generator:

defmodule MyAppElixirWeb.TestHelpers.AdminAuthHelper do
  use Wallaby.DSL

  import MyAppElixir.Factories.AdminFactory

  @admin_cookie "_myapp_elixir_web_admin_remember_me"

  def create_admin_and_log_in(session) do
    admin =
      build(:admin, %{})
      |> set_password("1VeryValidPassword$")
      |> insert()

    admin_token = MyAppElixir.Accounts.generate_admin_session_token(admin)

    endpoint_opts =
      Application.get_env(:myapp_elixir, MyAppElixirWeb.Endpoint)

    secret_key_base = Keyword.fetch!(endpoint_opts, :secret_key_base)

    conn =
      %Plug.Conn{secret_key_base: secret_key_base}
      |> Plug.Conn.put_resp_cookie(
        @admin_cookie,
        admin_token,
        sign: true
      )

    visit_a_page_to_set_auth_cookie_for_wallaby(session, conn)

    {:ok, %{session: session, admin: admin}}
  end

  defp visit_a_page_to_set_auth_cookie_for_wallaby(session, conn) do
    session
    |> visit("/")
    |> set_cookie(
      @admin_cookie,
      conn.resp_cookies[@admin_cookie][:value]
    )
  end
end

I think you may have to add import Wallaby.Browser to the module

1 Like

Is this still working for you?
I have been working on a very similar problem, trying to set a cookie that will work for the phx_gen_auth session cookie.
I am having a problem with signed cookies because the session cookie uses the configured signing salt but put_resp_cookie uses a different signing salt (the cookie name appended to “_cookie”).

@slouchpie did you find a solution for the examples above?

I tried to use @stratigos example (but using the user_id with map)

feature "put cookie directly", ctx do
      endpoint_opts = Application.get_env(:runa, RunaWeb.Endpoint)
      secret_key_base = Keyword.fetch!(endpoint_opts, :secret_key_base)

      conn =
        %Plug.Conn{secret_key_base: secret_key_base}
        |> Plug.Conn.put_resp_cookie("_runa_key", %{user_id: ctx.user.id},
          sign: true
        )

      resp_cookie = conn.resp_cookies["_runa_key"][:value]

      ctx.session
      |> visit("/")
      |> set_cookie("_runa_key", resp_cookie)
      |> visit("/team")
      |> assert_has(Query.css("[aria-label='Team members']"))
    end

but ran into a few problems (these are pictured), code here

  1. Empty session data inside Plug.Session

  2. Strange format of encoded cookies, tuple with timestamp instead of map

req_cookies: SFMyNTY.g2gDdAAAAAF3B3VzZXJfaWRiAAInSG4GAEA0WjSWAWIAAVGA.I4hPlHmkS2Jrz5qZgpwHv7AvGXVCqpW7Hy6oxNmCdQo
encoded_cookie_data: {%{user_id: 141128}, 1744635049024, 86400}

If someone can explain the obtained result, I will be grateful. I have prepared a test example

git clone -b demo_e2e_set_cookie --single-branch git@github.com:ravecat/runa.git
mix setup
mix test.watch --only only

I stopped using wallaby and I am using GitHub - ftes/phoenix_test_playwright: Execute PhoenixTest cases in an actual browser via Playwright. instead.

I did some work on this repo to set session cookies and response cookies. Afford adding/removing cookies by peaceful-james · Pull Request #18 · ftes/phoenix_test_playwright · GitHub

I have found playwright to be very stable (less random failures) and recommend switching to this library, if you can.

See the new add_session_cookie function. It works great

Ok, Is the problem that set_cookie is not working as expected? Could you give more information

About PhoenixTestPlaywright. How’s the parity of features relative to playwright?

I am not an expert on the Wallaby code but I know from working on the feature for the playwright lib that put_resp_cookie and the session cookie use different signing salt. Looking at the wallaby code here wallaby/lib/wallaby/webdriver_client.ex at e71ce54ac4ae03d9847ba00b2af99fa52a1da308 · elixir-wallaby/wallaby · GitHub i see nothing being done to support session cookies in Phoenix. I am happy for somebody else to prove me wrong.

As for the comparison of features between the libs, I imagine Wallaby has more features due its maturity. But I am really not an authority on either library.

Here is a real test that uses playwright in one of my projects:

You can see how easy it is to set the session cookie. That is the primary reason I recommend using this lib. This project in particular only has “passkey” (WebAuthn) authentication and I really wanted to avoid dealing with that :smiley:

BTW the session options module looks like this:

and the produce(context thing in the test is using seed_factory | Hex

PS When using Wallaby (and previously Hound), I had bad problems when running async tests with concurrent sessions. I got failures that I could not reproduce reliably, nor even understand. The playwright lib has simply been working well for me. This is anecdotal “evidence” and I strongly suggest you use whatever works best for you.

PPS If using an older Elixir version, you will need to do Base.encode64(token, padding: false).

I see this discussion reanimated and maybe just 2 cents from me. I usually solve this with having “autologin” controller, and corresponding route that are only present if Mix.env() == :test.

Then, I just do “visit /autologin/:user_id” as a first step of the test and user is logged in to the account specified by ID.

Again, this needs to be deployed carefully so that the route nor controller are not present in other environments, but should work well with Playwright and Wallaby alike.

2 Likes

Wrote helper for change Wallaby session based on desired data, I’ve try to generate a session cookie without a real request by manually simulating parts of the Plug pipeline. It forces the execution of any before_send hooks to finalize the response (which includes generating the cookie). Current approach is a bit closer to actual cookie generation than just put_resp_cookie

put_session.ex

 @spec put_session(Wallaby.Session.t(), atom(), term()) :: Wallaby.Session.t()
  def put_session(session, key, value) do
    endpoint_opts = Application.get_env(:runa, AppWeb.Endpoint)
    secret_key_base = Keyword.fetch!(endpoint_opts, :secret_key_base)
    session_opts = Keyword.fetch!(endpoint_opts, :session_options)
    cookie_key = Keyword.fetch!(session_opts, :key)

    conn =
      %Plug.Conn{secret_key_base: secret_key_base}
      |> Plug.Session.call(Plug.Session.init(session_opts))
      |> Plug.Conn.fetch_session()
      |> Plug.Conn.put_session(key, value)
      |> Plug.Conn.resp(:ok, "")
      |> then(fn conn ->
        Enum.reduce_while(conn.private.before_send || [], conn, fn fun, acc ->
          {:cont, fun.(acc)}
        end)
      end)

    resp_cookie = conn.resp_cookies[cookie_key][:value]

    session
    |> Wallaby.Browser.visit("/")
    |> Wallaby.Browser.set_cookie(cookie_key, resp_cookie)
  end

Helper required session options inside test environment test.exs

config :runa, AppWeb.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 4002],
  secret_key_base:
    "C3Vz504bPAE0Ik6A4nGbALDBrwNFGurw445+WHG8e7H9toKW8EfaXfhJN+K",
  session_options: [
    store: :cookie,
    key: "_awesome_test",
    signing_salt: "buKCuE47",
    same_site: "Lax"
  ],
  server: true

and minor changes endpoint.ex

  @session_options Application.compile_env(
                     :runa,
                     [AppWeb.Endpoint, :session_options],
                     store: :cookie,
                     key: "_default_key",
                     signing_salt: "buKCuE42",
                     same_site: "Lax"
                   )

Example

    feature "has ability to delete non-owner members", ctx do
      session =
        put_session(ctx.session, :user_id, ctx.user.id)
        |> visit("/team")
        |> assert_has(Query.css("[aria-label='Team members']"))

      {member, _} =
        Enum.find(ctx.members, fn {_, role} -> role.role != :owner end)

      assert_has(
        session,
        Query.css("[aria-label=\"Member #{member.name} form\"]",
          text: member.name
        )
      )
      |> click(Query.css("[aria-label=\"Delete #{member.name} from team\"]"))
      |> click(Query.css("[aria-label=\"Confirm delete contributor\"]"))
      |> visit("/team")
      |> assert_has(
        Query.css("[aria-label=\"Member #{member.name} form\"]", count: 0)
      )
    end