javascript google-chrome popup rpa uipath

How to extract data from Google Chrome JavaScript Alert Popup using UiPath

I want to extract the text and then click a button in a Google Chrome JavaScript Alert popup using UiPath.

Specifically, I am having trouble with the following:

What is the selector to target the dialog and how do you find this?
What is the selector to target and extract the text from the dialog and how do you find this?
What is the selector to click the OK button in the dialog and how do you find this?

I know that for web automation UiPath recommends using IE in most cases since UiPath can interact with it in a more “native” way using its browser COM Object. The other browsers will have limitations and might struggle in case of the version updates. However, in some situations, it is not possible to use IE, in my work we have an agreement with Google for work and many of our internal sites do not work in IE.

To complete UiPath Level 3 Advanced Certification (online): Assignment 2 - Generate Yearly Report, you must create a robot to perform the following:

Navigate to https://acme-test.uipath.com/
Log in with a username and password
Click on various elements to navigate around the system
Interact and extract data from JavaScript Alert popups

The problem is that UiExplorer cannot find the correct selector, which makes it challenging to get the text from the Google Chrome popup because it is not rendered in the same way as it is for IE and does not expose the text attribute (among other ones). Here is a snippet from the acme-test site for creating the alerts to help define the selector and here is a UiPath XAML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Upload reports</title>
</head>

<body>
  <!-- Page Content -->
  <div class="container">
    <button type="button" class="btn btn-primary" id="buttonUpload">Upload Report</button>
    <script type="text/javascript">
      jQuery(document).ready(function() {

        $('input[type=file]').on('change', prepareUpload);

        function prepareUpload(event) {
          files = event.target.files;
          $('#upload-file-info').html(files[0].name)
        }

        jQuery('#buttonUpload').click(function(event) {
          event.stopPropagation(); // Stop stuff happening
          event.preventDefault(); // Totally stop stuff happening

          var vTaxID = jQuery('#vendorTaxID').val();
          var rYear = jQuery('#reportYear').val();

          // If nothing is filled
          if (vTaxID == "" || rYear == "") {
            alert('Plase fill in the Vendor TaxID and Report Year!');
            return;
          }

          if (typeof files === 'undefined') {
            alert('Please select the Report File');
            return;
          }

          // Create a formdata object and add the files
          var data = new FormData();
          jQuery.each(files, function(key, value) {
            data.append(key, value);
          });

          console.log('...');

          jQuery.ajax({
              url: "/cmajax.php?cmd=uploadReport&cvTaxID=" + vTaxID + "&crYear=" + rYear,
              type: "POST",
              data: data,
              cache: false,
              dataType: 'json',
              processData: false, // Don't process the files
              contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            })
            .always(function(msg) {
              console.log('done');

              if (msg.responseText == 'bad')
                alert("Some problems were encountered.");
              else {
                console.log(msg);
                alert('Report was uploaded - confirmation id is ' + msg.responseText);
              }
            });
        })
      });
    </script>
  </div>
</body>

</html>

Solution

The following may not be exactly what you are looking for, but it may provide an alternative solution. Alerts can be a bit of a pain to automate in most RPA tools, so I like to use an alert override trick.

Basically you inject a function that will override the default alert function (that displays a popup) and reroute its contents somewhere reachable by UiPath, such as a custom textbox.

In more detail, you create a textbox somewhere...

var body = document.getElementsByTagName("body")[0];
var text = document.createElement("input");
text.id = "alertOutput";
body.insertBefore(text, body.firstChild);

... and then override alert function with the message rerouting.

function alert(message) {
    var text = document.getElementById("alertOutput");
    text.value = message; // or .innerText
}

Now every alert on the page will send its contents directly to the textbox rather than displaying a popup.

PS: I was deliberately not using jQuery in my code, but seeing that it is available on your website, you can take advantage of it.