Add Wallaby driver

.gitignore

@@ -25,5 +25,9 @@ phoenix_test-*.tar
 # Temporary files, for example, from tests.
 /tmp/
 
+# Local configuration
+.envrc
+
 # Ignore assets that are produced by build tools.
-/priv/static/assets/
+/priv/static/assets/*
+!/priv/static/assets/app.css

config/test.exs

@@ -20,3 +20,11 @@ config :esbuild,
     cd: Path.expand("../test/assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
+
+config :wallaby,
+  otp_app: :phoenix_test,
+  js_logger: nil,
+  chromedriver: [
+    headless: System.get_env("WALLABY_HEADLESS", "t") in ["t", "true"],
+    binary: System.get_env("CHROME_EXECUTABLE", "")
+  ]

lib/phoenix_test.ex

@@ -213,6 +213,10 @@ defmodule PhoenixTest do
   LiveView or a static view. You don't need to worry about which type of page
   you're visiting.
   """
+  def visit(%Plug.Conn{assigns: %{phoenix_test_js: true}} = conn, path) do
+    PhoenixTest.Wallaby.build(conn, path)
+  end
+
   def visit(conn, path) do
     conn
     |> recycle(all_headers(conn))
@@ -237,6 +241,32 @@ defmodule PhoenixTest do
     Enum.map(conn.req_headers, &elem(&1, 0))
   end
 
+  @doc """
+  Helper to run tests with the Javascript (Wallaby) driver via `@tag :js`.
+
+  ```elixir
+  setup %{conn: conn} = context do
+    conn = if context[:js], do: with_js_driver(conn), else: conn
+    %{conn: conn}
+  end
+
+  @tag :js
+  test "with wallaby", %{conn: conn} do
+    visit(conn, "/path")
+  end
+
+  test "without wallaby", %{conn: conn} do
+    visit(conn, "/path")
+  end
+  ```
+
+  You can also use `@describetag :js` and `@moduletag :js`.
+  Refer to the [ExUnit docs](https://hexdocs.pm/ex_unit/1.16.3/ExUnit.Case.html#module-tags) for more details.
+  """
+  def with_js_driver(%Plug.Conn{} = conn) do
+    Plug.Conn.assign(conn, :phoenix_test_js, true)
+  end
+
   @doc """
   Clicks a link with given text and performs the action.
 

lib/phoenix_test/field.ex

@@ -7,8 +7,8 @@ defmodule PhoenixTest.Field do
   alias PhoenixTest.Query
   alias PhoenixTest.Utils
 
-  @enforce_keys ~w[source_raw parsed label id name value selector]a
-  defstruct ~w[source_raw parsed label id name value selector]a
+  @enforce_keys ~w[source_raw parsed label id name value selector raw]a
+  defstruct ~w[source_raw parsed label id name value selector raw]a
 
   def find_input!(html, input_selectors, label, opts) do
     field = Query.find_by_label!(html, input_selectors, label, opts)
@@ -23,13 +23,13 @@ defmodule PhoenixTest.Field do
       id: id,
       name: name,
       value: value,
-      selector: Element.build_selector(field)
+      selector: Element.build_selector(field),
+      raw: field
     }
   end
 
   def find_checkbox!(html, input_selector, label, opts) do
     field = Query.find_by_label!(html, input_selector, label, opts)
-
     id = Html.attribute(field, "id")
     name = Html.attribute(field, "name")
     value = Html.attribute(field, "value") || "on"
@@ -41,7 +41,8 @@ defmodule PhoenixTest.Field do
       id: id,
       name: name,
       value: value,
-      selector: Element.build_selector(field)
+      selector: Element.build_selector(field),
+      raw: field
     }
   end
 
@@ -60,7 +61,8 @@ defmodule PhoenixTest.Field do
       id: id,
       name: name,
       value: value,
-      selector: Element.build_selector(field)
+      selector: Element.build_selector(field),
+      raw: field
     }
   end
 

lib/phoenix_test/link.ex

@@ -1,6 +1,7 @@
 defmodule PhoenixTest.Link do
   @moduledoc false
 
+  alias PhoenixTest.Element
   alias PhoenixTest.Html
   alias PhoenixTest.Query
   alias PhoenixTest.Utils
@@ -17,7 +18,7 @@ defmodule PhoenixTest.Link do
       raw: link_html,
       parsed: link,
       id: id,
-      selector: selector,
+      selector: Element.build_selector(link),
       text: text,
       href: href
     }