Recently made the jump to making real websites for clients and I’m curious about cross browser compatibility and how I can ensure that the sites look good on all browsers.
What’s the standard for going about doing cross browser testing? Are their common hacks/issues with IE and how would I test for that?
I am currently using Chrome and Firefox’s responsive dev tools in the browser to see how the site looks on various screen sizes.
Test on IE and Edge as well. IE11 gets security updates until Windows 10 stops being supported, but MS would prefer Edge was used and the UI pushes users to Edge rather than IE, so it’s up to you to decide whether you need to support it or not. Some knowledge of what users of the site are viewing the site on is useful, going forwards, Google Analytics can be used to find this out.
Chrome’s mobile emulator is good, and can often suffice. It’s useful to be able to test on Phones as well if you want to be sure. Chrome lets you plug in a phone/tablet and debug Android. For IOS ideally you want access to a Mac so you can use Safari to debug, but simply viewing the site on an iPhone/iPad and testing it that way is often enough. If your serious, pick up a cheap old phone (Android if you own an iPhone, or vice versa), upgrade the OS, and use it for testing.
Automatically adding vendor prefixes for CSS, and automatically compiling JS to a form that’s supported in older browsers can be an important step - for CSS, Autoprefixer is the tool used (this will, for example, make sure flexbox properties are correct for IE). For JS, Babel with the babel-preset-env plugin does the same thing. They both let you provide a file that specifies which browsers you want to support, and automatically rewrite your code to provide coverage.
IE and mobile Safari are where most bugs appear: there are a lot, and they’re often quite subtle, and there isn’t really a canonical list. Best bet is to make it work in Chrome and FF, then fix the bugs on a case by case basis - Stack Overflow is your friend here, someone will already have encountered the bug and will have asked how to fix it.
There are a few online services that let you test across multiple browsers; they normally have a free trial period, so you can often sign up, then cancel once the trial is up and then sign up again under another email. That can take quite a lot of the pain out of setting up testing.
Putting a set of browsers on a VM works quite well- for example, if you develop on a Mac, you won’t be able to use IE; MS provide images of Windows to install for testing purposes that you can put on a VM for this purpose: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Chrome’s dev tools are excellent but they have misled me in a few situations - it is definitely possible that things will look different on the emulator than the real device. The best resource that I have come across for easy testing is BrowserStack. Its also great to have a dev server that you can access with your phone to see how touch actions will work.
There are tools to help you out on that by providing an infrastructure of all devices, machines, and operating systems.
When it comes to IE, it is a problematic browser, so take care of various elements that you are using. Their support in IE browser and other browsers as well. You can find a curated list of all support elements from caniuse.com.
Also, test for functionality, API support, Font support, features, formats, across all browsers and devices. You need to test responsiveness too, so you can use www.lambdatest.com as one tool for testing everything: responsiveness, functionality, and browser support.
Hope this might help you.
I’ve been enjoying testing on ‘Screenify’ recently. Helful for lots of device emulators.
Yes, that’s great OMahonyD. I checked the tool out. It is great if you have very limited need for devices that needs to be tested. But if you need a wide pool of browsers, devices, and OS to be tested upon, lambdatest is a great fit.
It depends upon your requirements totally!
makes mental note to check out lambdaTest
lambdatest looks nice but unfortunately, the real-time test was super laggy for me, they are probably throttling free users quite hard. Also, I can’t seem to switch browsers on the phones.
Here are a two more (not free), I have only tried browserstack.