Develop Reference

Clicking button doesn't trigger event using selenium(Chrome Only). Nothing happens on click, though element found and clickable

I'm trying to automate a customer journey in our application using selenium java. I have a problem with click() method (Chrome browser only).
Scenario: User adds items to cart, select payment method Google Pay and click on proceed to Payment button. On button click user should see sign in to Google child window.
Problem statement: My script successfully find the element 'proceed to pay' button and verify it is enabled and then click on the button. But it doesn't open up the child window. I tried with selenium click(), JavascriptExcutor click(), Keyboard enter and Mouse actions. But nothing works. Surprisingly If I do a manual click on the proceed to pay button in the same automation session it open up Sign in to google child window.
Same script works in other browsers, able to click and see child window of (Google Payment method)
Selenium: 4.3.0
Chrome: 104.0.5112.48 & 103 102 as well
My Application HTML :
enter image description here
**Code : **
I have tried all the possible options as below. There are no frames
String payMethod = "GooglePay ";
if(clickPayMethodV2(payMethod)) {
clickElement(agreeCheckBox, "Agree Terms Check box");
Assert.assertTrue(isElemenEnbaledClickable(ProceedToSecurePay, 4), "ProceedToSecurePay button is disabled for PayPal");
boolean status = isElemenEnbaledClickable(ProceedToSecurePay, 5);
JavascriptExecutor js = (JavascriptExecutor) driver;
//js.executeScript("arguments[0].scrollIntoView();", element);
//Thread.sleep(1000);
driver.findElement(By.cssSelector("srgc2-secure-payment > form")).click();
ProceedToSecurePay = driver.findElement(By.xpath("//button[contains(.,'Proceed to secure payment')]"));
js.executeScript("arguments[0].focus;", ProceedToSecurePay);
js.executeScript("arguments[0].click();", ProceedToSecurePay);
clickElement(ProceedToSecurePay, "ProceedToSecurePay");
js.executeScript("var ele = arguments[0];ele.addEventListener('click', function() {ele.setAttribute('automationTrack','true');});",ProceedToSecurePay);
ProceedToSecurePay.click();
System.out.println(ProceedToSecurePay.getAttribute("automationTrack"));
//System.out.println(ProceedToSecurePay.getShadowRoot().toString());
click(ProceedToSecurePay, "Proceed To SecurePay button");
clickElementJS(ProceedToSecurePay, "ProceedToSecurePay");
}
else {
logInfoExtent("Failed to click on Payment method: "+payMethod +"in checkout Step 3. PAYMENT");
throw new TestException("Failed to select Payment method: "+payMethod +"in checkout Step 3. PAYMENT");
}
Actions action=new Actions(driver);
action.moveToElement(ProceedToSecurePay).perform();
action.moveToElement(ProceedToSecurePay).click().perform();
ProceedToSecurePay.submit();
ProceedToSecurePay.sendKeys(Keys.ENTER);
enter image description here
Your help on this issue would be greatly appreciated.

Unable to click on a button (tag=>EDL-FILE-UPLOAD) using LeanFt +Java automation script

In a web app that we are testing using LeanFt, there is a type button object with the tag (EDL-FILE-UPLOAD). A dialog to browse the file system and upload a file must pop up when this button is clicked.
This happens when the button is clicked manually.
But when I try the .click() or .doubleClick() methods in my LeanFt automation script, nothing happens.
Now this button has a web element child that displays the label.
So i tried XPathDescriptions for the webElement, and tried the findChildren() function as follows
WebElement[] h = browser.describe(Button.class, xPathDescriptionOfButton).findChildren(WebElement.class, xPathDescofWebElement)
for(int i=0;i<h.length;i++) {
h[i].click();
h[i].hoverTap();
h[i].longPress();
h[i].doubleClick();
h[i].click(MouseButton.LEFT);
h[i].fireEvent(EventInfoFactory.createMouseEventInfo(MouseEventTypes.ON_CLICK));
h[i].fireEvent(EventInfoFactory.createEventInfo("click"));
}
None of the above led to the dialog for uploading files popping up.
Is there any other way to make sure that the button is clicked, and the dialog pops up using Java+LeanFt?
Thank you.

I have been able to solve this issue by using the Robot class to perform mouse click and release actions on the co-ordinates of the button.
Robot r=new Robot();
r.mouseMove(xCoordinate, yCoordinate);
r.mousePress(InputEvent.BUTTON1_DOWN_MASK);
r.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);

Click on a button in a Modal Window - Protractor

I'm writing protractor tests for an existing app.
I have a button called 'Decline' in a modal window, and I'm trying to click it using:
element(by.buttonText('Decline')).click();
But I receive the below error:
UnknownError: unknown error: Element is not clickable at point (,). Other element would receive the click:
May be because I have another button called 'Decline' outside the modal window?
How do I click on the modal window's Decline button ?
Found that this is the js code that displays this Decline button.
.....
var content = {
title: 'Decline',
htmlBody: '<p>...</p> ',
okButton: 'Decline',
onOk: function() {
.....

As there are two buttons with button text Decline, How do we identity the one in modal?
One way to approach that would be to improve your locator to work in the scope of the modal content. But, since you have not provided an HTML representation of the modal I cannot provide you with a specific answer. Here are the samples that you can improve to fit your use case:
element(by.css(".modalContent button[ng-click*=ok]")).click();
element(by.css(".modalContent")).element(by.buttonText("Decline")).click();
Another approach could be to find all buttons with a specific text and filter the visible one:
element.all(by.buttonText("Decline")).filter(function (button) {
return button.isDisplayed().then(function (isDisplayed) {
return isDisplayed;
});
}).first().click();

My Colleague recommended this and it worked:
Clicking on First Decline button opens up a modal,
Sleep for some time,
Now click on the second Decline button.
element(by.buttonText('Decline')).click();
browser.sleep(2000);
element(by.cssContainingText('.btn', 'Decline')).click();
Thanks for all your help :)

Write the code
which needs to display under modal window,
inside form tag.
And serialize that form with the existing form.

Just search the button by its text and use the function click. So for you it should look like that:
element(by.buttonText('Cancel')).click();

try the below code,
var DeclineBtn = element(by.buttonText('Decline'));
browser.executeScript("arguments[0].click()",DeclineBtn.getWebElement())

How to have control over backbutton hit in javascript?

I have used the concept from below link..It worked.
detecting browser back button in javascript/jquery without using any external plugins
but my problem is,
I have a dialog box which shows different input fields.
So, what i have did is when i click on back button i making that dialog to hide. But at the same time i am using the areyousure.js warning message at popup.. When i change any input field on popup and click on backbutton,I am getting a warning message as "You have unsaved changes. Stay on this page" or "leave this page." but when i click on the stay on this page the popup is getting hide as according to concept of that link.
So , what iam trying is, when i click backbutton after changing anyfield in dialog box , i must get that warining msg and if i click stay on page it should be stay there..
When i dont change any thing just have clicked back button i must just hide the dialog box and load the page..
Hope you all understand my problem.If so, please give me a solution.
My approach for hiding the dialog box when no changes are done on the pop up
bajb_backdetect.OnBack = function()
{
var popDiv = $('#popupModal #progressDiv');
var popIframe = popDiv.find('#pop-iframe');
popIframe.hide();
}
I cant do changes in my areyousure.js pages as it is used in most of the code. Some code dont have the dialogboxes..
So, in the current page , i need to valdate both the coditions..

I think this is the solution for you: Detect/Warn when back button is pressed
Let us know if it helps

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!

What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp

you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/

To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!

HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m

You will not be able to do this with alert, but you should take a look at how to create modal windows.

I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.