i will be short.
As far as i know watir library provides two methods for getting html elements.
Almost for each element (div, button, table, li, etc) watir provides two methods:
. One is the 'singular' method which gets only one specific element. For example:
watir_instance.div(:id,'my_div_id')
watir_instance.link(:href,'my_link_href')
watir_instance.button(:class =>'my_button_class', :index => 4)
These methods will only retrieve A SINGLE ELEMENT. Thats ok...
. The second is the 'plural' method that will retrieve ALL the elements of the watir instance
watir_instance.divs
watir_instance.links
watir_instance.buttons
But as far as i know watir doesn't provide a method to get more than one element giving certain conditions.
For example... If i want to flash all the links with id:my_link_id it would be very easy to do something like this:
watir_instance.divs(:id, 'my_link_id').each do |link|
link.flash
end
With hpricot this task is very easy... but if your aim is not to parse i couldn't find a Watir Method that does what i want.
Hope you can understand me...
Cheers, Juan!!
Juan,
your script has several problems:
You say you want to flash all links, but then you use watir_instance.divs. It should be watir_instance.links
you pass arguments to divs method: watir_instance.divs(:id, 'my_link_id'). It should be just watir_instance.divs
Your example is also strange:
i want to flash all the links with
id:my_link_id
As far as I know, id should be unique at the page.
So, here are different examples:
1) Flash all links on this page:
require "watir"
b = Watir::IE.start "http://stackoverflow.com/questions/1434697"
b.links.each do |link|
link.flash
end
2) Flash all links on this page that have questions in URL (bonus: scroll the page so the link that is flashed is visible):
require "watir"
b = Watir::IE.start "http://stackoverflow.com/questions/1434697"
b.links.each do |link|
if link.href =~ /questions/
link.document.scrollintoview
link.flash
end
end
Related
If you forget to close a HTML-Tag, Chrome will validate your code and try to fix problems like this.
I had a major problem because I forgot a closing Form-Tag, and instead of closing it correctly, Chrome deleted a following form, not the inputs, simply the Form-Tags.
When I looked at the Source Code itself, the Form-Tag was there, but not in the Elements-Tab in the console.
So at first, I thought it must have something to do with some JS deleting this DOM-Node and set a DOM-Breakpoint to find the script.
To cut a long story short, it took me hours to find out, that no JS deleted my form, but Chrome itself thought: There is a missing so I delete some other to fix that...
Is there any possibilty to see if Chrome automatically changes your DOM?
Thank You!
The browser Engine does indeed. They use string replace methods, although it happens internally.
<div>
</div>> // mistake
<div> //missing end tag
<div></div>
---------------------------------------------------
Methods
file=file.stringreplace('>>', '>')
an uneven count will add the missing div just after the next beginning div and conditionally if the missing is not found by the end of the file:
file=file.stringreplace('
<div>', '</div>
<div>')
The Parsing Engine after the missing and broken tags are repaired then parses the file and can then with a positive count set the screens GUI widgets by opening and closing tags as GUI Frames. It does this by adding tokens delimiters to the actual div tags making them easily distinguished from each other.
<div1s>
</div1e>
<div1s>//section columns
<div2s></div2e>
<div2s></div2e>
<div2s></div2e>
</div1e>
<div1s>Footer</div1e>
-----------------------------------------------------
The GUI Frame Tokens
for each "<dive1>"{
FrameCreate(CSS--ATTRIBUTES FROM ASSOCIATIVE ARRAYS--)
//the GUI Frame Widgets VERTICAL SECTIONS
}
//Next it finds the nested divs2 and embeds these into the thir parents above but with embedded Text Widgets also.
FrameTextBoxCreate(--CSS MATED ATTRIBUTES RULES--)
div3 etc------and so on.
In fact it is in the WebView GUI Widget Sets in its customized Mosaic Canvas Widget Sets in Chrome would be where they are repaired.
In codedUI I am unable to traverse by GetChildren() method in an html page with HTML5 tags.
My Html structure is like this.
HTML
|-BODY
|-DIV id="pagetop"
|- HEADER class="headerclass"
|- NAV class="navclass"
|- SECTION class="sectionclass"
|- FOOTER class="footerclass"
|- DIV id="lastdiv"
Issue: On doing GetChildren() on "pagetop" div control, only 1 result is returned having "lastdiv" div control in it.
It should return 5 controls instead.
I am able to capture the UIMap for SECTION(or other HTML5 tags) and able to traverse backward by GetParent() method, but the other way is not working.
SECTION.GetParent() = DIV id="pagetop" [Works as expected]
SECTION.GetParent().GetChildren() = Only 1 result [This is wrong, should be 5]
Is there an issue with traversing HTML5 tags in codedui?
Try looking at the child controls of the one control that is found. I am not aware of anything that says the HTML structure you show MUST be represented with exactly the same number of levels. Phrasing that differently, the UI Controls might have extra levels than the minimum that appear to be necessary for the HTML structure.
To understand how the HTML is represented you could use the Coded UI cross-hairs tool. Start with one of the five sections (or a child of theirs) and then use the four navigation arrows to move up through the hierarchy to see what items Coded UI can see at each level.
Another approach might be to use recursive code that calls GetChildren() to descend the hierarchy and show exactly what is present at each level. You might use code based on the recursive routine in my answer to this question Recursively locating a UIElement with InnerText in C# but using a small maxDepth and adding some Console.Writeline() or other print statements to display the controls found.
I have filed one bug in VS2013 feedback forum for this issue.
It can be tracked here: https://connect.microsoft.com/VisualStudio/feedback/details/898599/
Based on suggestions from AdrianHHH, I am currently doing this to get all the children of a control. This returns all controls including HTML5 controls as HtmlCustom.
private List<UITestControl> GetAllChildren(UITestControl uiTestControl)
{
var child = new HtmlControl(uiTestControl);
child.SearchProperties.Add("InnerText", "", PropertyExpressionOperator.Contains);
var items = child.FindMatchingControls().ToList();
var trueChildren = items.Where(i => i.GetParent().Equals(uiTestControl)).ToList();
return trueChildren;
}
Is it possible to give the same section multiple names in mediawiki out-of-the-box (vastly preferred), or do I need to write my own hook/extension/plugin (and if so, tips on how to do so much appreciated)?
In my case, I have example code on single compilation page that I want to link to for multiple individual articles by the name of each article. For instance, I would like something like the following the work.
Page: Interrupts Code Examples
===(EIMSK|EICRA)===
void interrupt01_init(void)
{
EICRA = 0X0F; // in binary, 1111. That is, the rising edge of INT1 and INT0 generate an interrupt request.
EIMSK = 0X03; // in binary, 0011. Enables INT0 and INT1 interrupts.
}
and both of the following would link to the same section, but with the appropriate name for each page:
Page: EICRA:
[[Interrupts Code Examples#{{PAGENAME}}]]
Page: EIMSK:
[[Interrupts Code Examples#{{PAGENAME}}]]
For full context, see example page http://narwhaledu.com/AVRwiki/index.php?title=PCMSK0.
It's possible I could use something like mediawiki: is there a way to automatically create redirect pages that redirect to the current page?, but is it possible to write it for sections instead of pages? Also, although acceptable, I would prefer not to have the allowed aliases be ALL the sections on a page; for instance, on http://narwhaledu.com/AVRwiki/index.php?title=Interrupts_Code_Examples, I have an "about" section.
Edit:
If it wasn't clear, ideally the when the user visits
Page: Interrupts Code Examples#PAGENAME
they see a properly populated section title, instead of "EIMSK or EICRA Example Code" (since there can be a LOT of aliases to a code example)
==={{{PAGENAME}}}===
void interrupt01_init(void)
{
EICRA = 0X0F; // in binary, 1111. That is, the rising edge of INT1 and INT0 generate an interrupt request.
EIMSK = 0X03; // in binary, 0011. Enables INT0 and INT1 interrupts.
}
I can get transclusion to work but not links.
Page: Template:Interrupts Code Examples
=={{#ifexist: {{{pagename}}} | [[{{{pagename}}}]] | External Interrupts Example Code One}}==
{{Template:ExampleCode~PCMSK0, PCMSK1, PCMSK2, PCICR, PCINT0_vect, PCINT1_vect}}
My ideal syntax would be
[[ Template:Interrupts Code Examples|pagename={{PAGENAME}} ]]
but obviously this produces instead a link to the nonexistant page pagename=Name_of_Register instead of linking to Interrupts Code Examples and passing the parameter {{PAGENAME}} such that I can reference it in Interrupts Code Examples with {{{pagename}}} and thereby generate my section header..
This would keep the compilation page clean (only have two code examples instead of copying each one 5x for each alias, my current solution), but I can only pass parameters to the template if I transclude, not if I link to the template, I believe. Is this true?
I may just use the "Example Code One" catchall for wiki markup readability in the end since this is starting to break my brain...
Any HTML anchor will work as a section link. So, if you have <span id="foo">, you can use [[Bla#foo]] to jump to the span. You'll need one HTML element per ID, but that's still workable I think.
Is it possible to force the sitemap control to render the menu when the current action is not listed in the MVC.sitemap file?
I have a simple top nav. When the current action is in the sitemap, the call to .Menu() will render the correct <ul><li>.. data. However, if I got to a page that is not in the sitemap such as /Home/Login, then it will not render any html at all (not even a comment, just empty space). This isn't an [authorize] issue; the menu is fine when i'm in '/Home/Index'.
It seems like it should render what was requested, but just not set the IsCurrentNode and IsNodeInPath properties. Here is the call I am making
<div id="main-nav">
#Html.MvcSiteMap().Menu(0, true, true, 1)
</div>
The Mvc.sitemap file:
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="Form New Human" controller="Person" action="Create"/>
<!-- there is no mvcSiteMapNode for "Home" "Login" -->
</mvcSiteMapNode>
Found the way around it. It apparently isn't a built in extension method, or at least I couldn't find one. You could call Html.MvcSitemap().Menu(Html.MvcSiteMap.Provider.RootNode,...) but I didn't want to instantiate the helper twice.
<div id="main-nav">
#{
var sm = Html.MvcSiteMap();
#sm.Menu(sm.Provider.RootNode, true, true, 2); // 2 levels (home, plus main nav)
}
</div>
Looking around in the disassembly seems to show that it works a little like this:
You really need a starting node
If you don't give it one, it tries to find one based on the current node
plus restrictions (forward searching, depth restrictions, etc)
if you want nodes from level 1, you have to know what level you are on
Since that returns null, starting node is null, which means the helper writes an empty string
There may be a combination of tricks, or an overload or two, which can be finagled into doing this, but I can't find it right now. This works for my needs (simple top menu). There has to be a simpler way to do this, something with wild cards, or route based, with a closest match thing going on. I figured menus were a fairly standard part of a web app, and this would be covered :)
I have an array of 2000 items, that I need to display in html - each of the items is placed into a div. Now each of the items can have 6 links to click on for further action. Here is how a single item currently looks:
<div class='b'>
<div class='r'>
<span id='l1' onclick='doSomething(itemId, linkId);'>1</span>
<span id='l2' onclick='doSomething(itemId, linkId);'>2</span>
<span id='l3' onclick='doSomething(itemId, linkId);'>3</span>
<span id='l4' onclick='doSomething(itemId, linkId);'>4</span>
<span id='l5' onclick='doSomething(itemId, linkId);'>5</span>
<span id='l6' onclick='doSomething(itemId, linkId);'>6</span>
</div>
<div class='c'>
some item text
</div>
</div>
Now the problem is with the performance. I am using innerHTML to set the items into a master div on the page. The more html my "single item" contains the longer the DOM takes to add it. I am now trying to reduce the HTML to make it small as possible. Is there a way to render the span's differently without me having to use a single span for each of them? Maybe using jQuery?
First thing you should be doing is attaching the onclick event to the DIV via jQuery or some other framework and let it bubble down so that you can use doSomething to cover all cases and depending on which element you clicked on, you could extract the item ID and link ID. Also do the spans really need IDs? I don't know based on your sample code. Also, maybe instead of loading the link and item IDs on page load, get them via AJAX on a as you need them basis.
My two cents while eating salad for lunch,
nickyt
Update off the top of my head for vikasde . Syntax of this might not be entirely correct. I'm on lunch break.
$(".b").bind( // the class of your div, use an ID , e.g. #someID if you have more than one element with class b
"click",
function(e) { // e is the event object
// do something with $(e.target), like check if it's one of your links and then do something with it.
}
);
If you set the InnerHtml property of a node, the DOM has to interpret your HTML text and convert it into nodes. Essentially, you're running a language interpreter here. More text, more processing time. I suspect (but am not sure) that it would be faster to create actual DOM element nodes, with all requisite nesting of contents, and hook those to the containing node. Your "InnerHTML" solution is doing the same thing under the covers but also the additional work of making sense of your text.
I also second the suggestion of someone else who said it might be more economical to build all this content on the server rather than in the client via JS.
Finally, I think you can eliminate much of the content of your spans. You don't need an ID, you don't need arguments in your onclick(). Call a JS function which will figure out which node it's called from, go up one node to find the containing div and perhaps loop down the contained nodes and/or look at the text to figure out which item within a div it should be responding to. You can make the onclick handler do a whole lot of work - this work only gets done once, at mouse click time, and will not be multiplied by 2000x something. It will not take a perceptible amount of user time.
John Resig wrote a blog on documentDragments http://ejohn.org/blog/dom-documentfragments/
My suggestion is to create a documentDragment for each row and append that to the DOM as you create it. A timeout wrapping each appendChild may help if there is any hanging from the browser
function addRow(row) {
var fragment = document.createDocumentFragment();
var div = document.createElement('div');
div.addAttribute('class', 'b');
fragment.appendChild(div);
div.innerHtml = "<div>what ever you want in each row</div>";
// setting a timeout of zero will allow the browser to intersperse the action of attaching to the dom with other things so that the delay isn't so noticable
window.setTimeout(function() {
document.body.appendChild(div);
}, 0);
};
hope that helps
One other problem is that there's too much stuff on the page for your browser to handle gracefully. I'm not sure if the page's design permits this, but how about putting those 2000 lines into a DIV with a fixed size and overflow: auto so the user gets a scrollable window in the page?
It's not what I'd prefer as a user, but if it fixes the cursor weirdness it might be an acceptable workaround.
Yet Another Solution
...to the "too much stuff on the page" problem:
(please let me know when you get sick and tired of these suggestions!)
If you have the option of using an embedded object, say a Java Applet (my personal preference but most people won't touch it) or JavaFX or Flash or Silverlight or...
then you could display all that funky data in that technology, embedded into your browser page. The contents of the page wouldn't be any of the browser's business and hence it wouldn't choke up on you.
Apart from the load time for Java or whatever, this could be transparent and invisible to the user, i.e. it's (almost) possible to do this so the text appears to be displayed on the page just as if it were directly in the HTML.