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
Related
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.
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
All though we have multiple sites (like spoon) to get us help with browser testing, how about using Sikuli for cross / multiple browser testing? Has any one tried it and can share whether it works or not?
Many times we need to test the same functionality in different browsers. For an example you test whether text boxes for username and password on Login Page appear exactly same in FF and Chrome as they appear on IE. Similarly you verify some label, table or other web page components across multiple browsers.
Can we use Sikuli to do this, for an example:
Open IE & send F11 for Full Screen View *
Navigate to Login Page
Take a Screenshot and save
Now, open FF and do same steps 1 to 3
Next
Compare two images saved previously and generate results (Sikuli generate quite a good result of image comparison).
*Full screen view to make sure we compare apple with apple i.e. whole screen with whole screen of other browser.
Off course, nothing can replace human eye in browser or GUI testing, but doing above can definitively save good amount of time we spend in browser testing. At least, less-important functionality or screen can be verified by Sikuli and rest of them can still be done manually as done right now.
Parva,
At the company I work for we have implemented Sikuli into our test suite and it works GREAT! across all browsers. I'm not sure if you're using an IDE for your test framework, but here we use SpringSource ToolSuite because our project lives within it already.
We implemented Sikuli to hit the different browsers we wanted it to by creating a properties file within our resource bundle. This properties file had the information for the base.url, base.login, and browser.options. When we write our test scripts using Selenium 2 we are sure to clarify which url, login, and browser(s) we want the test suites to run against.
Hope this helps!
As long as you always run yout tests in the same condition the test screenshots were taken, yes, it's ok. There is another way of taking smaller screenshots of elements on your page and checking that they appear.
Why don't you use Selenium if you have web content to check? I'm sure you will have more flexibility to verify different actions. Or Selenium combined with Sikuli to have even more power...
Sikuli would be a better platform for GUI related stuffs other than browser ie for any applications in desktop, but regarding browsers selenium would be the best tool rather than sikuli.
I'm developer of Construct 2, a HTML5 game editor for Windows. It's at http://www.scirra.com.
Recently I've been trying to add a feature that will modify an image by transforming it on a canvas. It's pretty straightforward - draw an Image to the canvas and call getImageData() to get the pixels.
When the user clicks 'preview' in our application, all the files are dumped to a temp file on disk and a browser launched to show it. Uploading to a server is not an option for previewing - some games are megabytes big.
However most browsers block you using getImageData() to get the pixels of any image loaded from disk at all. I've tried putting all the necessary image files in subdirectories as MDN suggests in its description of file:// access policies. That doesn't work either!
Chrome's --allow-file-access-from-files flag fixes it. However, I need to support all major browsers. Is there a similar workaround for at least Internet Explorer and Firefox? I have no idea about Internet Explorer, and I really wish there's something which doesn't involve manually going to about:config in Firefox, otherwise we will be deluged in support requests asking "why doesn't it work in Firefox?!".
Also, why on earth is this security policy necessary?!? It seems way over the top and makes applications like ours really difficult to write.
Any help appreciated.
Your name sounds familiar from HN.
This is pretty laid out in stone in the spec by now, though this upsets an awful lot of people. http:// and file:// are different origins, and anything that tries to put one on the other will dirty the origin. As you noted file uri's themselves have their own set of rules that make things even trickier.
Drawing something to a canvas whose origin is not the same? Too bad, the origin-clean flag henceforth is false, which then disallows you from doing various things.
A complete list of those things is located in the spec here.
But I'm sure you know all this by now. You want to get around it.
I'd suggest ins instead of trying to strong-arm the browsers around it, you bundle in some kind of lightweight web service so that things are all appearing from the same origin. It will cause a lot fewer headaches in the future.
You'll probably want something like the Python SimpleHTTPServer. But that decision really depends on what you've already got included in your product already at this point.
I would like to know if it is possible to modify Chrome or Firefox display settings, so that it would only show rectangles of HTML DOM objects? What I want to do is to decrease rendering engine job amount as much as possible, so it would only build layout of the page.
People usually refer to this mode of operation as "headless" (i.e. without UI).
Usually there's an additional requirement - to be able to run it server-side without the usual for client software installed. If you're running it client-side, I wouldn't bother about optimization, it shouldn't give you a big win anyway.
Otherwise, try searching using that term. I've seen it asked for several times, but haven't seen a working out-of-box solution.
[edit] just saw http://hg.mozilla.org/incubator/offscreen, which seems to be a headless version of Mozilla.
I wouldn't go as low-level as modifying the renderer. Instead, I suggest you use Firefox's Greasemonkey to replace the elements from the page with whatever it is you need. You'll need to know a bit of JavaScript, but it's not that hard.
However, this will only work on client side. If you want to do this on server-side ( so that it will work on any page a user requests through your own ), my guess is you'll need to grab the page's content in a string, and then modify it using a HTML parser.