Since I am binding to a click event with jQuery, it is really hard to figure out where that code is in my application.
The event listeners panel in chrome looks like this:
However, when clicking on the definition, I am taken to jquery. There is no way to figure out which function was sent to jQuery, even if I blackbox the jquery script.
In firefox developer edition is see something similar:
Related
We have addEventListener and removeEventListener.
Why we don't have getEventListeners?
Is this because of security reasons?
What will happen if listeners can be found in page context script?
I am trying to write a puppeteer script to trigger a div click event.
But I want to make sure there is an event listener on click-event before clicking it.
And I found that it is very difficult to check if a div has a event listener.
The puppeteer document tells me that to use DOMDebugger.getEventListeners in Devtools Protocol to achieve this.
I was wondering why the browser is designed like this.
I get this error in the Chrome console every time I try to evaluate an expression.
EvalError: Possible side-effect in debug-evaluate
What could be causing it?
I think I found the issue, reading through a discussion on an electron issues board.
It could potentially be caused by this: [inspector] Add custom error dispatch machinery for debug evaluate.
And hopefully fixed in this: [inspector] Don't trigger window.onerror with side-effects disabled.
This was an oversight in https://crrev.com/c/3557234, which led to a really weird developer experience: once a window.onerror handler was installed, typing into the Console or other side-effect free debug evaluations triggered this handler.
The website you are inspecting contains an onerror event listener.
A new bug in the latest version of Chrome triggers this event every time an expression is evaluated in DevTools. This includes live expressions and the console.
If this is your own website, add this line of JavaScript to your event listener to ignore any errors triggered outside of a script, where script is the second argument of the event listener function:
if(!script.endsWith(".js")) return;
Note that this will only work for external JavaScript (in .js files), in the case of JavaScript embedded in HTML <script> tags, it will disable your event listener entirely.
If this is not your website, you can temporarily disable the event listener in DevTools, like this:
At the top of DevTools, open the "Elements" tab
Press "ยป", on the right of "Styles", "Computed", "Layout"
Choose "Event listeners"
Find and expand "onerror"
Click "Remove"
This will remove the event listener, but the issue will return after you refresh the page.
Hopefully the next version of Chrome will fix this bug.
I have a SPA say https://www.example.com. And one of the sub-pages https://www.example.com/foo can be added as a PWA. On navigating to /foo from the homepage, the manifest and service-worker get installed and registered correctly and the PWA can be installed from the A2HS native buttons too, but the event beforeinstallprompt isn't called on chrome. If the page /foo is refreshed then the event is called. It's only when the navigation happens to it from another page that isn't in the scope of the PWA. The lighthouse audit passes all tests on /foo as well.
Has anyone tried creating multiple PWAs on a SPA, or encountered a similar issue?
I don't think this is a good solution, but this is how I got around it on my Gatsby.js site:
On every page (even those where I don't have the "Add to Homepage" custom trigger), I listen for the beforeinstallprompt event.
I set up a listener for a custom event on the <html> element on the pages that have my "Add to Homepage" custom trigger.
When beforeinstallprompt fires, I stash a reference to the event on the <html> tag (this does not get swapped out in between pages for my SPA) using jQuery's $.data() - I couldn't get vanilla JavaScript dataset to work but I may have been using it wrong, and I had jQuery loaded in anyway.
In the beforeinstallprompt handler, after setting the data, I fire the custom event on the <html> element.
The page that has the "Add to Homepage" custom trigger catches this custom event, grabs the reference to the beforeinstallprompt event from the $( 'html ').data( 'event' ) and carries on with it as normal.
Hopefully that helps; it feels pretty hacky but I'm pretty new to PWAs / SPAs / React!
I have html code for button like below
<button class="btn btn-mini" onclick="setLive()">
I would like to write a selenium script which could check whether the button is clicked or not. could someone tell me how could I write a script in selenium webdriver.
I don't believe that Selenium can actually tell whether a button has been clicked as that information is visible only to the browser itself. Selenium is designed to attempt actions through the browser interface and then validate the results. The behavior you want does not fall within this concept. The proper thing to do here is not attempt to figure out if the browser has detected a button click, but to validate the expected results upon clicking the button (whatever those user-visible results may be). That's the proper way to test application behavior. Verifying that a button has successfully sent a click signal to the browser process won't help you if the expected results don't manifest.
As for how to do that... you're going to have to do some reading and start learning Java, C#, Python, or one of the other myriad languages that the Selenium library supports.
onClick() events not gets executed when you just perform click() function on WebElement.
You should try this:
WebElement btn=driver.findElement(By.className("btn btn-mini"));
JavascriptExecuter jse=(JavascriptExecuter)driver;
jse.executeScript("arguments[0].click();",btn);
I try to use the perl script to automate the interaction with a website.
I use module WWW::Mechanize to realize my design. But I cannot perform the button click in my perl script by using command as below.
$mech->click( $button [, $x, $y] )
$mech->click_button( ... )
It is because this button does not belongs to any form and without name, I can not call or locate this button in my perl script. How can I make it possible to click this button in my perl script like I interact with browser? Thank you.
<button class="button transactional" id="checkout-now"><span>Check Out Now</span></button>
If button does not belong to any form it should have onclick event defined, like #Bilzac and #hijack mentioned. In this case you are not able to reproduce browser's behavior because WWW::Mechanize does only html analysis.
Dealing with JavaScript events it's more easy to implement browser's network activity rather then implementing whole JavaScript events and DOM interaction.
Well sometimes all you need is $mech->post() because it's harder to find what going on with JavaScript when you click some element.
So you need to find what request is performed when you click this button (you may use Firefox HttpFox for this) and after that construct same request using WWW::Mechanize:
$mech->post($request_url, Content => {FORM_FIELDS...});
You can add onclick event on this button. like this:
<button onlick="alert('hello');">Click Me</button>
Clicking the button in a browser only runs a piece of JavaScript. You can't do that in WWW::Mechanize, because it has no JavaScript support.
What you could do, however, is find the JavaScript code that's being run when the button is clicked and write some Perl code to do the same thing. Unfortunately, it can sometimes be hard to find which JavaScript event handlers apply to an element. Even the otherwise excellent Firebug doesn't seem to have any simple way to list all event handlers associated with an element. (There does exist an Eventbug extension, but at a glance it doesn't seem to work very well.) The Visual Event bookmarklet might also be worth trying.
I am not 100% sure what you are asking for, but I am going to swing at it.
You do not need the button to be part of a form for any sort of interactivity. You can do this with just JavaScript & HTML.
$('#checkout-now').click( function() {
alert('Hello!');
//Do other stuff here, regarding the form! (Call Perl scripts etc.)
});
http://jsfiddle.net/fCdxR/1/
Quick example of how it works!
Hope this solves your problem.