Create an action

Learn how to create test actions for Optimizely CMS scenarios including click, input, select, wait, scroll, and more. Complete reference with examples for automated testing.

Actions

Each scenario can have zero, one or multiple actions. Each action must be one of the following types.

check

Check a checkbox or radio element.

Example:

actions:
  # Check the checkbox with `tos-accept` ID
  - check: checkbox#tos-accept

click

Click an element.

Important:

If the click leads to a navigation to other URL, please ensure that the very next action wait for that URL to fully load before performing any other steps.

Example:

actions:
  # Click the button with .submit class
  - click: button.submit

focus

Focus an element.

Example:

actions:
  # Focus an input element named `email`
  - focus: input[name="email"]

goto

Type: string.

Go to specific URL.

Example:

actions:
  - goto: https://www.domain.com

hide

Hide an element - set visibility: hidden !important.

Example:

actions:
  # Hide the element with `cookie-modal` ID
  - hide: '#cookie-modal'

hover

Hover an element.

Example:

actions:
  # Hover mouse over an element contains `my-chart` ID
  - hover: '#my-chart'

input

Type text in an element.

Example:

actions:
  # Type `My Name` in an input element with `username` ID
  - input: 'input#username'
    value: My Name
    # `append` is an optional property, with `fase` as the default value
    append: false

  # Type `my-name@domain.com` in an input element with `email` ID
  - input: 'input#email'
    value: my-name@domain.com
    # `append` is an optional property, with `fase` as the default value
    append: true
  
  # Load `visual_tests/file1.txt` into the input with `file` ID
  - input: 'input#file'
    file: file1.txt
    # `useFileChooser` is an optional property, with `fase` as the default value
    useFileChooser: true
  
  # Load `visual_tests/file1.txt` and `visual_tests/other/file2.pdf`
  # into the input with `files` ID
  # Note that the input must allow upload multiple files
  - input: 'input#files'
    file:
      - file1.txt
      - other/file2.pdf
    # `useFileChooser` is an optional property, with `fase` as the default value
    useFileChooser: false

persist

Type: string.

Persists (saves) the current browser state, including cookies and local storage, to disk.

Example:

actions:
  - input: input#username
    value: aaaa
  - input: input#password
    value: pa$$w0rd
  - click: button#login-btn
  - persit: user-aaaa

You can later reuse this saved state to test the site as if you are already logged in by specifying the state name in your test suite:

state: user-aaaa

press

Press a key (or key combination) on an element.

Important:

If the press leads to a navigation to other URL, please ensure that the very next action wait for that URL to fully load before performing any other steps.

Example:

actions:
  # Select all text inside a textarea with `message` ID
  - press: 'textarea#message'
    key: Ctrl+A

remove

Remove an element - set display: none !important.

Example:

actions:
  # Remove a `div` element with class `.random-content`
  - remove: div.random-content

scroll

Scroll to an element.

Example:

actions:
  # Scroll to an element with `.report` class
  - scroll: .report

select

Select an option inside a select element.

Example:

Let say you have following HTML:

<select name="method" multiple>
  <option value="email">Send via email</option>
  <option value="sms">Send via SMS</option>
  <option value="skype">Send via Skype</option>
</select>

Then you can create select actions like following sample:

actions:
  # Select the option with `email` value
  - select: select[name="method"]
    value: email

  # Select the option with `Send via email` label
  - select: select[name="method"]
    label: Send via email

  # Select options with `sms` or `skype` value
  - select: select[name="method"]
    value:
      - sms
      - skype

Notes:

The select action requires either value or label to be set, but not both. Omit or include both of them will leading to an error.

uncheck

Uncheck a checkbox or radio element.

Example:

actions:
  # Uncheck the checkbox named `subscrible-email`
  - uncheck: checkbox[name="subscrible-email"]

wait

Wait for X miliseconds or wait for an element to appears.
If there is a navigration, add the URL pattern of the target page also.

Important:

Within a scenario, whenever there is an action that leads to a navigation to other URL, please ensure that the very next action wait for that URL to fully load before performing any other steps.

Example:

actions:
  # Delay 2 seconds
  - wait: 2000

  # Wait for an element with `popup` class to appears
  - wait: .popup

  # Wait for the navigation to `/quote`, then delay 2 seconds
  # `**` means a group of arbitrary characters
  - wait: 2000
    url: '**/quote'

  # Wait for the navigation to `/quote`, then wait for `#my-form` element to appears
  # `**` means a group of arbitrary characters
  - wait: '#my-form'
    url: '**/quote'

Shared properties

The following properties are applicable to all actions.

frame

Type: string | string[].
Default: empty.

This property specifies the selector for the target iframe within which the current action should be executed.

Example:

actions:
  # Click `#submit` element inside the `.child` iframe
  - click: '#submit'
    frame: .child
  
  # Click `#submit` element inside the `#grandchild` iframe
  # `grandchild` is an element within the `.child` iframe
  - click: '#submit'
    frame:
      - .child
      - '#granchild'