title: JavaFX to monitor/record events performed on a web page
body: <p>I have a requirement to record events performed on a web page. </p>
  
  <p>Eg. Filling registration form. </p>
  
  <p>Recorder should capture the keyword entries and clicks performed on the page and play back when requested. At time same time recorder should also capture the actual element that generates the event.
  Say when i key in the firstName in</p>
  
  <blockquote>
    <p><code>&lt;input type="text" id="f_name"/&gt;</code></p>
  </blockquote>
  
  <p>recorder should be able to capture the id 'f_name'</p>
  
  <p>I was wondering if I could use JavaFX for that!?. JavaFX is allowing me to load a page and I could detect various operations performed on the page by registering the appropriate event listeners. But it is not giving me any useful information about which element in the page has created that event.</p>
  
  <pre><code>   package test1;
  
  import javafx.application.Application;
  import javafx.concurrent.Worker;
  import javafx.scene.Scene;
  import javafx.scene.control.ButtonType;
  import javafx.scene.control.Dialog;
  import javafx.scene.layout.VBox;
  import javafx.scene.web.WebEngine;
  import javafx.scene.web.WebView;
  import javafx.stage.Stage;
  import netscape.javascript.JSObject;
  
  public class JSTEst2 extends Application{
  
      public static void main(String[] args) {
          launch(args);
      }
  
      @Override
      public void start(Stage primaryStage) throws Exception {
          WebView webView = new WebView();
          WebEngine engine = webView.getEngine();
  
          engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -&gt; {
              if (newState == Worker.State.SUCCEEDED) {
                  //if the page is loaded
  
                  JSObject window = (JSObject) engine.executeScript("window");
                  window.setMember("app", this);
                  //System.out.println(engine.executeScript("document.querySelector('body').innerHTML"));
                  //engine.executeScript("document.querySelector('body').addEventListener('click', function(event) { alert(event.target.id); app.getCallBack(event.target.id);}, false);");
                  engine.executeScript("document.addEventListener('click', function(event) { alert(event.target.id); app.getCallBack(event.target.id);}, false);");
              }
          });
  
  
  
          /*engine.loadContent(
                  "&lt;html&gt;&lt;body&gt;"
                  + " &lt;ul class=\"ct\"&gt;"
                  + "&lt;li id=\"first\"&gt;first&lt;/li&gt;"
                  + "&lt;li id=\"second\"&gt;second&lt;/li&gt;"
                  + " &lt;li id=\"third\"&gt;third&lt;/li&gt;"
                  + "&lt;/ul&gt;"
                  + "&lt;input type=\"button\" value=\"Add &lt;li&gt;\" /&gt;"
                  + "&lt;/body&gt;"
                  + "&lt;/html&gt;"
          );*/
  
          engine.load("&lt;my_url&gt;");
  
  
          //String javascript = "document.querySelector('body').addEventListener('click', function(event) {  if (event.target.tagName.toLowerCase() === 'li') { console.log(event.target.id);   alert(event.target.id); }});";
  
  
          engine.setOnAlert(event -&gt; showAlert(event.getData()));
          engine.setConfirmHandler(message -&gt; showConfirm(message));
  
  
  
          //engine.executeScript(javascript);
  
  
          VBox root = new VBox();
  
          root.getChildren().add(webView);
  
          root.setStyle("-fx-padding: 10;" +
  
                  "-fx-border-style: solid inside;" +
  
                  "-fx-border-width: 2;" +
  
                  "-fx-border-insets: 5;" +
  
                  "-fx-border-radius: 5;" +
  
                  "-fx-border-color: blue;");
  
          Scene scene = new Scene(root);
  
          primaryStage.setScene(scene);
  
          primaryStage.show();
  
      }
  
  
        private void showAlert(String message) {
              Dialog&lt;Void&gt; alert = new Dialog&lt;&gt;();
              alert.getDialogPane().setContentText(message);
              alert.getDialogPane().getButtonTypes().add(ButtonType.OK);
              alert.showAndWait();
          }
  
          private boolean showConfirm(String message) {
              Dialog&lt;ButtonType&gt; confirm = new Dialog&lt;&gt;();
              confirm.getDialogPane().setContentText(message);
              confirm.getDialogPane().getButtonTypes().addAll(ButtonType.YES, ButtonType.NO);
              boolean result = confirm.showAndWait().filter(ButtonType.YES::equals).isPresent();
  
              // for debugging:
              System.out.println(result);
  
              return result ;
          }
  
  private void getCallBack(String data) {
      System.out.println("----&gt;" + data);
  }
  
  
  
  }
  </code></pre>
  
  <p>When i clicked on 'firstname' input field,
  <a href="https://i.stack.imgur.com/kJaVS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kJaVS.png" alt="enter image description here"></a></p>
  
  <p>the sys out in the listener printed something like this,</p>
  
  <pre><code>WebView@90e64cf[styleClass=web-view]
  javafx.scene.Scene@52fca713
  </code></pre>
  
  <p>which I can hardly interpret.</p>
  
  <p>Is JavaFX he right approach is this case?
  If Yes, how do i get the required information using JavaFX?</p>
  
  <p><strong>##################UPDATE##################</strong></p>
  
  <p>I have updated the code to use <strong>executeScript()</strong> method. Now it shows the target element id in alert box, but i need to communicate it back to my java application. The logic I have in the code is not working.  Any thoughts!!?</p>