HTML element DIV disappears in Chrome launched by Selenium - javascript

I have SPA (single page application) written using Backbone + jQuery and some automation tests (Selenium) and when some of the tests are running they start failing because of a DIV element disappears itself. It disappears just after the last AJAX call is finished.
I cannot find the reasons of disappearing. Does probably someone know what could it be?
The issue is only under Chrome launched by Selenium.
I tried to refresh the page in Selenium Chrome - The issue is still here.
I tried to disable all installed plugins (including Selenium plugin) in Selenium Chrome. - The issue is still here.
I tried to update Chrome. - The issue is still here.
I tried to update Selenium. - The issue is still here.
A few interesting moments:
When I mouse over the place where DIV should be - it SHOWS!
When I try to check the height of the DIV with $('.container').height() - it SHOWS!
I tried to use Chrome launched by myself under Incognito mode. - No issue.
It looks like Chrome forgets to re-render the DOM or that element.

Related

Nuxt/Vue Printing in Safari

Calling window.print() in a function fails to bring up the Safari native print window. This does however work in Chrome.
I've tried:
Attempting to follow this link causes nothing to happen when the button is tapped. Is there a special way I need to attach this to a button in Nuxt/Vue?
Using document.execCommand('print', false, null) occasionally works but 90% of the time will show a 100+ page document with no content in the print dialog.
macOS 12.3,
Safari 15.4,
Nuxt 2.15.7
There seems to be two problems going on here:
Calling window.print() in Nuxt does not bring up the Safari print window.
Safari displays the correct print window only the first time, then just a bunch of blank pages. This does not seem to be limited to Nuxt, though (example).
As for the first problem, I found this bug report that an active EventSource prevents Safari from displaying the print window. So i thought hmmm, maybe the Nuxt dev server is somehow using this to communicate with the client. So I tried running my app in production mode (nuxt build && nuxt start) and voilĂ , this made my Safari print window appear as expected.

Dashing doesn't detect change of coffescript

I'm working on some dashing widgets in a dashboard project.
Normally if I work on a coffeescript and I save it, I have to reload the page in the browser, and I can see the effect of my changes in the widget.
For some time the change won't do any effect in the browser. I thought, it may be a browser cache issue and I tried clear the cache, but nothing changed. I tried another browser, same issue.
I can see my changes in the browser only if I change the classname off the widget.
Is there any simpler method?
I encountered a similar issue. The widget would not refresh to reflect my html changes (new <h2> tag). Restarting / clear-cache were the first things I tried. I use Chrome and I found this note in the Dashing-Workshop :
Note: Chrome is sometimes weird, and it's possible that your browser isn't showing the number anymore in the widget. If that's the case load dashing in a brand new tab to clear the cache.
I resolved my issue by turning off caching "Developer Tools > Networking > Disable cache [x]"
It shall work, Use chrome developer tool to debug it
console.log to print to console
use inspect element to see the html/css

HTML jquery onclick event not working on dynamically-created links on Android phones only

I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!

See what methods/events being called in JS

Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?
In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.
Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.
#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example

Does Firefox stop running JavaScript when minimized (longpolling)?

I have a longpoll running but when I open a new tab in Firefox, or minimize the browser the longpoll seems to time out!? However if I leave the tab selected, or make a new dedicated window with Firefox open it won't time out.
Does anyone have any thought or insight on this weird behavior? When minimzied/alternate tab does Firefox stop running JavaScript in those tabs?
By the way I'm using Firefox 3.6.
No, it does not stop running JavaScript. And It does not block you from modifying the DOM. I have an app that runss a poll on server (I have both synchronous and async transmission) and then updates the dom based on results. And if I am looking at the tab or nor, and even if the firefox 3.6 is minimized - it just works. I have just tested it (again), before posting this answer.
Even the javascript test tools like selenium (in javascript) that are manipulating the DOM are working without focus.
So please check your code, it probably does require focus on some tab or on some element (like syockit suggested). I belive that you have the firebug, and you can easily analyze and debug your javascript (if it is not obfuscated).

Categories

Resources