I've inherited a web application that automatically scrolls the page to a certain element on load. I'm tasked with removing this behavior.
I've searched for obvious strings in the code like "scroll" but so far I'm unable to locate the source of this behavior - the code is big and old and kind of disorganized. Is there any way to intercept the scroll event in the debugger in order to locate the source?
Found the culprit:
$("html, body").animate({
scrollTop: $(".some-element-class").offset().top
},150);
There are too many occurrences of "scroll" in jQuery and other libraries in the project and I missed this in the mess - then I started searching using the identifier of possible target elements and this narrowed down the number of matches.
Related
This question already has an answer here:
Karate UI button click support
(1 answer)
Closed 2 years ago.
I am quite new to Karate UI automation and I have a front end UI that has a SVG element which when clicked brings a drop down.
When I am writing the UI test for it, I get javascript evaluation error and hence seek some advice/help.
Here are the screenshots of the UI element and its CSS locator clearly seen on the screen
This is how the CSS locator shows up for the SVG element
This uniquely identifies the SVG element(the plus button)
svg[class='svg-inline--fa fa-plus-square fa-w-14 ']
This is the part of code that I have written to click it
And click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']")
And here is the error I get:
javascript evaluation failed: click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']"), js eval failed twice:document.querySelector("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']").click(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'click' of null\n at <anonymous>:1:78","objectId":"{\"injectedScriptId\":2,\"id\":3}"}
I tried various things that can uniquely identify the SVG element like using the compelete Xpath and also using the parent class name(though it was already unique with just the class name) but it still did not work. I tried wildcard locators as well but since there is no text/name of the element, it did not work. When the tags are say input or button etc the same way of css locator works but SVG ones did not for me.
tagname[unique_id of the element like key=value pair]
I am wondering if we need to use a different way to identify SVG elements using Karate UI? The same path when used in Selenium worked.
Since this is a UI that requires VPN connection and secure acccess, it may not be possible to provide a minimum code to try and replicate it. But am happy to provide more details if needed.
I have many such SVG elements on my UI and any help in this would be greatly appreciated.
Use selector hub as an extension to chrome, firefox, edge and opera. Ive only used with chrome and it worked fine and allowed me to quickly and easily find svg relative / absolute xpath. This worked no problems in a find and click capacity on numerous svg elements (via karate script)
2 suggestions.
Try to get some nearby element and work backwards: https://stackoverflow.com/a/63988977/143475
Figure out the location of the SVG and fire a mouse-click: https://stackoverflow.com/a/63828083/143475
Unable to give you specifics without a way to replicate, but - it should be possible to find a "pattern" so you can write a custom function as described in the docs. So that can be your goal, something like this:
* svgClick('svg-inline--fa')
I've been working on the site https://founderspledge.com/ and just noticed that if you go to the main page, and open the Chrome console to view the source, there's an element that I certainly didn't put there:
<div class="pub_300x250 pub_300x250m pub_728x90 text-ad textAd
text_ad text_ads text-ads text-ad-links" style="position: absolute;">.</div>
It also doesn't show up when I run the site's code in localhost, or when I load the page source separately using Chrome's 'View Source' option.
I Googled the div's class list, and the top few hits were from anti-ad blocker software (eg https://github.com/sitexw/FuckAdBlock), which doesn't seem malign, but doesn't explain why it would be on this site.
So
1) How can I get rid of this element?
2) How might it have got there?
3) Does it imply there's a hole in the site's security?
UPDATE: Facebook have acknowledged this as a bug: https://developers.facebook.com/bugs/336662116810282/?hc_location=ufi
I'm so glad to find this issue - have been tearing my hair out to work out the same exact thing! I found it's coming from fbevents.js (https://connect.facebook.net/en_US/fbevents.js) version 2.8.7 - you can clearly see the code that adds the div in. It seems like this is something that has happened very recently? But likewise, I couldn't find anything other than references to anti adblocking scripts which had me concerned!
I have a big SVG document here, containing a map of all the quests in a certain online game. Each quest node is inside a SVG <a> element, linking to a distinct named anchor in a big HTML document that loads in another tab, containing further details about that particular quest. This works exactly as desired in desktop Safari, and I'd expect it to work just as well in any browser that supports SVG at all since I'm using only the most basic form of linking, but it fails badly on Mobile Safari (iOS 6) - which is my single most important browser target, considering that the game in question is for the iPad. It only scrolls to the correct anchor on the initial load of the HTML page; clicking a different quest in the SVG tab will cause a switch to the HTML tab, and the hash (fragment ID) in the address bar changes, but the page doesn't auto-scroll.
This appears to be a known limitation in Mobile Safari - hash-only changes in the URL apparently used to force a page reload, and that got over-fixed such that nothing gets triggered at all now. The fixes I've found online all seem to be applicable only in cases where the URL change is being generated programatically, from within the same document, rather than static links from a different document.
Further details:
I've tried doing the named anchors in both the old <a name="..."> form, and the newer <h1 id="..."> form. No difference.
I've tried adding an onhashchange handler, to force the scrolling to take place, but the handler isn't being called at all (verified by putting an alert() in it).
I could presumably fix the problem by having each quest's details in a separate HTML file, but that would severely affect usability - with all the details in a single file, you can use your browser's Find feature to search through them all at once. (Also, deploying 1006 files to my web hosting after each update would be a bit of a pain...)
Anybody have an idea for a work-around?
Are Content Scripts (http://code.google.com/chrome/extensions/content_scripts.html) injected into prerendered pages (document.webkitVisibilityState== 'prerender') ?
I’ve been reading https://developers.google.com/chrome/whitepapers/prerender and https://developers.google.com/chrome/whitepapers/pagevisibility, and am trying to figure out how Content Scripts work with page prerendering/prefetching.
Thanks
TheZ, tomdemuyt: I’m afraid you guys are missing the point. ‘run_at’ specifies whether the content script is injected before or after the DOM is constructed.
However, I am talking about document.webkitVisibilityState, which can be ‘prerender’ (when the page is in a background/invisible tab), ‘hidden’, or ‘visible’. Note that webkitVisibilityState can transition from ‘prerender’ to ‘hidden’ or ‘visible’, or back and forth between ‘hidden’ and ‘visible’, without any changes being made to the DOM. (In order to better understand this, read the articles linked in my original post.)
I think I’ve been able to determine that content scripts ARE injected into prerendered pages. Here’s the problem, however: let’s say my content script does something that should not occur on a prerendered page. For instance, it does pageview count, or adds animation, neither of which should begin until the user is actually viewing the page. So it seems that my content script should do something like what’s shown in the code examples on https://developers.google.com/chrome/whitepapers/pagevisibility - check document.webkitVisibilityState, and also listen to the ‘webkitvisibilitychange’ event, and only do pageview count/start the animation when document.webkitVisibilityState is, or has transitioned to, ‘visible’.
I may have just answered my own question, but I just wanted to make sure that I was on the right track.
Thanks
As TheZ mentioned, you should ues the run_at setting.
Link to docs : http://code.google.com/chrome/extensions/content_scripts.html#registration
I am writing a Google Chrome extension. The targeted pages are written in Russian. Chrome translates to English. I can see some inconsistencies appear that seem to be linked to translation. For example, in the following code I check to see if I am in a particular folder:
if (searchResult[0].innerHTML.indexOf("Общая папка")!=-1) alert("You are in Shared Folder."); else (alert(searchResult[0].innerHTML));
If I reload the exact same page several times, the result is inconsistent. Sometimes it detects "Общая папка" but other times it does not. When it does not detect this phrase, the alert says I am in "Shared Folder" which is the translation for ""Общая папка." There appears to be no consistency here. Sometimes I am dealing with the original text (which is preferred) but sometimes I am dealing with crappy translations that are useless for my script because the translations change all the time.
Does anyone know how to fix this? Turning it off would probably fix it but actually the translations are useful and necessary for other aspects of the extension. I understand that the translation works with some secondary layer of the HTML (I have not researched this very well). Can I simply refer to the original in my script?
According to this answer, you can disable translation by placing the following element in the head portion of your web page:
Insert this to the head section of your web page.
<meta name="google" value="notranslate">
If you needed to programmatically disable translation, you could add that tag through JavaScript.
Not sure about disabling it, but looks like after a translation Chrome adds class="translated-ltr" to <html> element, so maybe you at least can detect when the page was translated and either warn a user that the extension might not work properly on this page or just disable it.