Add DSLs for performing actions on web elements by javascript

Author: bjuric

docs/04-dsl.mdx

@@ -4238,12 +4238,89 @@ Since [v4.8.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v4.8.0)
 
 #### JS actions
 
+<details id="i-execute-js-on-element">
+  <summary class="dsl">
+ 
+  ```gherkin
+  I execute <js|javascript> on <element> "<function>"
+  ```
+
+  <p>Executes a javascript function on a web element.</p>
+  </summary>
+  <p>Where</p>
+  <ul>
+    <li><code>&lt;element&gt;</code> is the name of the element to execute the function on</li>
+    <li>
+      <code>&lt;function&gt;</code> is the javascript function that will perform the action (can be in <Link to="/docs/doc-strings">DocString</Link> position)
+      <ul>
+        <li>The function must use <Link to="/docs/js-functions">Arrow syntax</Link> and define a single argument for accepting the web element.</li>
+      </ul>
+    </li>
+  </ul>
+  <p>Example</p>
+
+  ```gherkin {3}
+    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()"
+  ```
+
+  <div class="grid-3">
+    <div><Link to="#i-execute-js-on-element">Link</Link></div>
+    <div align="center"></div>
+    <div align="right">Since <Link to="https://github.com/gwen-interpreter/gwen-web/releases/tag/v4.16.0">v4.16.0</Link></div>
+  </div>
+</details>
+
+<details id="i-execute-jsref-on-element">
+  <summary class="dsl">
+ 
+  ```gherkin
+  I execute <functionRef> on <element>
+  ```
+
+  <p>Executes a javascript function on a web element.</p>
+  </summary>
+  <p>Where</p>
+  <ul>
+    <li>
+      <code>&lt;functionRef&gt;</code> is the name of the binding containing the javascript function to execute
+      <ul>
+        <li>The referenced function must use <Link to="/docs/js-functions">Arrow syntax</Link> and define a single argument for accepting the web element.</li>
+      </ul>
+    </li>
+    <li><code>&lt;element&gt;</code> is the name of the element to execute the function on</li>
+  </ul>
+  <p>Example</p>
+
+  ```gherkin {4}
+    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
+  ```
+
+  <div class="grid-3">
+    <div><Link to="#i-execute-jsref-on-element">Link</Link></div>
+    <div align="center"></div>
+    <div align="right">Since <Link to="https://github.com/gwen-interpreter/gwen-web/releases/tag/v4.16.0">v4.16.0</Link></div>
+  </div>
+</details>
+
 <details id="element-can-be-actioned-by-javascript">
   <summary class="dsl">
+ 
+  :::caution Deprecated since v4.16.0 and will be dropped in next major Gwen 5 release.
 
   ```gherkin
   <element> can be <actioned> by <javascript|js> "<script>"
   ```
+
+  Instead use one of:
+
+  - `I execute <js|javascript> on <element> "<function>"`
+  - `I execute <functionRef> on <element>`
+:::
   <p>Registers a javascript action on an element. When the action is performed, then the javascript will execute in place of the default behaviour.</p>
   </summary>
   <p>Where</p>

docusaurus.config.js

@@ -9,7 +9,11 @@ module.exports = {
   url: 'https://gweninterpreter.org',
   baseUrl: '/',
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  markdown: {
+    hooks: {
+      onBrokenMarkdownLinks: 'warn'
+    }
+  },
   favicon: 'img/favicon.ico',
   organizationName: 'gwen-interpreter', // Usually your GitHub org/user name.
   projectName: 'gwen-interpreter.github.io', // Usually your repo name.
@@ -41,7 +45,7 @@ module.exports = {
           label: 'FAQ',
         },
         {
-          href: '/docs/dsl#data-asserts',
+          href: '/docs/dsl#js-actions',
           position: 'left',
           label: "What's New?",
         },

package.json

@@ -14,8 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.8.1",
-    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
     "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^8.1.0",
     "clsx": "^2.1.0",