Selenium test - OK/Cancel popup disappearing immediately - javascript

Odd one here. When testing this manually I click the delete button, wait for the popup
Then I click OK and the record is removed as expected.
But when I try to do the same in Java/Selenium it goes like this->
WebElement element = _driver.findElement(By.id("btnDeletePatient"));
JavascriptExecutor executor = (JavascriptExecutor)_driver;
executor.executeScript("arguments[0].click();", element);
or
_driver.findElement(By.id("btnDeletePatient")).click();
Both have the same response, the OK/Cancel popup will appear and then immediately vanish.
This is the code for the button
<input type="submit" name="ctl00$cpContentLeft$btnPatient"
value="Delete User" onclick="return userDelete();"
id="ctl00_cpContentLeft_btnPatient"
tabindex="81" class="btn btn-outline-primary btn-sm mr-3">
And this is the code for the function userDelete
function userDelete() {
if (confirm("Are you sure you wish to delete this user?")) {
return true;
}
else {
return false;
}
}
Also I have now tried the same in Edge, same thing so this does not appear to be a Chrome issue.
Anyone got any ideas what is causing this please?
Further tests as follows.
I place a breakpoint just at the point the script will click the delete run and run the script. The page loads as expected and I get to the problem point.
I manually click the Delete button, the popup appears and then stays until I click cancel.
Using this code I step through and the popup appears and then instantly disappears.
_driver.findElement(By.id("ctl00_cpContentLeft_btnDelete")).click();
Using this code the response is the say as 2.
_driver.findElement(By.id("ctl00_cpContentLeft_btnDeletePatient")).sendKeys(Keys.SPACE);
Then I try a double click and nothing happens.
On all tests I see no errors in the console.

I hope you are clicking the delete button before page loads completely, that is why pop is disappearing suddenly. please add wait before clicking delete button.
Steps:
Load the page completely (add wait here)
Click the delete button
click Okay button.
please add some more codes here and screenshots too. that would be more helpful

This looks like a java script alert. In selenium, we have specific way to handle alert. You do not need to click on ok. You can first wait for alert to be present. If it is present, then switch to that alert.
Then, We have specific methods to handle alerts in selenium.
alert.accept() clicks on ok.
alert.dismiss() clicks on cancel.
Sample code from selenium documentation:
driver.findElement(By.linkText("See a sample prompt")).click();
//Wait for the alert to be displayed and store it in a variable
Alert alert = wait.until(ExpectedConditions.alertIsPresent());
//Type your message
alert.sendKeys("Selenium");
//Press the OK button
alert.accept();
//Press the Cancel button
alert.dismiss();
//Store the alert in a variable for reuse
String text = alert.getText();

Ok found it
The issue was within the chromedriver, this line fixed it
chromeOptions.setCapability("unexpectedAlertBehaviour", "ignore");
Now the popup remains until actioned in the script.
We live and learn, thanks for all your help.

Related

How to make JavaScript Snippets work after page reloads, in Chrome?

Environment: Chrome, a simple Web Portal
I'm trying to do a simple browser automation.
In a HTML table, 1. Clicks the first link, 2. Change the dropdown value and 3. click Submit.
The code after button click is not executed, as the page loads after the button click.
var tbl = document.getElementById("incident_table")
tbl.rows[2].cells[2].getElementsbyClassName("linked")[0].click()
// below code is not executing, as the above click loads the page
document.getElementById("incident.state").selectedIndex = 1
document.getElementById("sysverb_update").click()
I can able to run the last 2 lines of code separately in console, it works.
But when executing as a snippet it didnt
this post is very similar to your question:
preventDefault() on an <a> tag
what you want to do is prevent the default action of the javascript click event.
What you may also do is:
tbl.rows[2].cells[2].getElementsbyClassName("linked")[0].addEventListener('click', ()=>{
preventDefault();
//write here what should happen instead
});
What this will do is prevent the default action "reload site" from happening
Edit:
What i mean in the comment is the following:
if(localStorage.getItem("firstPartComplete") === null){
//do first part
//set completion status in localStorage
localStorage.setItem("firstPartComplete", true);
}else{
// do second part
localStorage.removeItem("firstPartComplete");
}

How can I get elements inner text after dom is being refreshed after the submit button?

I'm working on automating a task (filling a form and submitting data then getting the result message where the data is being read from a txt file line by line).
While running my JS code via the console, everything works fine until before the clicking on submit button. after the click on the submit button, I can see the HTML is being reloaded with new data and the URL is changed from www.example.com to www.example.com/requests/12345 and then the next step after the click is not respected.
I thought may be because I was using:
document.getElementByID("btn-submit").click();
and changed it to
$("#btn-submit").click().trigger('change');
But still same issue.
I tried to use sleep functions and setTimeout to wait for the new HTML to load but this didn't help at all :(
The task is simple steps until button click all works perfect, I'm stuck only at after the submit button as I want to get the results that shows on the page after clicking the submit button.
Any ideas please what is being done wrong from my side?
The Elements I'm trying to get are in a div that is empty before the submit button is being clicked like this
<div id="message-bar">
</div>
After the submit button is clicked it is filled like the below (also the URL is changed to something link www.example.com/requests/12345 - of course the result elements won't show if the button is not clicked:
<div id="message-bar">
<div id="alert-success" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="text alert-text">Request approved!</div>
<ul id="bullet-items"><li>Thank you</li></ul>
</div>
</div>
I tried to check if the element is not empty, then get the elements innerText, but seems like my code is being removed when the page URL changes after the submit button:
if (document.getElementById("message-bar").innerText != "") {
// do something
}
Thank you so much
Try
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})
Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).
From what I understand you need the content not after the click, but after what the click is triggering. Here’s the same Q, answered. Basically you wait for the mods to happen then “read” the element content.
to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window
var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...

