Pages (Pages v3.4.2)

View Source

Entry point for interacting with pages.

Pages are built around Pages.Driver.t/0 structs. Drivers hold state about the current connection, implement @behavior Pages.Driver and must implement the String.Chars protocol to transform themselves into HTML.

Available drivers

Summary

Types

In most cases, when interacting with pages, a new page will be returned (either a %Pages.Driver.LiveView{} or a %Pages.Driver.Conn{}). When actions redirect to an external URL, Pages functions will return a tuple with {:error, :external, url}

Functions

Simulates clicking on an element at selector with title title. Set the method param to :post to click on a link that has data-method=post.

Returns value from page's context. The context is a map that can be used to store test-specific information. See also put_context/3.

Handles cases where the server issues a redirect to the client without a synchronous interaction from the user. This may be used to handle redirects issued from Phoenix.LiveView.handle_info/2 callbacks, for instance.

Instantiates a new page.

Attempt to open the current page in a web browser.

Puts value in page's context and returns the page (not the context). The context is a map that can be used to store test-specific information. See also get_context/2.

Render a change to the element at selector with the value value. See Phoenix.LiveViewTest.render_change/2 for a description of the value field.

Sends a hook event to the live view.

Performs an upload of a file input and renders the result. See Phoenix.LiveViewTest.file_input/4 for more detailed documentation of the upload argument.

Re-renders the page.

Submits a form without specifying any attributes. This function will submit any values currently set in the form HTML.

Fills in a form with attributes and submits it. Hidden parameters can by send by including a fifth enumerable.

Updates fields in a form with attributes, without submitting the form.

Finds a phoenix component with an id matching child_id, and passes it to the given function. This is helpful when a site implements stateful LiveView components, and messages should be directed to a process other than the parent LiveView pid.

Types

attrs_t()

@type attrs_t() :: Keyword.t() | map()

context_t()

@type context_t() :: %{required(atom()) => any()} | keyword()

http_method()

@type http_method() :: :get | :post

live_view_upload()

@type live_view_upload() :: %Phoenix.LiveViewTest.Upload{
  cid: term(),
  config: term(),
  element: term(),
  entries: term(),
  pid: term(),
  ref: term(),
  selector: term(),
  view: term()
}

page_type_t()

@type page_type_t() :: :live_view

result()

@type result() :: Pages.Driver.t() | {:error, :external, Path.t()}

In most cases, when interacting with pages, a new page will be returned (either a %Pages.Driver.LiveView{} or a %Pages.Driver.Conn{}). When actions redirect to an external URL, Pages functions will return a tuple with {:error, :external, url}

text_filter()

@type text_filter() :: binary() | Regex.t()

Functions

clear_connect_params(page)

@spec clear_connect_params(Pages.Driver.t()) :: result()

Clears out any params set via Phoenix.LiveViewTest.put_connect_params/2

click(page, selector)

click(page, title, selector)

click(page, method, title, selector)

Simulates clicking on an element at selector with title title. Set the method param to :post to click on a link that has data-method=post.

get_context(page, key)

@spec get_context(Pages.Driver.t(), atom()) :: any()

Returns value from page's context. The context is a map that can be used to store test-specific information. See also put_context/3.

handle_redirect(page)

@spec handle_redirect(Pages.Driver.t()) :: result()

Handles cases where the server issues a redirect to the client without a synchronous interaction from the user. This may be used to handle redirects issued from Phoenix.LiveView.handle_info/2 callbacks, for instance.

new(conn, context \\ %{})

@spec new(Plug.Conn.t(), context_t()) :: result()

Instantiates a new page.

open_browser(page)

@spec open_browser(Pages.Driver.t()) :: Pages.Driver.t()

Attempt to open the current page in a web browser.

put_context(page, key_value_pairs)

@spec put_context(Pages.Driver.t(), keyword() | %{required(atom()) => any()}) ::
  Pages.Driver.t()

put_context(page, key, value)

@spec put_context(Pages.Driver.t(), atom(), any()) :: Pages.Driver.t()

Puts value in page's context and returns the page (not the context). The context is a map that can be used to store test-specific information. See also get_context/2.

render_change(page, selector, value)

@spec render_change(Pages.Driver.t(), HtmlQuery.Css.selector(), Enum.t()) :: result()

Render a change to the element at selector with the value value. See Phoenix.LiveViewTest.render_change/2 for a description of the value field.

render_hook(page, event, value_attrs, opts \\ [])

@spec render_hook(Pages.Driver.t(), binary(), attrs_t(), keyword()) :: result()

Sends a hook event to the live view.

Arguments

namedecription
pageThe current page struct.
eventThe event name to send to handle_event.
value_attrsA map of params to send to handle_event.
optsAn optional keyword list of options.

Options

namedescription
targetThe selector of an embedded live componont to receive the event. Example: #sub-module

See Phoenix.LiveViewTest.render_hook/3 for more information.

render_upload(page, upload, entry_name, percent \\ 100)

@spec render_upload(
  Pages.Driver.t(),
  live_view_upload(),
  entry_name :: binary(),
  percent_complete :: integer()
) :: result()

Performs an upload of a file input and renders the result. See Phoenix.LiveViewTest.file_input/4 for more detailed documentation of the upload argument.

Example

