-
-
Notifications
You must be signed in to change notification settings - Fork 209
feat: support full-page screenshots #827
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,84 @@ | ||||||
| defmodule Wallaby.Integration.Browser.FullpageScreenshotTest do | ||||||
| use Wallaby.Integration.SessionCase, async: false | ||||||
|
|
||||||
| import Wallaby.SettingsTestHelpers | ||||||
|
|
||||||
| alias Wallaby.TestSupport.TestWorkspace | ||||||
|
|
||||||
| setup %{session: session} do | ||||||
| page = | ||||||
| session | ||||||
| |> visit("/") | ||||||
|
|
||||||
| {:ok, page: page} | ||||||
| end | ||||||
|
|
||||||
| test "taking fullpage screenshots", %{page: page} do | ||||||
| screenshots_path = TestWorkspace.generate_temporary_path() | ||||||
|
|
||||||
| ensure_setting_is_reset(:wallaby, :screenshot_dir) | ||||||
| Application.put_env(:wallaby, :screenshot_dir, screenshots_path) | ||||||
|
|
||||||
| [path] = | ||||||
| page | ||||||
| |> take_screenshot(name: "fullpage_test", full_page: true) | ||||||
| |> Map.get(:screenshots) | ||||||
|
|
||||||
| assert_in_directory(path, screenshots_path) | ||||||
| assert Path.basename(path) == "fullpage_test.png" | ||||||
| assert_file_exists(path) | ||||||
|
|
||||||
| # Verify the file is a valid PNG by checking the PNG signature | ||||||
| {:ok, file_content} = File.read(path) | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would just use |
||||||
| <<0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, _rest::binary>> = file_content | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| end | ||||||
|
|
||||||
| test "fullpage screenshot option defaults to false", %{page: page} do | ||||||
| screenshots_path = TestWorkspace.generate_temporary_path() | ||||||
|
|
||||||
| ensure_setting_is_reset(:wallaby, :screenshot_dir) | ||||||
| Application.put_env(:wallaby, :screenshot_dir, screenshots_path) | ||||||
|
|
||||||
| # Both of these should work the same way (viewport screenshot) | ||||||
| [path1] = page |> take_screenshot(name: "test1") |> Map.get(:screenshots) | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| [path2] = page |> take_screenshot(name: "test2", full_page: false) |> Map.get(:screenshots) | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| assert_file_exists(path1) | ||||||
| assert_file_exists(path2) | ||||||
| end | ||||||
|
|
||||||
| test "fullpage screenshot can be combined with log option", %{page: page} do | ||||||
| screenshots_path = TestWorkspace.generate_temporary_path() | ||||||
|
|
||||||
| ensure_setting_is_reset(:wallaby, :screenshot_dir) | ||||||
| Application.put_env(:wallaby, :screenshot_dir, screenshots_path) | ||||||
|
|
||||||
| import ExUnit.CaptureIO | ||||||
|
|
||||||
| output = | ||||||
| capture_io(fn -> | ||||||
| page | ||||||
| |> take_screenshot(name: "fullpage_logged", full_page: true, log: true) | ||||||
| end) | ||||||
|
|
||||||
| assert output =~ "Screenshot taken, find it at" | ||||||
| assert output =~ "fullpage_logged.png" | ||||||
| end | ||||||
|
|
||||||
| defp assert_in_directory(path, directory) do | ||||||
| assert Path.expand(directory) == Path.expand(Path.dirname(path)), """ | ||||||
| Path is not in expected directory. | ||||||
| path: #{inspect(path)} | ||||||
| directory: #{inspect(directory)} | ||||||
| """ | ||||||
| end | ||||||
|
|
||||||
| defp assert_file_exists(path) do | ||||||
| assert path |> Path.expand() |> File.exists?(), """ | ||||||
| File does not exist | ||||||
| path: #{inspect(path)} | ||||||
| """ | ||||||
| end | ||||||
| end | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -227,14 +227,30 @@ defmodule Wallaby.Browser do | |
|
|
||
| Pass `[{:name, "some_name"}]` to specify the file name. Defaults to a timestamp. | ||
| Pass `[{:log, true}]` to log the location of the screenshot to stdout. Defaults to false. | ||
| Pass `[{:full_page, true}]` to capture the entire page, not just the viewport. Defaults to false. | ||
|
|
||
| ## Full Page Screenshots | ||
|
|
||
| When `full_page: true` is specified: | ||
| - Chrome: Uses Chrome DevTools Protocol (CDP) for native fullpage capture | ||
| - Firefox: Uses GeckoDriver's Moz-specific fullpage screenshot endpoint | ||
|
Comment on lines
+235
to
+236
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this information relevant? I feel like implies to the user that they should know how these things work, but the respective webdriver takes care of it.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It might be useful to indicate which versions of the webdriver that supports this functionality |
||
|
|
||
| Full page screenshots capture the entire document, including content outside the viewport. | ||
| This is useful for capturing long pages without scrolling or stitching multiple screenshots. | ||
| Both implementations use native browser APIs for accurate rendering. | ||
| """ | ||
| @type take_screenshot_opt :: {:name, String.t()} | {:log, boolean} | ||
| @type take_screenshot_opt :: {:name, String.t()} | {:log, boolean} | {:full_page, boolean} | ||
| @spec take_screenshot(parent, [take_screenshot_opt]) :: parent | ||
|
|
||
| def take_screenshot(%{driver: driver} = screenshotable, opts \\ []) do | ||
| image_data = | ||
| screenshotable | ||
| |> driver.take_screenshot | ||
| if opts[:full_page] do | ||
| screenshotable | ||
| |> driver.take_fullpage_screenshot() | ||
| else | ||
| screenshotable | ||
| |> driver.take_screenshot() | ||
| end | ||
|
|
||
| name = | ||
| opts | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -197,6 +197,11 @@ defmodule Wallaby.Selenium do | |
| @doc false | ||
| defdelegate take_screenshot(session_or_element), to: WebdriverClient | ||
|
|
||
| @doc false | ||
| def take_fullpage_screenshot(session_or_element) do | ||
| WebdriverClient.take_fullpage_screenshot_moz(session_or_element) | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. So, selenium is not only used for Firefox. You can use it with any browser/web driver it supports. I think this code won't work if you use selenium with chrome. |
||
| end | ||
|
|
||
| @doc false | ||
| def cookies(%Session{} = session) do | ||
| WebdriverClient.cookies(session) | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.