I am not able to run the script using WebDriver across different Browsers.For IE its working fine.
Firstly I automated an application for IE.then I tried to run the same script in Chrome or FireFox.
Now on Chrome and FireFox some of the elements are not getting recognized by the WebDriver.
1. How can this be resoled?
2. Is there any solution for this so that I can run the same script on different browsers irrespective of the Browsers?
Please suggest.
Without seeing the page it would be hard to tell, it depends on your situation, normally there is one selector that will work across your browsers but its technically possible for your development team to be using completely different element names ids etc etc depending on browser (or even completely different pages), it would be crazy for them to be doing it on purpose but it is possible so you will find people may be unable to help without more information.
Typically css selectors are the most robust selector across browsers while xpath is the most flakey. post some code both of your test and pages and can probably help further
Sometimes, the locator you are using will work in one browser , but not in other browsers. Try using different locators such that it gets executed in all the three browsers.
Related
I have a small issue with IE. I'm working on a site nothing fancy just some static html pages (around 35), I am using bootstrap as a skeleton, font-awesome, Animate.css,responsive styles, Jvectormaps, footables, custom styling ect... I usually write and include separate css files to keep things easy to maintain, everything's working well until I decided to merge all files in a single one because I need to test if my pages load faster.After doing so IE seems not processing the whole stylesheet file because when I go the developers tool then check my merged CSS file I can see it is like cut in half. This is weird , I am sure not sure why IE is leaving out all the rest.
SO i split the main file into two separate ones, now everything is back to normal
In Chrome / Firefox I do not face this issue so I am certain it has something to do with IE(9/8). Does anyone know Why? if it is realted to file size? (450Kb) Is there a way to include all file in one or I should keep separate ones?
Thanks,
You might be hitting the limits on how many elements IE 9 and down can display. Use a site like the one below to see if you are below the count limit:
http://snippet.bevey.com/css/selectorCount.php
If you are using Grunt in your project, there are tasks that can split your css up automatically to fix this issue.
You may be encountering some of the CSS limits that are related to IE. Microsoft has changed/increased/removed these limits in more recent versions, but you may still encounter these limits.
There are many possibilities such as which IE version is being used, and what document compatibility mode is specified.
If your pages have an older document compatibility mode specified, you will encounter some of the lower limits that limited older versions of IE.
See: http://msdn.microsoft.com/en-us/library/ie/hh781508.aspx for more details.
Recently in my company we had cross browser testing on very big application. We have prepared selenium webdriver script for functional regression testing, however, there is not more scope covered for cross browser testing and that made us to test whole application in all browser (IE 9,10, 11, FF, Chrome, Safari). We have perform this testing as we also include GUI testing like image, button etc., Now, the question is, is there any way we can automate this?
My idea was to get all the element of page and get the location of all elements and save it in xml file, for example let assume that we wrote script for google.com and we got all the list of element with there location (x,y) for IE 9 browser, now run same script with rest all the browser and save the element location and than compare each element location with different browsers out, this how we can get the details information about element location in different browser, we can also use size, isdisplay, isenabled method to verify element. Using location method we can find which element does not exist or not located on correct place...
This are my thought, can I get any input from you?
Thanks!
Your thoughts are mostly correct, except the fact that you cannot compare exact locations of elements in browsers (they will usually differ) but you can compare how the elements are related to each other (e.g. element x should be on the right side of element y, etc.).
I know of two commercial solutions that offer functionality similar to what you described: Mogotest and CrossBrowserTesting. They both offer free trials, so have a look at them. Browsera claims to have such functionality too, but I've never used it so I cannot comment on it.
If you prefer to implement such system by your own then there are two sources you may find helpful:
Web Consistency Testing
WebDiff: Automated Identification of Cross-browser Issues in Web Applications
There is quite high level of false positive issues with this approach. There are multiple cases where you'd see a given button reported to be 3 times larger on some browser while it's not. Apart from this it's a good one since it would also tell you the difference
I have developed working D3 driven charts and as far as all the other browsers go, there are no problems.
but recently the need to support them also in Internet Explorer 8 cropped up.
But so far i can't make this html display in IE8.
these are the tags used in D3:
<svg> <path> <g> <line> <circle> <rect>
for the last 6 hours i have skimmed through a lot of materials and questions including:
"Display inline SVG in IE8" which has this answer from October 2012:
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
Also:
D3 IE8 Compatibility?
wikipedia.org/wiki/Scalable_Vector_Graphics
SVG Web Compatibility
But the solutions using client-side plugins are not acceptable and so far it looks that i can't display svg in IE8.
So the solution is to find some other ways to render vector graphs.
I presume that others have had the same problems
Edit:
either way, people that will encounter this same problem after me will at least have somewhat concentrated materials and will realize that there is no easy/real solution to display svg on IE8 and better to spend time starting on the existing code rewriting/adjusting for non-svg version
Edit:
after some testing i would say that its worth trying to go through R2D3 examples and see if its possible to simplify/execute the code in IE8
Samples
Edit:
During the process of testing different elements separately some r2d3 problems seem to arise
most common would be Invalid argument and Object doesn't support this property or method
as i am not used to develop for IE8 there were some useful tips that i found:
dump javascript vars
and
display objects
Not sure if you are still looking for an answer, but I ran into this issue on a project a few years back. We ended up switching over to HighCharts for the browser compatibility. At the time it was still in its infancy as a charting library, since then it's become much more powerful and still maintains browser support back to IE6.
Unfortunately for most people now supporting IE8 its down to client restrictions rather than consumers.
Without informing those that have requested it of the restraints, backwards compatibility and cost implications along with valued links from this post, the solutions for making canvas work in IE7/8 and using the JScharts variants is your best option.
Of course, it means not using D3 unless you want to double your work load = cost. Just remember to mention that every time.
Good luck
IE8 (as far as I can see) simply doesn't support SVG. The only solution I can see working is using a different graph library which uses a canvas to draw it's components. Think of libraries like CanvasJS, ChartsJS, GoJS or VisJS Network Graphs and then using excanvas to make them work for IE8.
Another solution I found when researching this topic is using Chrome Frame. It makes IE8 support SVG. Though, sadly, Chrome Frame is retired and no longer supported anymore.
Knowing all this you have to ask yourself: "Is it worth going through all of this for the less than 0,1% of people who still use IE8 and below?".
Because, if you want complete d3 compatibility you probably would have to write your own converter from svg to canvas and even then, you still have to hope that excanvas supports all the canvas functions you write.
Edit: Changed browser percentage to current IE8 usage
I have created a simple web app. When I deployed the application to Dev and QA servers everything works absolutely fine. When I deploy the same code base to Staging servers, I find many CSS styles not applied properly. several Div tags dislocated and scattered at other places. More interestingly this is only happening with IE browsers. (I am using IE9). Application has been hosted in IIS servers. Does anyone face similar issue like this? Let me know if I need to provide some more details?
One more observation after I did a comparison using Dev tools. Staging server doesn't have some missing attributes in the CSS class. How come this possible?
I recommend checking if your divs that aren't displaying properly have the same rule applied to them multiple times. One rule will be over-riding the other.
Open an inspector, and look for duplicated rules. In general, the rules will be applied in the order that they are loaded, which may not match in your different environments.
Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.
My questions to you are:
What are the important rules you use before hand, when developing across multiple browsers to save you time?
How do you prevent yourself from writing incompatible tags?
What is the best way to avoid hacking your code?
Where do you find research on browser compatibility, do you use any tools?
Finally, when do you cross the line/where do you draw it?
I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.
Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.
Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.
LitmusApp
There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.
I would say to start with standards-compliant code. Always test in a standards-compliant browser first like Firefox, or Safari/Chrome. I prefer Firefox for the addons (such as Firebug, HTTPFox and the Web Development Bar). Then work your way DOWN (and by down, I mean all versions of Internet Explorer).
Try to stay away from temporary fixes per situation or site and generalize your code as much as possible. For example, as Justin Neesner said in his answer, using conditional comments and a general style sheet for IE6 , 7, and 8 will knock out most of your problems with layout and formatting, without using (too many) hacks. You can reuse the IE stylesheets, and just place the site-specific code in it.
Use a testing platform like browsershots, netrenderder or LitmusApp so you can see what your site is doing in as many versions of browsers out there. Studying browser compatibility deeply will make you pull your hair out, but any great resource like quirksmode.org can give you information on the little gnats of incompatibility, so you don't go crazy, and bald.
As far as when do I cross/draw the line, it's 99% Internet Explorer issues, and if it's close enough to looking like FF or Chrome/Safari, I'm done. Almost like art, it's not when you're finished adding, it's when you're done removing the crap you don't want to see; that's when you know it's done.
I say there is not that much you can do except sticking to the basics:
Code standards compliant HTML
Validate early, validate often
For Javascript, use a framework like JQuery, Prototype or Dojo
Pick one "main browser" you optimize for first.
in every project, there will be a number of issues, but if you stick to these points, not too many.
I find it extremely helpful to build 100% W3C valid code. Not because it matters - much of what the W3C validator complains about will not make any difference in real world browsers - but because being able to run a validation, and getting a green light and knowing that all is well on that end is very helpful.
To test multiple IE instances at once, you can use IETester. It's not perfect - conditional comments won't work in it for example - , but mostly usable in everyday development work.
use a doctype like html 4.1 transititional which makes ie6 render in standardsmode. You can also use a reset stylesheet.
Use strictly compliant HTML and CSS markup and do not use browser proprietary extensions to CSS.
IE 6 does not implement CSS correctly beginning with its absolute ignorance of the box model.
IE 8 on the other hand has a test suite to prove they implement every aspect of CSS 2.1 correctly (which no other browser does).
Develop for Firefox as stated above and make a decision about supporting IE 6 & 7 or not. Frankly, I no longer develop separate style sheets for those browsers. They don't have enough market share (at least on my site.)
Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)
all elements and attribute names must appear in lower case,
all attribute values must be quoted,
non-Empty Elements require a closing tag,
no attribute minimization is allowed,
In Strict mode, all inline elements must be contained in a block element.
Why to learn HTML 4.01 Strict with references.
Also see the CSS 2.1 Test Suite
So I have been running around for a while now, 26 days later I think I am ready to give some feedback to my findings.
Coding:
First of all, I found that column systems seem to cut down the amount of HTML and CSS written. They are also very cross-browser friendly. Although there are many of them, I found that the 960 Grid System works the best for me: http://960.gs
Next up I found that Ruby has a cool extension for CSS called, LESS. This has been ported over to .NET and can be found at: http://www.dotlesscss.com. It is easy to setup, and is very powerful when used right.
Javascript, can be tricky but I found out that avoiding certain selectors and shortcuts in languages like JQuery will not only speed up the performance of your application, but exhibit less awkward behavior.
Testing the browsers:
Here comes the interesting part. Without any software I found that testing my applications against Internet Explorer 6 and Safari at the same actually helped increase the speed of my development. Firebug and Firefox actually cause me to develop around the problems and this is what causes a lot of extra code. When developing simple code against IE6 and Safari I found that going back to Firefox and IE8 is incredibly easier. Most problems I have had were with border widths, which were easy fixes.
The best software solution I found that was accessible to me was Expression Web with Superpreview, if you ever wonder why Microsoft releases a bunch of version of IE, its probably so they can sell you tools like these.
Anyway, that's my 2 cents for right now.