entry = %{name: "file.jpg", content: File.read!("../path/to/file.jpg"), type: "image/jpeg"}
upload = Phoenix.LiveViewTest.file_input(page.live, "#selector", :entry_name, [entry])

page |> Pages.render_upload(upload, "file.jpg")

rerender(page)

@spec rerender(Pages.Driver.t()) :: result()

Re-renders the page.

submit_form(page, selector)

@spec submit_form(Pages.Driver.t(), HtmlQuery.Css.selector()) :: result()

Submits a form without specifying any attributes. This function will submit any values currently set in the form HTML.

submit_form(page, selector, attrs)

@spec submit_form(Pages.Driver.t(), HtmlQuery.Css.selector(), attrs :: attrs_t()) ::
  result()

Fills in a form with attributes and submits it. Hidden parameters can by send by including a fifth enumerable.

Arguments

namedecription
pageThe current page struct.
selectorA CSS selector matching the form.
schemaAn optional atom representing the schema of the form. Attributes will be nested under this key when submitted. See Schema.
attrsA map of attributes to send.
hidden_attrsAn optional map or keyword of hidden values to include.

Schema

This atom determines the key under which attrs will be nested when sent to the server, and corresponds to the atom which an t:Ecto.Changeset.t/0 serializes to, or the value of :as passed to Phoenix.HTML.FormData.to_form/4.

When a schema is passed, the form attrs will be received as nested params under the schema key.

If one wishes to construct the full nested map of attrs, then the schema may be omitted.

Examples

iex> conn = Phoenix.ConnTest.build_conn()
iex> page = Pages.visit(conn, "/live/form")
iex> Pages.submit_form(page, "#form", :foo, value: "rerender")

iex> conn = Phoenix.ConnTest.build_conn()
iex> page = Pages.visit(conn, "/live/form")
iex> Pages.submit_form(page, "#form", foo: [value: "rerender"])

Notes

When used with LiveView, this will trigger phx-submit with the specified attributes, and handles phx-trigger-action if present.

submit_form(page, selector, attrs, hidden_attrs)

@spec submit_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  attrs :: attrs_t(),
  hidden_attrs :: attrs_t()
) :: result()
@spec submit_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  schema :: atom(),
  attrs :: attrs_t()
) ::
  result()

submit_form(page, selector, schema, form_attrs, hidden_attrs)

@spec submit_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  schema :: atom(),
  attrs :: attrs_t(),
  hidden_attrs :: attrs_t()
) :: result()

update_form(page, selector, attrs)

@spec update_form(Pages.Driver.t(), HtmlQuery.Css.selector(), attrs :: attrs_t()) ::
  result()

update_form(page, selector, schema, attrs)

@spec update_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  schema :: atom(),
  attrs :: attrs_t()
) ::
  result()
@spec update_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  attrs :: attrs_t(),
  opts :: keyword()
) ::
  result()

update_form(page, selector, schema, attrs, opts)

@spec update_form(
  Pages.Driver.t(),
  HtmlQuery.Css.selector(),
  schema :: atom(),
  attrs :: attrs_t(),
  opts :: keyword()
) :: result()

Updates fields in a form with attributes, without submitting the form.

Arguments

namedecription
pageThe current page struct.
selectorA CSS selector matching the form.
schemaAn optional atom representing the schema of the form. Attributes will be nested under this key when submitted. See Schema.
attrsA map of attributes to send.
optsA keyword list of options.

Options

nametypedescription
targetlist(binary())A list to be sent in the _target of the form params, indicating which field has been changes.

Schema

This atom determines the key under which attrs will be nested when sent to the server, and corresponds to the atom which an t:Ecto.Changeset.t/0 serializes to, or the value of :as passed to Phoenix.HTML.FormData.to_form/4.

When a schema is passed, the form attrs will be received as nested params under the schema key.

If one wishes to construct the full nested map of attrs, then the schema may be omitted.

Examples

iex> conn = Phoenix.ConnTest.build_conn()
iex> page = Pages.visit(conn, "/live/form")
iex> Pages.update_form(page, "#form", :my_form, value: "baz")

iex> conn = Phoenix.ConnTest.build_conn()
iex> page = Pages.visit(conn, "/live/form")
iex> Pages.update_form(page, "#form", my_form: [value: "baz"])

Notes

When used with LiveView, this will trigger phx-change with the specified attributes, and handles phx-trigger-action if present.

visit(conn, path)

@spec visit(Pages.Driver.t(), Path.t()) :: result()
@spec visit(Plug.Conn.t(), Path.t()) :: result()

visit(conn, path, context)

@spec visit(Pages.Driver.t(), Path.t(), context_t()) :: result()
@spec visit(Plug.Conn.t(), Path.t(), context_t()) :: result()

Visits path.

with_child_component(page, child_id, fun)

@spec with_child_component(
  Pages.Driver.t(),
  child_id :: binary(),
  (Pages.Driver.t() -> term())
) ::
  Pages.Driver.t()

Finds a phoenix component with an id matching child_id, and passes it to the given function. This is helpful when a site implements stateful LiveView components, and messages should be directed to a process other than the parent LiveView pid.

Examples

Pages.with_child_component(page, "chat-component", fn child ->
  Pages.submit_form(child,
    [test_role: "new-chat-message"],
    :chat_message,
    contents: "Hi there!")
end)