Capture screenshots with the Phoenix.LiveViewTest Element API.

This package is EXPERIMENTAL and should not be used by anyone.

The package can be installed by adding elogram to your list of dependencies in mix.exs:

def deps do
  [
    {:elogram,
       only: :test, git: "https://github.com/mcrumm/elogram.git"}
  ]
end

Start the screenshots server in test/test_helper.exs:

+ Elogram.start([])
ExUnit.start()

Then capture a screenshot from your LiveView:

defmodule MyAppWeb.PageLiveTest do
  use MyAppWeb.ConnCase

  import Phoenix.LiveViewTest
  import Elogram.CaptureScreenshot

  test "a thousand words", %{conn: conn} end
    {:ok, view, _} = live(conn, "/")

    assert view
           |> capture_screenshot(name: "welcome.png")
           |> render() =~ "Welcome to Phoenix!"
  end
end

Start a headless browser before running your tests:

Github Actions

steps:
    - name: Start Google Chrome
      run: google-chrome --headless --disable-gpu --remote-debugging-port=9222 &

MacOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --remote-debugging-port=9222

By default screenshots will be saved to tmp/screenshots, so you may wish to update your .gitignore file to include the tmp directory:

# Temporary files for e.g. tests
/tmp