I have a series of integration tests running through the selenium driver with code coverage tools already set up on my backend server. What I'm looking for now is to check that the browser displays every HTML element (in particular those that are hidden or added through javascript after the page loads), tests press all buttons and follow hyperlinks, etc. It'd be something like JSCover but for client-side HTML.
Like any programming language, the "code coverage" would serve as a reminder to remove unused DOM elements or force developers to write tests and code that use them. For example, if I create a page with a hidden modal, but, in a rush, I forget to include a way to reveal it, or I forget to add a test to press the button to make it appear and use it, I'd like to be able to
generate a report similar to code coverage that says:
The following elements remained hidden at /path:
<div id=modal hidden>
...
</div>
And
Clients never pressed the following buttons at /path:
<button>Show modal</button>
This sort of measurement seems like something that should live in the web browser's driver since that would be the only way to know every element displayed when JS changes the DOM. Still, if anyone has ideas about simple code that polls the web page and checks things client-side, I'd be open to any suggestions.
Related
I have a single page application written in AngularJS. I need to put a UI5 text field there (for testing purposes) that I am using with Declarative Support.
I have 2 files:
index.html
sap.html.
In my index.html I have <div class="mainView" ng-view></div>
and there I inject sap.html into the index.html.
when I write this line in my index.html I see the sap text field:
<div data-sap-ui-type='sap.ui.commons.TextField' id='message' class='my-button' data-value='Hello World'></div>
However, when I put this code in sap.html the text field isn't being shown in the browser.
When I look in the chrome F12 source mode - I see that the UI5 related tag has been evaluted into textbox in the index.html. This doesn't happen in the sap.html (the "injected by angular ng-view" page) - I just see the tag "as is" - the DOM in the injected page was not evaluted.
Why is that happening? Does AngularJS bootstrap or life cycle
interfere with sap boostrap?
Any way to fix it?
I need to use AngularJS because it is a part of an existing app. A re-write of the app is not an option for me.
Thanks
I never came across this scenario and really do not consider this a good solution (but this is my opinion). I wonder why do you expect UI5 to be aware of AngularJS injecting markup dynamically?
However, the documentation shows an example of how to compile dynamically loaded markup. Obviously AngularJS provides an event to listen to reloads of ngView content, maybe it is possible to trigger the compliation there.
I've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');
I happen to have inherited a drupal project where a common html validation error seems to occur on nearly every page. The validation error is so minor and easy, I actually only have to open any page up in the editor and the tinymce wysiwig editor will fix the problem automatically and I only need to save the page. Considering I will be needing to do this 30k+ times to apply it to the entire site, is there any way to have it either applied automatically to all pages or automated? Any and all suggestions welcome to help me speed up the process.
EDIT : Used solution
Since I'm not the most adept at finding a programming solution, I did find an addon for firefox letting me record et loop a series of actions called iMacros. Started it up in 5 different instances of FF and let it running all night and it's half done already. Certainly not the most efficient way of doing things, but may be a solution for those who, like me, aren't as advanced in programming.
Assuming you can loop through the pages somehow i would suggest to build a page where you include the code source into the editor root html element (textarea or whatever). Then after onInit (see the tinymce configuration options for this (setup parameter and onInit) ) you trigger the submit or save button which delivers the page to the server where it gets saved.
The pages textarea might then get filled with the code of the next page and so on...
The important part here is that your serverbackend is able to loop through the different pages and knows which page comes next when receiving the modified/corrected page code.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.
I have a web application with a simple file upload requirement (max 1 mb).
The web application is an externally exposed web site that must be (as much as possible) compatible with all browsers and versions.
We are using C# .net 3.5 ASP .Net (IIS 7) technology.
We are having trouble implementing the file upload control:
<input type="file" ... />
The buttons are not clicking correctly and different input methods (eg clicking on the text box in some browsers will open the input field).
We need to avoid 3rd party file upload tools.
What is the best way to make this compatible with all browsers?
Can we use frameworks (eg we could use JQuery) to do this?
Any help is really appreciated.
Edit:
Here are some more specific behaviour details:
Intended/Expected:
Consistent use of textbox field (for filename):
displays filename of selected file
no events fire launch of browse dialog
Consistent use of browse button:
same css standards as standard HTML button for look and feel
opens browse dialog
dialog cancel - clears textbox field
dialog ok - (re)populates textbox field
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
Current:
textbox click events opens dialog
generic display of textbox and button field
browse button not working with some browsers (not firing browse dialog event, but being displayed)
As much as possible the behaviour (events/actions as above) should be consistent between all browser types.
What is the best way to make this compatible with all browsers?
It's already compatible with all browsers. Just don't try too hard to script it or overhaul the style. You have minimal customisation possibilities with the file upload field, partly for obvious security reasons and partly because the multiple-part rendering of the text+button arrangement in many browsers is simply not amenable to styling primitives that operate on single boxes.
(eg clicking on the text box in some browsers will open the input field).
Luckily people whose browsers do that will already be used to file upload fields doing that; indeed, they will expect the browser to do that, and be confused if you manage to stop it.
(And it's a sensible measure: allowing typing in the filename field is seldom useful, but it has caused security holes in the past.)
Consistent use of browse button:
Nothing about the file upload field even mandates a browse button or file-finder dialogue box. You might have eg. drap and drop instead. The browser decides this; as the site author you don't get a look in.
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
This isn't really possible within the realms of HTML. Hence the “third party uploaders”, typically Flash with HTML fallback.
There is one approach that you can sort-of use to make a file upload look like you want, but it's not very nice. You style a text field and button however you like, listen for changes to the file upload field and copy the value to the text field to display. The text field must be read-only because it won't be possible to allow the user to pick a file from there.
You then put the real file upload control on top of the fake one with CSS positioning, and give it CSS opacity (alpha filter in IE) so it's so faint you can't see it. You then have to hope that the browser decides to put a clickable part of the file upload field over the top of where you have rendered your button. Though you can fiddle and check it to work in many popular browsers, it's really very brittle and almost certainly a complete waste of time.
You will not get a consistent UI. Each browser does it's own implementation. A Safari user will expect the Safari method, same for IE and so on.
You might have some success with CSS control of the box but be aware that modern browsers have a lot of security on this field. You will have limited control of this field compared to fields
If you follow instruction here: http://www.15seconds.com/issue/010504.htm
you should be able to have consistent behaviour. Having just
As for styling - this is a task for you. Make sure your HTML and CSS are compatible (work as expected) in all browsers that you support.