Given that Chrome and Safari use webkit has anyone yet found anything that renders differently on Chrome than Safari? Is there any reason at the moment to test sites on both, or would testing Safari be sufficient for right now?
Part of this is knowing what is dependent on the rendering engine and what isn't. Javascript, for example, is handled differently in both browsers (google has their own custom javascript renderer), so if your page uses javascript substantially I'd test it in both.
This is probably a good place to note that Chrome has been added to BrowserShots so you don't even need to have it installed to test on it and Safari.
Google Chrome also uses an earlier version of Webkit than the current Safari, so pages should be checked in both browsers.
They are very similar, but not identical. For example, I remember reading that Apple put a lot of work in Safari to get Apple-style font rendering there, and I doubt Google duplicated that effort.
They don't ship synchronized releases of WebKit. For example,
Google Chrome
Official Build 2200
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.30 Safari/525.1
versus
Safari
3.1.2
Mozilla/5.0 (Windows; U; Windows NT 6.0; pl-PL) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.1.2 Safari/525.21
WebKit is very modular, so they have different drawing and javascript engines. Plugins are handled in significantly different manners as well.
In practice, I have not seen any site that acts differently, and the two browsers should have identical behavior, as far as any sane webpage is concerned. You could, of course, sniff the user-agent and force different behavior...
So no, there is no reason at the moment to test both. Keep in mind that Google does not have a stable release of Chrome yet.
No, and some specific UI differences include not rendering text-shadow and box-shadow the same between them. Same with border-radius. I'd avoid using these three (advanced) CSS rendering rules if you're working with Chrome.
Chrome and Safari have different font rendering on Windows. Safari includes Apple's font rendering which to a Windows user is a bit fuzzy-looking. On OS X, they both use the platform's native font rendering. So Safari looks like OS X on both systems, whereas Chrome looks like the platform it's running on.
This is in addition to other points mentioned by people who know more than I do. :)
No. This would be a similar question to "Does Chrome Render the same as Konqueror", and altho the Webkit ( HTML Renderer ) versions may be different, the Java script engines are very different between Chrome, Safari and Konqueror. This will affect a lot of Google apps since they are written using javascript heavy stuff (AJAX). This also seems to affect a lot of modern sites, especially ones with complex menu's and editors ( such as this ). In the end it depends how much of the site you are viewing is written with javascript features.
FWIW, Google's Chrome FAQ says they should render very similarly:
http://www.google.com/chrome/intl/en/webmasters-faq.html#useragent
http://www.google.com/chrome/intl/en/webmasters-faq.html#renderie
They still have different JavaScript engines, which might behave differently (propably only in some rare conditions, however).
Chrome is currently using a slightly older version of Webkit than Safari.
Over time it will be updated, of course, but there is the possibility that it will always be a little behind, depending on how Apple release their source.
In addition the Javascript engines are different, which may affect behaviour, although they're both extremely fast.
Related
I'm looking for an offline software that can speed up the testing of a website in different browsers.
Yes, I can install Opera, Firefox, Chrome, IE and Safari and test in each one, but this slow down the process because there are a lot of changes to be done in the website I am working and each change must be tested in all browsers.
More specifically, I am looking for something similar to IETester, but for different browsers. I'm not interested in online services (there are a lot), but offline.
So, someone knows something like this?
I find the Selenium tool [ http://seleniumhq.org/ ] very useful for such needs:
there are drivers for almost all modern and not-so-modern browsers: firefox, IE, Opera, Chrome, Safari..
scales quite well through the webdriver thing (remote control execution of tests on many different hosts), and
is well established: there are many resources available around to develop and deploy it.
Main drawback, as for my own experience: the learning curve is somewhat tough.
There is also a nice test management tool especially targeted at Selenium: Bromine (disclaimer: I did not yet use Bromine, but saw great comments on it).
Regards,
--
boris
Adobe BrowserLab for Desktop Browsers (Free) As noted in the comments, this has been discontinued. But they recommend Sauce labs, and Browser Stack instead.
Adobe Edge Inspect aka Shadow is also available and does all the above quite well. It is primarily for Mobile Browser testing and debugging.
Microsoft's Expression Suite also has its own Cross-Browser Testing utility, called Expression Web Super-Preview.
In Microsoft's words,
You can view browser renderings side-by-side horizontally or
vertically, or overlay them to identify differences. You can use
rulers and guides to measure and highlight visual problems. You can
zoom in and out of a page and see all the browser renderings update in
tandem.
You can try BrowseEmAll (http://www.browseemall.com) which is a desktop application for windows (and sadly windows online).
Still it contains all major browsers and simulators for iOS and Android which should make the testing easier than switching between different browsers manually.
If you like groovy, then try Spock.
I've experimented with Spock and Gem for BDD tests.
What does Sencha 2 only work in Webkit browsers? I understand they require the Webkit engine, but why do they do this, what does this webkit engine have which the engines in Firefox / IE doesnt have? A browser consists of a HTML engine, CSS engine and Javascript engine - just for curriosity, is it the Javascript engine which is special with Webkit in respect of Sencha ?
When Sencha Touch started development, iphone, android and blackberry were the main platforms. All of them use a webkit based browser as default.
There were reasons told at that time like css transistions and image masking weren't supported by other browsers. I guess things might have improved now.
Size is also an issue. To support more browsers, more workarounds are required which increase the size of the framework.
From a business perspective, there isn't really a demand for supporting any other browser. If ie10 becomes big with Windows 8, they might support it as people have already asked about it their forums.
Someones already trying to make it work on Firfox. Here is the link.
Here are some posts from the forum
Post1, Post2
I am designing my webpage and testing it in my default browsers that is IE8 and firefox 3.0.
how can i test it with lower version. Is there anything which i can use to test in all versions.
Iam having problem with height setting with different version of IE.
for example my div height is 300px; when i view it in IE8 it looks okay, in IE6 is looks okay but it shows less space in IE7. How can i adjust that.
Any suggestion.
http://www.browsershots.org will deal with whether the layout is as you expect.
If you want to test functionality, then you'll find virtual machines to be your friend.
I trust this Microsoft Expression Web SuperPreview for Windows Internet Explorer
You can use selenium for functional web application testing. It is a great tool..
Try using an application called IETester: http://www.my-debugbar.com/wiki/IETester/HomePage
It's unstable and buggy as hell but you can quickly test your page in IE6, IE7 and IE8 and even IE5.5 so it's worth having it around.
IE10 has a special section in their developer tools called 'Emulation' which lets you select the browser in which you want the page to be tested in.
If my app has been tested in Firefox 3, Safari 3 & IE 7 will it need additional testing for Chrome?
If there are areas that'll need further testing -- then are there any online guides I could share with my designers & developers?
At what point will Chrome be considered to have sufficient market share to be treated as a mainstream browser?
If it's working fine on Safari, it will probably work on Chrome as well. The only difference is the JavaScript engine, but I've yet to see a real world example of some legitim JavaScript code not working on Chrome.
Personally I test my stuff with Chrome because I use Chrome intensively for development. It is good practice to test your pages with at least one WebKit (or KHTML) based browser though.
Chrome uses the WebKit rendering engine, which is also used in Safari and some other small browsers. Overall with both Chrome and Safari gaining in market share it is definately a browser to test (you only really need to test one). It's very standards compliant and is constantly having updates to keep up with new CSS drafts.
Webkits main Site - http://webkit.org/
Browser Market Share
http://www.w3schools.com/browsers/browsers_stats.asp and http://en.wikipedia.org/wiki/Usage_share_of_web_browsers are good places to look for market share of browsers although they show very different responses on Chrome.
According to Wikipedia roughly 7.96% of poeple are using WebKit based browsers however W3C shows that in November only 5.8% did.
Theoretically, because Google Chrome uses the same engine as Safari (WebKit), you've already tested. But Google has made several changes to the engine, including rewriting the JavaScript interpreter completely. Additional testing never hurts and it wouldn't take long to confirm that everything works as expected.
Now that GMail suggests people switch from IE to Firefox and Chrome, I'm guessing we'll see IE lose more and more market share to those browsers. Chrome doesn't have much of a user-base now, but I can imagine that will change.
Better test on it. I've already run across sites that work in Safari but don't in Chrome. I have IE8b2, FF3, Safari, and Chrome all installed on my machine. Not for testing reasons, but because of the websites that I visit. Takes all 4 of those to get all the websites to show right...
if you don't have PNG24 with opacity changed from CSS, all things should be fine.
However, i always try in all modern browsers (ie6/7, ff2/3, opera 9.x, safari and chrome).
According to Wikipedia, Chrome has a 0.78% usage rate right now. Depending on your audience the actual number of users might be low, and not really require testing.
Chrome uses the WebKit engine, which as I recall is the same engine used by Safari. So in theory, if your site works for Safari it should work for Chrome, as well.
Refer to this Google's Chrome page for details.
Chrome already got a small percentage of the community. However as far as I know, Chrome follows the standards from W3C and all websites that work in IE6, IE7 and FF2 / 3 has worked perfectly for me.
So by that said, i think you should already be testing your applications in chrome as well.
Always test in these browsers nowdays:
Internet Explorer 6, 7, 8
Firefox 2, 3
Chrome
Opera
Safari
Lynx
Tools like Selenium are good for testing user interactions on the web UI. However, I was curious what are people approaches for strictly testing and verifying that web pages are rendered correctly across a set of browsers?
Is this even possible?
May I recommend browsershots where you can submit pages and have them rendered out in a variety of browsers with various things set on or off such as Flash and JavaScript. At the end of the day you will still want to install FF, IE6-8, Opera and Safari/Chrome for testing manually. Also, if you've got a friend with a Mac (or a PC if you're using a Mac) get them to test in Safari too as I've personally found differences in the way both of them render the same page.
I'd also recommend that you develop mainly in Firefox and regularly check it in IE6 as you work. IE6 is the one that will mostly screw up so if it's working in both it's more likely to be working in all.
When you find rendering weirdness try and fix it in your markup and CSS first before resorting to CSS hacks as they can lead to 'interesting' problems later or in other browsers.
There is only a handful of browsers you need to test, as some share a common rendering engine (Gecko or Webkit). Without explaining which or why, here's the current wisdom (2009):
Build your site using Firefox or Opera (on any platform). BTW Opera uses its own Presto engine;
Test in whichever of the above you didn't use.
Validate the (X)HTML and CSS (important!).
Test it in >=IE7 and note the glitches, if any.
Use conditional comments in separate stylesheets for each version IE - never use CSS hacks as they'll go out of date.
Test in IE <7 if you like and do the same, or use conditional comments to ask users (politely) to upgrade their version of IE.
Test in Safari (Webkit).
Don't test in Chrome, you already have by proxy (Webkit)!
Don't test in IE for Mac - the share is too low and it's no longer updated.
Finally, try enlarging the text in Firefox, Opera, IE and Safari. Opera also has a hand-held emulation mode for mobiles.
You will have now covered (theatrical guess) 99.9% of browser setups. If you're on OS X or Linux, you can run Windows in a virtual environment like Parallels or Wine. Apparently Wine also has a Windows binary, but I couldn't find it. Caution: you'll need to be sure that your virtual environment allows IE to read conditonal comments.
In practice, I find that if a site has valid code and works in Firefox, Safari and Opera, it'll probably be okay in IE7 up. The only HTML/CSS gotcha is IE's 'haslayout' handling. If you don't have the browsers, BrowserStack is an excellent online testing service.
Finally, if you're using Javascript, you'll need to go through a similar process, problem being that as a rapidly developing area, newer versions of some browsers handle Javascript in increasingly effective ways, so functions in older versions might break or fail quietly.
If you just want to see if layout is correct, just submit your website to BrowserShots.org and visit later to see the screenshots.
If you want to test the functionality (JavaScript, etc.) then you'll need to test manually.
Manually?
I do not see an alternative if you want strict testing. Just install as many different browsers as possible and test in all of them. Of course this includes different versions of most popular browsers, and you need to check on Windows, Linux and Macintosh.
Previously I was use WM for different versions of IE, but I find out some new tool for testing layout, and UI as well with this tool, link for FF use fire bug extension, those tools are for manually testing.