I need to navigate through a menu and select a submenu.
I'm using click element xpath as below:
//*[#id="gomenu68e1884541"]//nav/div/ul/li[3]/div/ul/li[2]/a
But it does not help me because the id is dynamic and changes every time, When I access the application
How can I navigate a menu-> submenu?
For more details on this, refer below mentioned image.
Can anyone help?
I've finally got it to work (even on the third level of the menu) using these commands:
Wait Until Page Contains Element
Sleep
Mouse Over
Click Link
And a mix of different xpath:
xpath=//*[#class="dropdown"]//a[contains(., 'Alumnos')]
xpath=//*[#class="dropdown"]/li[3]/div/ul/li[1]/div/ul/li[1]/a
Thanks everyone for your help
I have had the same issue with Xpath. js, vagy angular etc. based websites which are generates the content dinamically simply not works. I have spent a lot of time on my previous automation project, to find a sulution for this: building own xpath. Means not just Insect Element in Chrome and other browsers, you have to build them by yourself, while learning how the code and website works. This the the method you should follow:
get familiar with the front-end client's code
learn xpath
build your own xpath
You have to find out how you can reach the wanted element, without using #ids. Use css classes which are rarely changing that randomly, and find out the relations between your element. You have to use the following-sibling and text() and other less famous xpath selectors. I would suggest to you this
to get familiar with xpath. There wasn't any other way for me, but in the end I had an amazing, well formatted variable files, contains all the element's xpaths.
Related
Problem
So we have quite a big project with lots of different Partial Views and a client side data binding framework (Knockout.js in our case).
One of the more problemtic parts is that is getting harder and harder to figure out which partial view is rendering an element that I see on my page.
So I need to debug this particular DIV. Okay, where do I find it?
Usually I try to find a very specific class or ID close by this element and do a search through the whole platform - far from ideal.
Question
So I was thinking about the following; tagging all elements (in debug mode) with the source file where they have been generated.
Right now I'm thinking about something like a precompiler that adds a data-source="" to every element. I might refer to an ID within a dictionary to prevent repeating all the long filenames.
Before I'm reinventing the wheel:
is there already something similar?
are there better alternatives?
We're using ASP.NET MVC, but any hints to how other platforms do this are perfect too.
If you are using Visual Studio, I highly recommend the Web Essentials extension. Among many great features, it has one called "Inspect Mode", part of the larger "Browser Link" feature, that does exactly what you are looking for; it identifies the file that a particular DOM element came from. It might be worth a shot if that option is open to you.
#Dirk, as per my understanding your issue is to easily identify the element/view. Adding data-source can be an option but before that have a look at this link
Editing Styles and DOM - Chrome Dev Tools
This page has many demonstrations which might be helpful to your problem. Furthermore, I do agree with Kevin suggestion.
I am interested in knowing how the following link is able to list items/links in the form of an explorable tree - I am referring to the PAGE TREE structure in the left hand side div/section.
https://www.securecoding.cert.org/confluence/pages/viewpage.action?pageId=637
I want to know how what all things/items/urls that have to appear under the parent node are determined. I mean how does this happen?.
Any inputs are most welcome.
Thanks,
Pavan.
What Guille and Banana said is correct. Plus if you use the Inspect option in your browser while testing out the tree, it'll show part of what they are using is
style="display:none"
and
style="display:block"
That's a hint to get you started but yeah like they said, lots of plugins out there to use or ways for you to program it.
Also as a quick suggestion, Bootstrap comes with a tree option along with many other features.
I don't have direct Host or Superuser access to DNN and the way our system is set up I wont get access to those accounts. It is a policy where i work. Is there ANY way to get your HMTL/CSS to actually work as you put it into the DNN HMTL editor? I have tried adding things like an accordion sidebar, tabbed area, and a simple CSS image hover. DNN takes my code and jumbles it up so that it does not work correctly. I have taken markup straight from my text editor, into dnn (that was working fine in the browsers before i took it into DNN) and it shows up, but does not act like it should or the code gets jumbled and breaks and I spend an hour trying to fix it EVERY TIME.
Has anyone out there had the same issue, or any suggestions, tricks to get your markup to work correctly in DNN.
Thanks,
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification.
One possible way to keep your javascript working is to move it to the Header or Footer options in the module options of that module instead of the content.
As for if your code contains a FORM element, you can use javascript to modify the Asp.NET FORM element to suit your need, see http://dotnetnuke.bz/Articles/tabid/156/DotNetNuke/98/How-to-Include-Multiple-Forms-in-DotNetNuke.aspx for more details.
I have a bit of an issue with design where I have a list item that has taken it on itself to be the far higher than the others. I have a feeling this is because of another element in the design.
I use firebug sometimes and chrome developer tools the rest of the time.
These tools can be used to see what the height of something is, or what css styles are effecting the object but what these tools don't do however is show how other objects are effecting other objects.
Has anybody come across a tool which shows the relationship objects in a design are having on each other? Its a long shot, but if there were a place to find out it would be here at SO.
Thanks.
Have a look at webdeveloper available for Chrome and Firefox. This is a very extensive plugin but should be able to do what you need.
Install it > go to the page you want to debug > Cycle trough various Outline options. Start off with "Outline block level elements" and work your way from there.
Do tell me if I misunderstood your question, but with either Firebug or the Chrome Developer Tool, you should be able to inspect the nesting of different elements in your design, and see how a design will look after you delete one of those elements.
The only tricky part is learning how to use those tools, and for that I suggest you watch some youtube videos. For me at least, that's the way I've learned. Unless someone can show you in person, the next best alternative is someone showing you how those tools work through a video.
How do I repair malformed HTML using C#? A great answer would be an HTML Agility Pack sample!
I'm scraping a site (for legitimate use). The site's HTML is OK but there are some annoying problems.
One way I could go would be through regular expressions. I used Expression Web to analyse the problems and the regular expressions needed to correct them. So one way would be to use a tool such as RegexBuddy to generate C# code for these regular expressions.
However, the recommended tool for processing malformed HTML in C# is the HTML Agility Pack (HAP). Moreover, I've analysed only a handful of pages and I'm afraid that future pages will contain patterns I've not yet solved, and I would hate to enter the "find the errors in the next few pages and correct them" maintenance business. So, if HAP already has a solid, always-working solution, this would be great. The problem is that except for a few mentions here at SO I could not find any how-to-use documentation for this tool, except for the object-by-object API help file.
So - before I spend $ and learning time on RegexBuddy (no free evaluation version), or break my teeth on HAP's API documentation - is there an easy way to do this? An HAP sample would help... :-)
can you tell me what kind of annoying problems are you having?
but you dont need to use regex to clean the html, HAP will let you access the elemtents of a malformed html using Xpath Queries.
and basically you need to learn Xpath to know how to get the html elements you want.
it really depends on the kind of html you are parsing using HAP.
but there is several ways to get the elements.
like by id or class or even you can get the element that follows another element that contain a given text like "name:" for example.
you can goto W3 schools Xpath Tutorial for a nice xpath tutorial
What I took from the answers here:
1) If you're scraping a website you don't control, you'll always enter a maintenance mode where you have to fix your scraper every time the layout of the page you're scraping changes.
2) If you are limited to this known site, why not write your scraper to adjust the problems
So, if I have to go into maintenance mode, it should be as easy as possible. Therefore, my process is as follows:
I use Webius's SWExplorerAutomation to detect scenes in Web pages. The idea is that a Scene is a collection of conditions you define for IE. When a web page is loaded, IE tries to see which set of conditions is met (e.g. - page title is "Account Login", the page contains a "Login" text box a "Password" text box). If a set of conditions corresponding to a scene is detected, IE reports that the scene has been detected. This model provides an abstraction layer - Some changes in the web page can translate to changes in the scene file, saving the code from having to change. Additionally, this shields me from IE's event driven model: I call "scene. I'm evaluating this product but I'm not yet sure I'll use it, mainly because the documentation is terrible. Another alternative is Watin, and one more reason I haven't yet bought SWEA is this article accusing its author of spamming against Watin.
Once the web page has been acquired, I use Expression Web to run compatibility checks and identify errors.
I use RegexMagic to remove and correct errors. I really love this tool. Sure, sometimes it make you murderously angry because it doesn't let you do things that should be really easy, but it's a sweet, sweet tool, and the documentation is amazing.
Finally, after all the errors I know have been corrected, I use HTML Agility Pack to convert to XHTML - cross the ts and dot the is, so to speak: all lower case, quotes across attributes, and so on.
Hope this helps!
Avi
Regex can't be used for HTML Cleaning.
Does http://tidy.sourceforge.net/ helps?
If you're scraping a website you don't control, you'll always enter a maintenance mode where you have to fix your scraper every time the layout of the page you're scraping changes. It doesn't matter if you're using the regex <td color="red">\d+</td> to get the big red number from a page or if you're using a DOM parser to get the 3rd cell in the 2nd row in the table with id numbers to get the same. The regex breaks if the webmaster replaces the color attribute with a class attribute. The DOM parser breaks if the webmaster adds another row to the top of the table.
If you're scraping larger parts of a web page and want to embed them in your own web page, it may be easier to get over your desire for web standards compliance and just let the browser figure out how to display things.
Since you're using Html Agility Pack and know of the problems that occur, if you are limited to this known site, why not write your scraper to adjust the problems when you've loaded the HtmlDocument.
i.e.:
If you know the element always appears after the , insert the element into the first child position of the tag.....