Skip to main content

JS actions

I execute <js|javascript> on <element> "<function>"

Executes a javascript function on a web element.

Where

  • <element> is the name of the element to execute the function on

  • <function> is the javascript function that will perform the action (can be in DocString position)

    • The function must use Arrow syntax and define a single argument for accepting the web element.

Example

  Given the todo link can be located by xpath "//a[contains(text(),'TodoMVC')]"
   When I navigate to "https://todomvc.com/examples/react/dist/"
    And I execute js on the todo link "(elem) => elem.click()"
Since v4.16.0
I execute <functionRef> on <element>

Executes a javascript function on a web element.

Where

  • <functionRef> is the name of the binding containing the javascript function to execute

    • The referenced function must use Arrow syntax and define a single argument for accepting the web element.
  • <element> is the name of the element to execute the function on

Example

  Given the todo link can be located by xpath "//a[contains(text(),'TodoMVC')]"
    And the click function is defined by js "(elem) => elem.click()"
   When I navigate to "https://todomvc.com/examples/react/dist/"
    And I execute the click function on the todo link
Since v4.16.0
Deprecated since v4.16.0 and will be dropped in next major Gwen 5 release.
<element> can be <actioned> by <javascript|js> "<script>"

Instead use one of:

  • I execute <js|javascript> on <element> "<function>"
  • I execute <functionRef> on <element>

Registers a javascript action on an element. When the action is performed, then the javascript will execute in place of the default behaviour.

Where

  • <element> is the name of the element to register the action on

  • <actioned> is one of:

    • clicked to perform the action when the element is clicked
    • right clicked to perform the action when the element is right clicked, since v2.8.0
    • double clicked to perform the action when the element is double clicked, since v2.12.0
    • submitted to perform the action when the form element is submitted
    • checked (or ticked since v2.4.0) to perform the action when the checkbox element is ticked
    • unchecked (or unticked since v2.4.0) to perform the action when the checkbox element is unticked
    • selected to perform the action when a dropdown option is selected in the element
    • deselected to perform the action when a mutli-select dropdown option is deselected in the element, since v2.13.0
    • typed to perform the action when text is typed into the element
    • entered to perform the action when text is entered into the element
    • tabbed to perform the action when the tab key is pressed in the element, since v2.17.1
    • cleared to perform the action when the text is cleared in the element
    • moved to to perform the action when the focus is moved to the element
  • <javascript|js> is javascript (or js , since v2.46.0)

  • <script> is the javascript expression or function that will perform the action (can be in DocString position)

    • The reference to the element will be provided to the javascript through an implicit object named element.
    • For a one liner expression, no function, arrow declaration or return prefix is required

    • For a function, use either:

      • Arrow syntax (preferred): () => { body } (Since v3.56.0)
      • Or anonymous function syntax (legacy): (function(){ body })()

Example

  Given the submit button can be located by css ".submit"
    And the submit button can be clicked by js "element.click()"
   When I click the submit button
Since v1.8.0