Using the Chrome browser (technically, Iron), I want to have a bookmarklet that will override the expand macro in Confluence (technically Atlassian Confluence 5.2.3), so that none of the sections are collapsed after using the bookmarklet.
Why? When I search in Confluence for a keyword that is behind the expand macro, an article will be identified in the search results with the keyword somewhere in the article, but when you navigate to the article, I can't find the word. So I perform a find in page (ctrl+f) for the word, and it doesn't appear. After I click on all the expand macro links, and try the find in page again, I am able to find my keyword.
Since I am no coder, I have done my best... using the code found here:
Javascript debut - from Chrome console to a bookmarklet and using the I wrote the following:
javascript:void((function(){function getElementsByClassName(classname, node){if(!node) node = document.getElementsByTagName("body")[0]; var a = [];var re = new RegExp('\\b' + classname + '\\b'); var els = node.getElementsByTagName("*");for(var i=0,j=els.length; i<j; i++)if(re.test(els[i].className))a.push(els[i]);return a;};var elems = getElementsByClassName('ajs-content-hover');for (var i=0;i<elems.length;i+=1){elems[i].style.display = '';}})());
I believe the expand action is coming from a class named ajs-content-hover, on certain divs. I could be completely wrong about this. Why I think this is the class:
I browsed to a page using the expand macro, used the Browser Developer Tools (ctrl-shift-I), went to the elements tab, clicked a link I know uses the expand macro - that was currently not expanded (that's the default behavior), and identified the following html:
<div id="content-hover-1" class="ajs-content-hover" style="display: none;"><div class="contents" style="width: 300px;"></div></div>. I found multiple divs of this type, with different IDs, but the same class and the same style.
My first bookmarklet changed the style for the entire page, which is not what I wanted (resulted in a blank page). So I thought targeting the class might be appropriate, but that isn't working either.
Hopefully, this is sufficient explanation to demonstrate the problem, steps taken, motive (sometimes questioned on SO), and desired state. I am looking for an explanation that can get me to a working bookmarklet.
I solved this by taking advantage of the jQuery library that ships alongside Confluence.
This allows you to easily target elements using CSS-selectors.
Also, if you haven't done so already, use the console in Chrome or use Firebug, to test your code.
When using the standard expand macro, the 'link' (really just a span) you click to expand the panel, has a class called expand-control.
Simply select all of the click targets using the class name, then call the 'click' event. All closed panels will be opened and all open panels will be closed.
javascript:$('.expand-control').click();
Related
I'm writing an automated test for a Web-based application that's coded in JavaScript and uses the Dojo framework. I can find the elements I want the bot to find in Developer Tools using well-defined XPATHS, but the automated test fails to find the text the XPATH leads to.
My test code looks something like this:
if verified:
verify_detail.set_pass()
else:
raise AssertionError("Cannot verify detail. Text did not match expected value.")
And the text I'm looking for on the UI isn't misspelled in the config file.
Anyone else have this problem? XPATH works in Developer Tools but fails when the test is run.
Edit 1:
I think I've found a clue as to what's causing this problem. The bot has to navigate to a panel called the details panel. The details panel, when opened, sits on top of another panel called the movie panel. Imagine a list of movie titles and the details panel is opened by right clicking the movie and selecting 'Details' from a dropdown.
So I've basically got a stack of panels, and my XPATH queries are hitting the pane beneath the details pane, which is where I really need to to look.
Has anyone else ever had this problem?
There is not much information to go on, but I realise that it is very hard to deliver a complete example for such cases.
The most common reason for this kind of behaviour is that the element in question is not present immediately on the page, but rather some JavaScript processing has to happen before it will appear.
The most common solution is using "implicit waits", see for example:
https://selenium-python.readthedocs.io/waits.html#implicit-waits
Be aware that this might affect performance of tests in other places, specifically when checking for absence of elements, if it is switched on constantly.
The obvious alternative is explicit waiting.
Another useful tool for analysing situations like this, is to set debugger breakpoints in the browser on DOM elements that you are interesting in, to see how the element is changing while the page is loading.
This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?
I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.
This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.
I am creating a CRM sort of application. There are multiple tags at the top of page. Clicking on the tags, should bring up, a chrome dev tools like panel(Ctrl+Shift+I) which will basically contain a table.
I searched the web, but could not find how to go about creating one. Neiter jQueryUI has any element of that sort, nor the bootstrap library from twitter has something like that.
In case you could throw in some pointers, along those lines. It will be helpful for me.
Thanks!
I am using twitter bootstrap, so that will be helpful.
PS : You can press Ctrl+Shift+I in chrome, to generate the panel, I am talking about.
This is a fairly broad question that potentially has many solutions depending on your exact needs, scenario and skillset. Also, it's always best to post an attempt at the problem to get a better response.
One solution would be to simply hide (display: none;) a sticky div that is attached to the bottom of the window. To show/hide you can use js and either a button/link or try something like http://plugins.jquery.com/project/hotkeys if you want to activate it with a keyboard shortcut.
I'm developing an jsf based application using a library called primefaces.
Primefaces generates a web page containing javascript functions that are generating some buttons. Buttons are not visible in the source code of the page (like < button>...< /button>, and so Watir can't click on these to test something.
My question is : is it possible to recover the id or class of button generated by a javascript function with Watir ?
Thanks
In practice, using sleep is not recommended. Depending on the amount of time the browser & JavaScript code takes to perform its action, you could run into race conditions and end up with tests that only work sometimes.
If you're considering using sleep, use wait_until instead. It will make your test code more resilient to timing issues in those cases where you really need to use it.
As #JustinKo recommended, you should probably be using Watir's wait methods to wait until the element is displayed on the page.
In your case, you'd want to try something like these examples:
# Assuming your browser object is named: $b
#Ex: $b = Watir::Browser.new :chrome
$b.button(:id => 'my_button').wait_until_present
Watir::Waiter::wait_until { $b.button(:id => 'my_button').visible? }
If you are having trouble finding the element on the page, you might want to look a the source code in FireBug or the Developer Tools console in Chrome (Shift+Ctrl+I). Try to find some identifying attribute for that button, or a container element with an id, class, name or some other identifying attribute.
However, at this time I'm not sure that there is a way to detect whether an element was generated or added to the DOM by JavaScript.
Hi i'm a JavaScript novice and need some help. I am trying to create a toolbar which can be viewed on any website through the use of a bookmarklet, the toolbar is simply just a div with a few links. But i am stuck on how to achieve this. Any help to accomplish this would be greatly appreciated.
most bookmarklets that do something complecated like "creating a toolbar" simply add an external script to the page that the bookmarklet is invoked on.
Basically all you have to do is write a link that contains javascript, which can be acheived by starting the href="" with javascript:
so lets just start with a script in an href that will add an external JavaScript to your page
addScript = function ( url ) {
myScript = document.createElement('script');
myScript.src = "url";
document.head.appendChild(myScript);
};
addScript("http://google.com/");
so if you shrink that down into a url you get..
click to add toolbar
however you want to make this bookmark-able so theres one more level of confusion we have to add... and this part has to be done in different ways depending on the browser
addBookmark( url, title ) {
if (window.sidebar) { // Firefox
window.sidebar.addPanel(url,bookmarkName,"");
} else if(window.external) { // IE
window.external.AddFavorite(url,bookmarkName);
}
}
You can include that on the page where you're going to have your add bookmark button. A couple things to note though
this isnt going to work in opera.. but who cares about opera
webkit browsers (chrome & safari) dont allow javascript to create bookmarklets
Finally you need to mash it all up into one ugly link
click to add bookmark
In the end though I suggest you look into making a Google Chrome Extension or a Firefox Plugin instead of a bookmarklet since you have more capability with either of the two.
As far as how to make a toolbar with JavaScript, well you're just going to have to make another question for that.. Its too much and you haven said enough about what you wan to do for me to answer it here.
bombedmetor,
Greg Guida's tip on including an external script will allow you to create an awesome, clean bookmarklet-based toolbar. Why? Because you'll be able to use JavaScript libraries like JQuery, etc.
Here's a quick example along the lines you asked for to help get you started. The bookmarklet creates a div element with a link to the Stack Overflow homepage.
javascript:void(function(){var divElmt=document.createElement('div');link1=document.createElement('a'); link1.href='http://stackoverflow.com';link1.innerHTML='StackOverflow Homepage';divElmt.style.backgroundColor='yellow';divElmt.style.position='fixed';divElmt.style.top='0px';divElmt.style.width='10em';divElmt.style.height='5em'; divElmt.style.border='solid red 4px';divElmt.style.zIndex='100'; divElmt.appendChild(link1);document.body.appendChild(divElmt);})();
To use the above bookmarklet, you create a new bookmark in your favorite browser and add the code above where you would normally place the URL.
The code does the following:
Creates a new div element.
Creates a new anchor element and sets the value of the href attribute.
Assigns some basic values to the style attributes of the new div (so you can see it easily).
Appends the anchor as a child element of the new div.
Appends the new div element as a child of the body element.
If all goes well, you should see a yellow box with a link to the Stack Overflow homepage at the top-right of your page after using the bookmarklet. bombedmetor - I hope this helps get you started. After you get comfortable with how these things work, you can apply Greg's wisdom to create your toolbar bookmarklet in a way that can be added to people's browsers with just a click or two.
Something to keep in mind: As Greg indicates, bookmarklet code is treated as the contents of the href attribute of an anchor element. This is why I used single quotes in the code above.
Some sites/articles to check out:
http://en.wikipedia.org/wiki/Bookmarklets
http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/