
Welcome back to the second part of our manual cross-browser testing tutorial for beginners! In the last part of this series, we talked about what cross-browser tests are, why you need to conduct them, and what different types of tests we know. If you haven’t read the first part yet, we encourage you to do so now.
Today, we’re going to delve deeper into the How of cross-browser testing, and also take a look at some prerequisites and tools that help you test more efficiently. So, without further ado, let’s get started!
How to choose browsers for testing
In our previous blog post, we learned that cross-browser testing can help ensure that your web application looks and works perfectly on different browsers, browser versions, and devices. But let’s take a second to think about all the different combinations you could theoretically test. It’s hardly possible to test on every browser and device out there! Hence, you should spend some time figuring out which combinations to check.
First, you need some usage data to find out which browsers and browser versions are the most popular used in the market as well as the ones visiting your website.
You usually have two options here:
- Analyze publicly available data on websites like this one
- Analyze existing usage data of your web app (e.g., from Google Analytics)
Don’t forget to include mobile devices and their browsers in your research!
Use the data found to create a browser matrix that everyone on your team can understand and use when cross-browser testing. For this, create an Excel or Numbers spreadsheet that contains at least the following information:
- Browser name
- Browser version
- OS
- Device
- Support (yes, no, or partially)
Depending on how many browsers you’ve listed for testing, you may need to prioritize them. Especially if you’re testing manually, you probably won’t be able to check every browser and device on your list when time is running out. Therefore, you should prioritize the entries in your browser matrix according to popularity, so that you can ensure that the majority of your users can enjoy a thoroughly tested web app.
Set up your ideal test infrastructure
After defining your browser matrix, you need to find a way to access all of these different browsers and devices. Here, you also have various options to choose from:
In-house device and browser lab
Your company may already have an internal lab that offers everything you need. If you are considering building a lab on-premises, first make sure that enough resources are available to purchase and maintain the necessary components of your infrastructure.
Emulators and simulators
To check your web app in mobile browsers, you can install and run emulators and simulators on your machine. These tools mimic real devices and are a great choice if you want to review your app during development. However, they are not the “real deal” and can’t completely replace testing on real devices. If you want to learn more about the pros and cons, read this blog post from our friends at Bitbar.
Virtual machines
You can install a virtual machine (VM for short) on your computer and use different images to run foreign operating systems. So, for example, if you are a Mac user and need to test your web app on Microsoft Edge, you can run Windows 10 in a Virtual Machine. Yet, VMs take up a lot of disk space – the more OS versions you need to run, the more images and space you need. Also, your computer may struggle with running another OS, which can cause severe lag, among other things. Therefore, this option may not be suitable for you.
Online services
The most promising option for most testers is to use an online-based test service that provides all the browsers, browser versions, and devices you need to test. Typically, these services are subscription-based but can save you a lot of resources and headaches since you don’t have to purchase and maintain the infrastructure and tools yourself.
How to conduct manual cross-browser tests
After you’ve set up a suitable infrastructure to access all of the combinations required for testing, it is time to think about the actual testing process. Let’s find out what usually works quite well:
Set a baseline for comparison
First of all, you should test your app in a modern, reliable and popular browser like the latest stable version of Google Chrome. This way, you can find and fix some of the more apparent bugs and get a clear idea of how the app should look and work. If you then test in other browsers, you can compare and evaluate the results using this baseline.
Create a cross-browser test strategy
You need a document that contains guidelines for cross-browser testing that everyone should work with. If you don’t have such a plan on hand, you may forget to test critical functions or follow different practices than your colleagues. As a result, you may invest a lot of time in tests that lead to unsatisfactory results.
In this test strategy document, describe what should be tested, how often it must be tested, and what should not be tested. Use your product’s test specification or create one if necessary. Additionally, you should include your browser matrix and add some information about the infrastructure used. Read our blog post “Real Device and Browser Testing Strategy for 2020” to learn more about what to include here.
Execution
After completing all of the above steps, you can finally get the show on the road and execute your tests manually according to your test strategy!
Tools that make manual cross-browser tests more efficient
Since manual testing can lead to bottlenecks that hinder the timely release of your web applications, we at CrossBrowserTesting have developed some tools that help you to test more efficiently:
Live testing
The Live Testing tool lets you perform interactive manual and exploratory tests on more than 2050 desktop and mobile browsers. You get access to browser extensions and inspection tools that you can use to debug your CSS, HTML, and JavaScript code.
Visual Testing
Don’t forget to check what your application looks like in addition to how it works – especially when it comes to your responsive website design. With our Visual testing tool, you can take full-page, chromeless, or above-the-fold screenshots of your web app’s layout on different devices at the same time. We also offer you an API that you can use to schedule screenshots.
Record and Replay
Would you like to get test automation into your test mix without having to write a single line of code? Then our Record and Replay tool is the perfect choice to eliminate the pain of manually executing repetitive test cases. Record your test flow and replay it in parallel on all desired browsers to shorten test execution time while increasing browser coverage.
Conclusion
In the second and last part about manual cross-browser testing for beginners, we gave you an idea of how to run cross-browser tests, what you need to do in advance, and which tools can make testing more efficient.
We hope that we’ve been able to provide you with some useful and valuable knowledge that will help you get a flying start with manual cross-browser testing!