Improving SEO and Enhancing Static Blog Posts with Wallaby + Image + LiveBook for Social Media Sharing: https://mishka.tools/blog/improving-seo-and-enhancing-static-blog-posts-with-wallaby-image-livebook-for-social-media-sharing

wallaby.livemd

Wallaby Screenshot

Mix.install([{:wallaby, "~> 0.30"}, {:image, "~> 0.54.4"}])

Set required config

Application.put_env(:wallaby, :driver, Wallaby.Chrome)
Application.put_env(:wallaby, :base_url, "http://localhost:4000/chelekom/docs")
Application.put_env(:wallaby, :chromedriver, path: "/usr/local/bin/chromedriver")
Application.put_env(:wallaby, :screenshot_dir, "/YOUR_PATH/mishka/priv/static/images/docs/chelekom")

Start Wallaby

{:ok, _} = Application.ensure_all_started(:wallaby)

Add Wallaby DSL

This is just for testing, not about our job

use Wallaby.DSL

Add my WebSite docs pages as a list

defmodule Docs do
  def list() do
    [
      "/breadcrumb",
      "/dropdown",
      "/mega-menu",
      "/menu"
    ]
  end
end

"""
Page count: #{length(Docs.list())}
"""

ImageProcessor for cropping

defmodule ImageProcessor do
  @folder_path Application.compile_env(:wallaby, :screenshot_dir)
  
  def run() do    
    {:ok, files} = File.ls(@folder_path)

    files
    |> Enum.reject(&Path.extname(&1) != ".png")
    |> Enum.each(fn file ->
      file_path = Path.join([@folder_path, file])

      case Image.open(file_path) do
        {:ok, image} ->
          original_width = 1280
          new_width = original_width - 80
          new_height = 428

          {:ok, cropped_image} = Image.crop(image, 40, 0, new_width, new_height)

          output_path = Path.join([@folder_path, "cropped_#{file}"])
          Image.write(cropped_image, output_path)
          File.rm(file_path)

        {:error, reason} ->
          IO.puts("Not processed: #{file}: #{reason}")
      end
    end)
  end
end

Wallaby Screenshot maker

defmodule Screenshot do
  def run() do
    {:ok, session} = 
      Wallaby.start_session(
        window_size: [width: 1280, height: 720],
        headless: false,
        chromeOptions: %{
          args: [],
          useAutomationExtension: false,
          excludeSwitches: ["enable-automation"]
        }
      )
    
    
      Enum.reduce(Docs.list(), session, fn item, acc ->
        file_name = if item == "/", do: "get-started", else: String.replace(item, "/", "")
        
        Wallaby.Browser.visit(acc, item)
        |> Wallaby.Browser.take_screenshot(name: file_name)
        |> Wallaby.Browser.assert_has(Query.css(".footer-custom-component", visible: true))
        |> Wallaby.Browser.find(Query.text("Netherlands", visible: true))
        acc
      end)
    
    
    Wallaby.end_session(session)
  end
end

Extra some jobs

defmodule ExtraJob do
  @folder_path Application.compile_env(:wallaby, :screenshot_dir)
  
  def run() do
    File.ls!(@folder_path)
    |> Enum.reject(&Path.extname(&1) != ".png" and !String.starts_with?(&1, "cropped_"))
    |> Enum.each(fn file -> 
      new_name = String.replace_prefix(file, "cropped_", "")
      old_path = Path.join([@folder_path, file])
      new_path = Path.join([@folder_path, new_name])
      File.rename(old_path, new_path)
    end)
  end
end

Action section

Screenshot.run()
ImageProcessor.run()
ExtraJob.run()