Trouble attaching to a javascript window with Watir - watir

I am new to Watir, and am working on developing a testing tool for my work.
I have run into a problem that I cannot seem to solve, even after checking several sites.
The javascript window creation is below: (the window created holds a pdf in a window, so the only "buttons" are the minimize, maximize, close)
<a id="LogIn_HyperLink2" class="ms-WPTitle" onclick="javascript:var win = new Window({className: 'spread', title: 'Security Statement', top:0, left:1, width:750, height:365, url:'--redacted--/security.pdf', showEffectOptions: {duration:1.0}}); win.setConstraint(true, {left:10, right:20}); win.showCenter(); return false;" href="--redacted--/security.pdf" style="color:#6699cc; font-weight:bold;">Security Statement</a><br>
I have tried using both
puts browser.modal_dialog(:title, "Security Statement").exists?
puts browser.javascript_dialog.exists?
both have returned 'false'
What approach should I be taking to attach to this new window, or more directly: How can I close this new window?
You can see the page at this link (IE only)

If the window holds a PDF file it's a browser window, not a modal javascript popup (alert, confirm, prompt)
It's defined to start without all the normal menus etc active, but it's still a browser window. You can attach to it as described in the Watir Wiki section about new browser windows, using the url or the title since you know both of those (given the HTML you showed us).
If you are using Watir-Webdriver use it's window switching commands. Right now the watirspec for that is your best reference to the methods supported and how they work.
EDIT
Thanks for the link. While the above would be true for a new browser window, that's not what you are faced with. What you have there is all inside the browser HTML, created in the DOM on the fly with javascript. It's all standard HTML elements, easily interacted with once you know what's going on (this is actually IMHO easier to deal with than a popup or separate window)
Use the IE developer tools, after you click the link that makes that 'window' appear, click the icon in the toolbar of the dev tools to refresh the DOM in the dev tools and you will be able to see that.
The outermost container appears to be a div of class 'dialog', which is unique in the DOM at that point.
The window controls are three divs under that one, with classes 'spread_close', 'spread_minimize', 'spread_maximize'. There are three tables that hold the graphic elements for the top, sides, and bottom of the 'window' but there is ZERO actual content there, it's just a visual windowframe.
There is also an iframe that superimposes that window, which is I think were the content would be (I can't get it to load, maybe because I'm not authorized for it or something)
If you just want to close the window, try this:
browser.div(:class => 'spread_close').click
Since this is coming into existing due to a bunch of client side JS code you may need to use something like the 'when_present' method after clicking the link before you first start to interact with it. eg if all you want to do is click the link to open it, and then close it, you'd do something like this
browser.link(:text => 'Security Statement').click
browser.div(:class => 'spread_close').when_present.click

Related

Chrome extension to search a website?

I'm trying to create a google chrome extension (I'm almost a newb at programming, although I understand the basics, somewhat) that will search a video streaming site for the title that you enter. The site is somewhat slow, and going through a page or two to get to the sites' search bar can be a pain. I would (for now) like this extension to tie into the sites' existing search url. Here is part of the URL. When you leave the search field blank and search, this is the resulting URL
anisrch_title=&op=srch&anisrch_cat=
When you actually search for something, it simply inserts the search term as follows:
anisrch_title=(SEARCH TERM HERE WITHOUT PARENTHESES)&op=srch&anisrch_cat=
As I mentioned before, I am a programming newbie, and am unfamiliar with all sorts of programming techniques. How would I go about making an extension that redirects you to the URL + the search term inserted into the appropriate place?
For example, upon clicking the extension Icon, a pop-up appears with a text field and a "Go" button.
Textfield input = SearchTitle
And upon clicking the "Go" button, the extension redirects you to the full link of:
anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
Please be patient with me, as I am a newbie at coding and I am still learning. The site I am making this for is strained by heavy load, and insufficient server resources. Could someone please walk me through this?
For example, upon clicking the extension Icon, a pop-up appears with a
text field and a "Go" button. Textfield input = SearchTitle
Use a browser action (https://developer.chrome.com/trunk/extensions/browserAction.html). The popup of a browser action can be a html page. Just put your text field, go button, etc in popup.html.
And upon clicking the "Go" button, the extension redirects you to the
full link of: anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
redirect? Did you mean opening the search page in the current tab? If that is the case, use chrome.tabs.update (https://developer.chrome.com/extensions/tabs.html#method-update) in your handler of onclick for the button (say your button id is go and text field id is query). Because of CSP (https://developer.chrome.com/trunk/extensions/contentSecurityPolicy.html), you must place your JavaScript code in a separate popup.js and refer to it in your popup.html.
document.getElementById('go').addEventListener('click', function() {
chrome.tabs.update({url: 'http://yoursite.com/path?anisrch_title=' + document.getElementById('query')'&op=srch&anisrch_cat='});
});
If you prefer opening a new tab, use chrome.tabs.create instead.
If you're not familiar with basics of Chrome extensions, the Getting Started tutorial will help you much: https://developer.chrome.com/extensions/getstarted.html.

watir - focus on window without title

I use watir in RadRails IDE. I need to attach a new window by it's title, but in my web application there could be an error, the title is missed. So I can't use the code:
ie3=Watir::IE.attach(:title, 'Mt Title').
The page is loaded and I can perform some actions there. Is there way to focus on that window not using page title? Or how can I define page title?
Maybe there is a possibility of choosing a window by name or some other attribute and if I do not know the exact name then can I define it or define names of all opened windows?
If there is only one IE window this would work:
browser = Watir::Browser.attach(:title, //)
If you want to check if there is a page with a title, try something like this:
begin
browser = Watir::Browser.attach(:title, "teh codez")
rescue Watir::Exception::NoMatchingWindowFoundException
puts "could not find browser"
end

Extension-Specific Context Menu

I'm trying to add an item to the right-click menu on my extension. I've tried to find a method which would work, but a lot of the results seem to deal with context menus on the actual page, not the extension icon itself. The contextMenus API doesn't seem to work for this, unfortunately.
There is currently no API for that. Head for Chromium Issue 78631 and click the star to cast your vote for it and receive updates by e-mail. In the meantime, you could create a popup with a menu that lists both the primary action and the actions you would have put in the context menu.
(I assume you're trying to add the context menu item to your browser action. Your question is a little ambiguous.)

Can Popup page use DOM elements created in Background Page

Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)

jQuery Mobile - Dialogs without changing hash

I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.

Resources