The piece of code below shows as a checkbox and I'm trying to use cypress to click it but it isn't working even though I selected it.
<button class="p-button p-component p-disabled primary-button p-button-raised font-semibold" type="button" disabled="" id="search-button" aria-haspopup="true" aria-controls="search-menu" data-v-17vc126c="">...</button>
Here's what my cypress code looks like:
When('User clicks checkbox, disable form', () => {
cy.get('.p-button.p-component[aria-controls="search-menu"]').click();
});
Here's the error I get:
Timed out retrying after 15050ms: cy.click() failed because this element is disabled:
...
Fix this problem, or use {force: true} to disable error checking.
The command was expected to run against origin https://myDevSite.com but the application is at origin http://localhost:8080.
This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly
Crazy thing is I used this exact code on another element and it worked with no errors.
Any help would be much appreciated. Thanks!
The obvious step you can take is shown in the message
cy.get('.p-button.p-component[aria-controls="search-menu"]').click({force:true})
but the user won't click when button is disabled (natch), so you must find out how to enable it from the web page and do that instead.
Related
I have a cypress test that on clicking a button the system redirects to a new window.
I've tried some solutions (invoke,stub) without success.
I need to do some testing but I need it to always be redirected on the same screen as cypress doesn't support multiple windows.
My button code:
<button id="cmdEnviar" name="cmdEnviar" type="button" onclick="TrPage._autoSubmit('_id5','cmdEnviar',event,1);return false;" class="x7j">Enviar</button>
My code:
it('register new user', function() {
cy.visit('/')
cy.get('#txtLogin').type(Cypress.env('login'))
cy.get('#txtSenha').type(Cypress.env('pass'))
cy.get('#btnEnviar').click()
cy.get('#cmbSistemas').select(11)
cy.get('#cmdEnviar').click() //here is the button
//here is redirected to another window
cy.contains('Colaborador').click()
cy.contains('Cadastro').click()
})
Could anyone help me, if there is any solution?
Unfortunately, without seeing what your onclick event actually does, I can't recommend a strategy for validating the behavior of onclick is functioning as intended.
Instead, we can validate that the button has the correct onclick attribute value.
...
cy.get('#cmdEnviar')
.should('have.attr', 'onclick', "TrPage._autoSubmit('_id5','cmdEnviar',event,1);return false;");
...
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.
I'm new to coding, working on an open source financial calculator in Angular 6.
Some users are reporting an issue that I can't recreate on any of my devices/browsers.
The "submit" button on my form has a mousedown function that changes their cursor to a waiting cursor and provides a "calculating..." message.
<button type="submit" id="maximizeSubmit" class="btn btn-primary" (mousedown)="waitCursor()">Submit</button>
waitCursor() {
document.getElementById("container").style.cursor = "wait";
document.getElementById("maximizeSubmit").style.cursor = "wait";
this.statusMessage = "Calculating the optimal strategy..."
}
Then upon submission the form triggers an onSubmit method. That method basically runs a bunch of math, reports back a result, then changes the cursor back to normal and removes the "calculating..." message.
<form #inputForm="ngForm" (ngSubmit)="onSubmit()">
onSubmit() {
//lots of math
document.getElementById("container").style.cursor = "default";
document.getElementById("maximizeSubmit").style.cursor = "default";
this.statusMessage = ""
}
Several users are reporting that when the "submit" button is clicked, the "calculating" message only appears for as long as they have the button pressed, then it disappears. And the calculator never outputs any result.
But I can't recreate the problem myself. Nor can I see what output they're getting in Console to perhaps guide me.
Does anybody have suggestions on how to proceed in such a situation?
The actual site and its GitHub page are below, in case that's helpful for any reason:
https://opensocialsecurity.com/
https://github.com/MikePiper/open-social-security
Like guys mentioned, you should got somehow info in what browser, OS, etc... did that happened. If you could find that out, definitely do it that way.
In apps with larger user base where you can't communicate with users about their errors that well or you want to know about errors they have and they even don't know about, you should implement and connect your app to some kind of Error logger. Nice article about it is here, especially chapter "How to keep track of the errors". Then you will know about all unexpected exceptions and in which environment they happened.
I have a simple oneline snippet to "click" on a «load file» button on a visible page to call a dialog-popup (to load an image, for example).
this.document.getElementsByName("image")[0].click() // snippet code
While manual paste and run this line in console is successful (it opens the dialog), the above snippet can't do that. Seems like Chrome doesn't allow to open dialog not by user call. So, I set browser to allow all popups but there is no result.
Tested on different pages where file load button presents.
Thanks for any ideas.
A similar but different issue, solved
Seems like Chrome doesn't allow to open dialog not by user call.
I created a snippet to test if this statement is true. It seems like it is incorrect.
Click the Run Snippet button in this answer.
Open DevTools.
Click Inspect and click the image that says 350x150.
Evaluate document.querySelector('img').click() in the Console. The text below the image increments.
Run the same statement from a Snippet. The text still increments.
document.querySelector('img').addEventListener('click', () => {
let p = document.querySelector('p');
p.textContent = parseInt(p.textContent) + 1;
});
<img src="https://via.placeholder.com/350x150"/>
<p>0</p>
Possible solutions:
Make sure that you are in the correct Console context when you run the snippet. See Selecting Execution Context.
The use of this in your statement might be causing problems. Try removing it.
Try adding an ID to your element and then referencing it by its ID, rather than the getElementsByName array. So, use document.getElementById('myCustomId').click() instead. Make sure to add the ID to the HTML element, e.g. <img id="myCustomId" .../>. It's possible that you're referencing the wrong element, so that's why you're seeing the wrong result when you execute click().
Add comments to this answer and we'll eventually figure out what's going wrong.
I've been facing this weird behavior for a while now and can't find any workaround.
There is a button with certain methods called on click.
In Firefox works well. In Chrome it just refreshes the whole page.
$("#modoComparativa").click(function(){
if($(this).hasClass("active")){
$('#histFromDate').attr("placeholder","Date 1");
$('#histToDate').attr("disabled","disabled").attr("placeholder","Date 2");
startDatepickerComp();
}
else{
$('#histFromDate').attr("placeholder","Initial date");
$('#histToDate').attr("disabled","disabled").attr("placeholder","Final date");
startDatepicker();
}
$('#clearDates').attr("disabled","disabled");
// This function calls another function causing the odd behavior in Chrome
requestGraph(idDetail, idArea, "", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If I comment out everything but the selector and the call to the click method, the behavior is the same. It refreshes everything.
I can't figure out how to debug this as each time I press the button, the whole page refreshes and no log/errors remains in the browser debugger.
Any ideas would be appreciated.
Edit - Addition of the selector as requested:
<div class="form-group"><button class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
</div>
Add a return false to your click callback to prevent actions due to your html syntax (like form submission or clicking on a anchor tag).
$("#modoComparativa").click(function(event){
event.preventDefault();
// your existing code
}
Edit: Since you added your html...
If your button is within a form, you can also add the type="button" attribute to prevent it from submitting your form.
<button type="button" class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
Thank you to lonesomeday for suggesting http://api.jquery.com/event.preventDefault/
I added an answer which could be useful for people stumbling here but having other causes for this behavior.
This kind of unexpected random reload can be due to several causes:
As stated in other answers a link which propagates the click and then performs a GET on the page itself
An image tag <img> where the src is empty or invalid, the browser will attempt to load the image using GET, but will in fact refresh the page instead (empty = relative to the page = page). Even a hidden image will be loaded, so this can be tricky to find, use the browser console !
Some javascript logic which refreshes the page programmatically in some conditions (session expired, token expired ...)
A browser 'feature', for example: https://support.mozilla.org/en-US/questions/1204335, or https://superuser.com/questions/1048029/disable-auto-refresh-tabs-in-chrome-desktop
In any case use the browser console and look for suspect GET calls to the page itself or redirects.