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

Question

asked Jul 9, 2019 in RPA by Abhishek_31 (12.7k points)

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, like in my work we have an agreement with Google for work and much 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 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 difficult 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>

<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>

1 Answer

Prakhar_04 · Answer 1 · 2019-07-09T12:47:16+0000

I have a workaround that works, I suggest you look for the real solution but for now, you can use this to serve your purpose :

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.

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

1 Answer

Related questions

Browse Categories