JS bindings

<name> is defined by <javascript|js> "<script>"

Associates a name with the return value of a JavaScript expression or function.

Where

<name> is the name to associate
<javascript|js> is javascript (or js since v2.46.0)
<script> is the javascript expression or function that will return the value (can be in DocString position)

Optionally accepts the @Eager, @Lazy or @Masked annotations.

@Eager immediately evaluates the <expression> and binds the result to <name>
@Lazy evaluates the <expression> and binds the result to <name> when it is first referenced
In the absence of either of the above annotations, <expression> is evaluated every time <name> is referenced
@Masked masks the captured value to prevent it from being logged as clear text

Examples

  Given iso date is defined by js "new Date().toISOString().substring(0, 10)"
   Then iso date should match regex "^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])$"

Link

Since v1.0.0

<name> is defined by <javascriptRef> applied to "<argument>"

Applies a JavaScript function to an argument and binds the result to <name> in the global scope.

Where

<name> is the name to bind the function result to
<javascriptRef> is the name of the binding containing the javascript function to apply
<argument> argument to apply the function

Optionally accepts the @Eager, @Lazy or @Masked annotations.

@Eager immediately evaluates the <expression> and binds the result to <name>
@Lazy evaluates the <expression> and binds the result to <name> when it is first referenced
In the absence of either of the above annotations, <expression> is evaluated every time <name> is referenced
@Masked masks the captured value to prevent it from being logged as clear text

Examples

  Given iso date is defined by js "new Date().toISOString().substring(0, 10)"
    And toDMY is defined by js
        """
        (ymd) => {
          var parts = ymd.split('-');
          return parts[2] + '/' + parts[1] + '/' + parts[0];
        }
        """
    And dmy date is defined by toDMY applied to "${iso date}"
   Then dmy date should match regex "^([0-2]\d|3[01])/([0]\d|1[0-2])/\d{4}$"

  Given toMDY is defined by js
        """
        (ymd) => {
          var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
          var parts = ymd.split('-');
          return months[parseInt(parts[1]) - 1] + ' ' + parts[2] + ' ' + parts[0];
        }
        """
    And dmy date is defined by toMDY applied to "2022-04-05"
   Then dmy date should be "Apr 05 2022"

Link

Since v3.10.1

<name> is defined by <javascriptRef> applied to "<arguments>" delimited by "<delimiter>"

Applies a JavaScript function to mutiple arguments using a customer delimiter and binds the result to <name> in the global scope.

Where

<name> is the name to bind the function result to
<javascriptRef> is the name of the binding containing the javascript function to apply
<arguments> a delimited list of arguments to apply the function to
<delimiter> is the delmiter used in <arguments>
- The 1st agrument is referenced in the JavaScript as arguments[0], the 2nd argument as arguments[1], the 3rd as arguments[2] and so on.

Optionally accepts the @Eager, @Lazy or @Masked annotations.

@Eager immediately evaluates the <expression> and binds the result to <name>
@Lazy evaluates the <expression> and binds the result to <name> when it is first referenced
In the absence of either of the above annotations, <expression> is evaluated every time <name> is referenced
@Masked masks the captured value to prevent it from being logged as clear text

Examples

  Given iso date is defined by js "new Date().toISOString().substring(0, 10)"
    And toDMY is defined by js "(y,m,d) => d + '/' + m + '/' + y"
    And dmy date is defined by toDMY applied to "${iso date}" delimited by "-"
   Then dmy date should match regex "^([0-2]\d|3[01])/([0]\d|1[0-2])/\d{4}$"

  Given toISO is defined by js
        """
        (m,d,y) => {
          var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
          var mNo = months.indexOf(m) + 1;
          if (mNo < 10) mNo = '0' + mNo;
          return y + '-' + mNo + '-' + d;
        }
        """
    And iso date is defined by toISO applied to "Apr 05 2022" delimited by " "
   Then iso date should be "2022-04-05"

Link

Since v3.10.0

<name> is defined by <javascriptRef> applied to <element>

Applies a JavaScript function to an element and binds the result to <name> in the global scope.

Where

<name> is the name to bind the function result to
<javascriptRef> is the name of the binding containing the javascript single argument function to apply
<element> is the name of the web element to apply the function to

Optionally accepts the @Eager, @Lazy or @Masked annotations.

@Eager immediately applies the function to the element and binds the result to <name>
@Lazy applies the function to the element and binds the result to <name> when it is first referenced
In the absence of either of the above annotations, the function is applied to the element every time <name> is referenced
@Masked masks the captured value to prevent it from being logged as clear text

Examples

  Given getHref is defined by js "(elem) => elem.getAttribute('href')"
    And the todo link can be located by xpath "//a[contains(text(),'TodoMVC')]"
    And href is defined by getHref applied to the todo link
   When I navigate to "https://todomvc.com/examples/react/dist/"
   Then href should be "http://todomvc.com"

  Given getHref is defined by js 
    """
    (elem) => { 
      return elem.getAttribute('href')
    }
    """
    And the todo link can be located by xpath "//a[contains(text(),'TodoMVC')]"
   When I navigate to "https://todomvc.com/examples/react/dist/"
    And @Eager href is defined by getHref applied to the todo link
   Then href should be "http://todomvc.com"

Link

Since v4.6.0