https://github.com/mcrumm/elogram

A mechanism to capture screenshots from Phoenix LiveView tests without a camera.
https://github.com/mcrumm/elogram

elixir-lang elixir-phoenix google-chrome headless-testing phoenix-framework phoenix-liveview screenshots

Last synced: 26 days ago
JSON representation

A mechanism to capture screenshots from Phoenix LiveView tests without a camera.

• Host: GitHub
• URL: https://github.com/mcrumm/elogram
• Owner: mcrumm
• License: mit
• Created: 2020-12-07T16:08:35.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-11-07T19:01:28.000Z (about 2 years ago)
• Last Synced: 2024-09-30T17:02:31.837Z (about 1 month ago)
• Topics: elixir-lang, elixir-phoenix, google-chrome, headless-testing, phoenix-framework, phoenix-liveview, screenshots
• Language: Elixir
• Homepage:
• Size: 54.7 KB
• Stars: 39
• Watchers: 6
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ELogram

Capture screenshots with the [`Phoenix.LiveViewTest`](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveViewTest.html) Element API.

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

## Installation

The package can be installed

by adding `elogram` to your list of dependencies in `mix.exs`:

```elixir

def deps do

  [

    {:elogram,

       only: :test, git: "https://github.com/mcrumm/elogram.git"}

  ]

end

```

## Capturing Screenshots

Start the screenshots server in `test/test_helper.exs`:

```diff

+ Elogram.start([])

ExUnit.start()

```

Then capture a screenshot from your LiveView:

```elixir

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

```

## Test Setup

### Headless Chrome

Start a headless browser before running your tests:

**Github Actions**

```yaml

steps:

    - name: Start Google Chrome

      run: google-chrome --headless --disable-gpu --remote-debugging-port=9222 &

```

**MacOS**

```sh

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

```

### Save Path

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

```.gitignore

# Temporary files for e.g. tests

/tmp

```