Actions

As seen in the configuration options of a test file, you are able to run some actions, before the screenshot will be taken.

This is useful to bring the page into a specific state, you want to capture.
For example: opening a dropdown, typing something in an input or waiting for an animation to be completed.

The currently available actions are wait, click, type, scroll and function. They may be configured like this.

info

All actions may be configured with the optional @ key. It configures the sizes this action is run on.
If @ is not present, the action runs on all sizes.

Action Types

Wait

Options:

• timeout: The number of ms to wait, before executing the next action or taking the screenshot.

Example:

YAML

- "@": ["xxl"]
  action: "wait"
  timeout: 2000

JSON

[
  {
    "@": ["xxl"],
    "action": "wait",
    "timeout": 2000
  }
]

---

Click

Options:

• selector: A css selector of an element which should be clicked. If the selector evaluates to multiple elements, only the first one is clicked.

Example:

YAML

- "@": ["xxl"]
  action: "click"
  selector: "#id-to-click"

JSON

[
  {
    "@": ["xxl"],
    "action": "click",
    "selector": "#id-to-click"
  }
]

---

Type

Options:

• selector: A css selector of an element which should be typed in. If the selector evaluates to multiple elements, the first one will be used.
• text: The text to type into the element

Example:

YAML

- "@": ["xxl"]
  action: "type"
  selector: "#search"
  text: "some searchword"

JSON

[
  {
    "@": ["xxl"],
    "action": "type",
    "selector": "#search",
    "text": "some searchword"
  }
]

Scroll

Options:

• selector: A css selector of an element which should scrolled into view. If the selector evaluates to multiple elements, only the first one will be scrolled to.
• px: The number of px the page should be scrolled by

Example:

YAML

- "@": ["xxl"]
  action: "scroll"
  px: 200

- "@": ["l"]
  action: "scroll"
  selector: ".button"

JSON

[
  {
    "@": ["xxl"],
    "action": "scroll",
    "px": 200
  },
  {
    "@": ["l"],
    "action": "scroll",
    "selector": ".button"
  }
]

Function

Options:

• name: The name of the function to be executed

Example:

YAML

- action: function
  name: accept_cookies

JSON

[
  {
    "action": "function",
    "name": "accept_cookies"
  }
]