Execute PhoenixTest cases in an actual browser via Playwright.

Setup

1. Install Playwright: npm --prefix assets i -D playwright
2. Install browsers: npm --prefix assets exec playwright install --with-deps
3. Add to config/test.exs: config :phoenix_test, otp_app: :your_app, playwright: [cli: "assets/node_modules/playwright/cli.js"]
4. Add to test/test_helpers.exs: Application.put_env(:phoenix_test, :base_url, YourAppWeb.Endpoint.url())

Usage

defmodule MyFeatureTest do
  use PhoenixTest.Case, async: true
  @moduletag :playwright

  test "heading", %{conn: conn} do
    conn
    |> visit("/")
    |> assert_has("h1", text: "Heading")
  end
end

As shown above, you can use ExUnit.Case parameterized tests to run tests concurrently in different browsers.

Known limitations and inconsistencies

• PhoenixTest.select/4 option exact_option is not supported
• Playwright driver is less strict than Live and Static drivers. It does not raise errors
  • when visiting a page that returns a 404 status
  • when interactive elements such as forms and buttons are missing essential attributes (phx-click, phx-submit, action)
• A few small bugs

See tests tagged with @tag playwright: false for details.

Configuration

In config/test.exs:

config :phoenix_test,
  playwright: [
    cli: "assets/node_modules/playwright/cli.js",
    browser: [browser: :chromium, headless: System.get_env("PLAYWRIGHT_HEADLESS", "t") in ~w(t true)],
    trace: System.get_env("PLAYWRIGHT_TRACE", "false") in ~w(t true),
    trace_dir: "tmp"
  ],
  timeout_ms: 2000

Ecto SQL.Sandbox

PhoenixTest.Case automatically takes care of this. It passes a user agent referencing your Ecto repos. This allows for concurrent browser tests.

defmodule MyTest do
  use PhoenixTest.Case, async: true