JavaScript code on onClick event causing "dangerous Request.Path" error

I am attempting to expand a CMS system we are using ... writing HTML code to create a Button with the onClick event calling a custom JavaScript function defined.
The function that is being called first queries the user with a "confirm()", and if the user clicks OK then it performs a window.location redirect; if the user clicks CANCEL then the method does nothing.
The redirection ultimately happens, however, in BOTH cases an error appears. In the case selecting OK, because of the redirect, the error that is displayed is short-lived (however the error still happens). In the case of selecting the CANCEL button, at the bottom of my page is get the following error: "There was an error with the form. Please contact the administrator or check logs for more info."
I checked all logs I could find and no further details could be found. I turned "customErrors" off and when viewing the actions performed in Chrome's DevTools environment I see the following: "A potentially dangerous Request.Path value was detected from the client (:)"
I have no clue why I am seeing this error ... I am also pasting my button code below. Any suggestions?
P.S. Running Bootstrap v3
function jsDeleteFileID(p_intFileID)
{
var objAnswer = confirm("Are you sure you want to delete this file?");
if (objAnswer == true)
{
//****************************************
// Reload Page w/ Parameters
//****************************************
location.href='http://www.MyRedactedWebsiteDomain.com/RedactedWebpageName?DFID=' + p_intFileID + '&ReturnURLID=AAA-AAA-AAA-AAA';
}
else
{
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"
data-loading-text="Please wait..."
data-name="DeleteFile152"
class="btn submit form-button af-btn-loading btn-normal btn-danger"
id="dnn111DeleteFile152"
onClick="jsDeleteFileID(152); return false;"
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
After posting the above, I figured out what the problem was. I would like to post my solution here in case anyone else that is programming on DotNetNuke and using DNNSharp Modules has the same issue.
The problem was in the labels listed in the class property. I removed two class labels: "submit", and "form-button". These two classes added some sort of additional processing that ran AFTER my custom java code which caused errors. Since I only want my code to run and nothing else, removing these two class labels stopped that extra code from running, and now my button behaves as expected.

Show popup message when click Browser Back button Using Javascript

When user click on browser back button, user will see a alert message for that I am using below code.
window.onbeforeunload = function () { return "If you want to go back to previous page Please use Previous step Button in below"; };
But in the code I have written "If you want to go back to previous page Please use Previous Step Button in below". This message is not displaying in alert box,instead of that message it is showing another message:
.
How can I display my own message in the alert box?
You will need to put javascript/jquery code you want to use on a handler for beforeunload event
window.addEventListener("beforeunload", function (event) {
//your code goes here. Create modal window or whatever you need
});

detecting OK on alert

I used this code:
<script type="text/javascript">
function finish()
{
alert("Inserted!");
}
</script>
I want when the user clicks on "OK" of alert,it goes to another php page.
how can I undersatand when user clicks OK?
and how I can link to another page?In common I use this way:
<button type="submit" onclick="window.open('home.php')"> Insert </button>
but in alert example there is no button!
thanks
alert() is blocking: The browser will stop executing any Javascript code while an alert() is being displayed. The next line of code after the alert() will only be executed when the alert box is cleared.
Therefore, you don't need to do anything special to tell if an alert has been cleared; just put the rest of your code to run after the alert().
There is no result to alert. You can use window.location to redirect.
function finish()
{
alert("Inserted!");
window.location = 'newpage';
}
how can I undersatand when user clicks OK?
alert() is blocking, script execution pauses while it is displayed. When the user clicks OK, the script will continue running. Just put whatever other code you want after the alert statement.
and how I can link to another page?
You can set location to a new URL…
location = "http://example.com/";
… but generally speaking, you would be better off running the function as a click event handler of a regular link.
You can redirect by calling window.location=URL.
Alert is modal, it just gives information and then is dismissed. The script will continue executing after the alert message is dismissed.
If you want to just redirect after the user reads the alert message, you could use:
function finish() {
alert("When you click OK you will go to a new page.");
window.location = "http://www.yoururl.com";
}
On the other hand, Confirm gives the user a question and returns true/false based on the user response. This is probably what you should use instead.
In this case your function could look like this:
function finish() {
var continue = confirm("Finish and go to the next page?");
if (continue) {
window.location = "http://www.yoururl.com";
}
}
With either finish function, just attach it to the button however you want. The most direct way would be like you've done in your question:
<button type="submit" onclick="finish()"> Insert </button>
Note, though, if your button is in a form and you bind with onclick, the form is actually going to be submitted anyway unless you bind to the submit event and prevent it.

Categories