Top Tips for FREE Cross-Browser Testing
Tags: beginners, codenewbie, productivity, testing
Published: 2020-12-17 06:06:32

When it comes to apps and websites that will live on the wide world of the interwebs, and across many devices and browsers, it is important for developers to consider cross-browser testing to ensure a positive experience for the majority of users. Styling compatibility, JS version issues, and the differing technology used across browser types and release versions make websites and applications behave differently as device, operating system and browser combinations change. Developers need a testing platform to sort out issues across different devices, browsers and operating systems, to ensure maximum usability and minimal errors. 

#### Enter Cross-Browser Testing

The need for cross-browser testing has been around for some time now, but finding free ways to test your applications or websites across multiple browsers seems to be more and more difficult to do for free anymore. 

*This guide provides you with top tips for free cross-browser testing.*

## Planning WHAT To Test
In a perfect world every device, operating system, and browser type and version would work flawlessly and error free. Initially, testing and bug fixing for EVERY browser may be too time consuming and resource intensive, and you may include more thorough browser support over time. 
##### When deciding what to test first, start by:
- What device/operating system/browser combinations are the most commonly used for your audience
- User behavior across these common combinations, such as page drrop offs, lack of conversions, etc.

##### Additional Reading:
[Smashing Magazine: High Impact Minimal Effort Cross Browser Testing](https://www.smashingmagazine.com/2016/02/high-impact-minimal-effort-cross-browser-testing/)


## Free Testing Methods
#### 1. Download Different Browsers and Use Built In Dev-Tools
This may seem like the most obvious solution. Why not download every browser you want to test, and see how they run! The Dev-Tools in some browsers even allow you to switch the version you are running (Internet Explorer 11), or the type of device you are using (many allow you to emulate that browser on multiple mobile device types such as an iPad or Android mobile phone). 
##### Additional Reading:
[Chrome DevTools: Emulate and Test Other Browsers](https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers)
[Google Chrome: Dev Tools - Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode)
[Firefox: Responsive Design Mode](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)
[Internet Explorer 11: Simulate Older Internet Explorer Versions](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn255001(v=vs.85))


#### 2. Using Virtual Machines and Emulators With Different Browsers
Sometimes just running a different browser instance doesn't test your project as thoroughly as needed. Running a browser such as MS Edge on a Windows device for example might behave differently than if it was run on a Mac. Many developers use Parallels, but thanks to [MS Edge Developer tools](https://developer.microsoft.com/en-us/microsoft-edge/tools/), there are free virtual machine options that allow users to run different Internet Explorer versions on different Windows versions. IES 11 on Windows 7? Yep! MS Edge on Windows 10? Got that too!
##### Additional Reading:
[MS Edge Developer Tools: Virtual Machines](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)

#### 3. Using Cloud-Hosted Interactive Cross-Browser Testing Web-Apps
Conveniently there are many interactive web-apps that provide cloud-hosted virtual machines that allow users to test their projects on a wide variety of device/operating system/browser combinations. Unfortunately there are no longer any completely free options for developers to use past a certain free trial period. There are two options that I am aware of though, that do offer unlimited free services of their cross-browser testing platform for open-source projects: [BrowserStack](https://www.browserstack.com/) and [CrossBrowserTesting](https://crossbrowsertesting.com/). Both of these cross-browser testing web-apps provide users with a VERY robust selection of devices/operating systems/browsers, and allow live and interactive testing of your open-source project. There are considerations to take before making your project open-source, but depending on the project these can be a very quick and effective solution for your testing needs.
##### Additional Reading:
[BrowserStack](https://www.browserstack.com/)
[CrossBrowserTesting](https://crossbrowsertesting.com/)
[Open Source Guide: Starting an Open Source Project](https://opensource.guide/starting-a-project/)
[CSS-Tricks: Use BrowserStack for Live Web-Based Cross Browser Testing](https://css-tricks.com/video-screencasts/106-browserstack/)

## Conclusion
Cross-browser testing is an important step to ensuring your app or website behaves across multiple combinations of devices/operating systems/browsers. Although not a completely simple task, I hope this blog post helps some of you with some free options for performing your own cross-browser testing. 

**Did I miss something?**
**What is YOUR favorite free cross-browser testing tool?**
**Let me know in the comments!**