Manual Cross-browser Testing for Beginners Part 1: Concepts and Types

You have probably noticed that automated testing receives a lot of love and hype right now. That’s because they can accelerate test execution times and make room for other, more pressing tasks. However, manual testing is still very much relevant as we cannot automate everything (not yet at least). For this reason, we want to take a closer look at the craft with a two-part series about manual cross-browser testing for beginners. In this first blog post, we’ll talk about what manual testing is, why and when you need it, and what types of cross-browser testing need to be done manually.

What is cross-browser testing?

When you develop a website or web app, you most likely use one or two browsers for development, such as Chrome and Firefox. Maybe you resize the browser window to see if the component you are creating adapts correctly to different screen sizes.

However, do all of your users browse the web with your development browsers? And do they solely use their laptop or PC to do so? As you probably know too well, the answer is no. There are many different browsers and versions out there, and your users often use their tablets or mobile devices to visit your website. In fact, the use of mobile internet has increased by 504% since 2011!

By conducting cross-browser tests, you can ensure your web app works and looks splendid on many different browsers, browser versions, and devices. The goal is to offer as many users as possible a consistent and positive experience with your online product. 

Who performs these tests?

The answer to this question can vary from company to company since everyone has set up their own workflows with the available staff and resources. But let’s see who is most likely to run cross-browser tests:

• Web Developers – Naturally, the people who implement the app under test are often best suited for the job. They already know what to look for, how to report and deal with errors, and are also capable of resolving any issues they encounter.
• Quality Assurance teams (short QA) – Especially big companies have set up a QA department that helps make sure products meet specific criterias and quality standards. Usually, the staff is trained to conduct tests and report bugs back to the developers.
• Web/UI/UX Designers – The designer of your web app should always ensure that the result matches their crafted design. However, since they check the overall look and feel of the web app, they don’t need to test on every browser and device and often limit their testing efforts on one of each.

Note: In general, anyone can help test your app. This often depends on the type of test you want to conduct. For example, if you need to verify your app’s intuitiveness, you can invite a group of external people to represent your target audience and watch them use your app.

Why should you test your website or web app?

In recent years, websites have become more and more complex. In fact, we mostly refer to them as web apps these days – a term which people hardly used ten years ago. Software that users previously had to install on their computers has been transformed into online services, and the web is no longer just a provider of information.

Imagine visiting your favorite blog and seeing that components such as the primary navigation don’t work in your browser. You may be a little annoyed, but things could be worse. However, if you need to fill out an essential form on your government’s web portal, and the same bug occurs, things aren’t looking so rosy anymore. For better or worse, web apps are an integral part of our daily lives we depend on.

Your web app users also expect your product to work flawlessly anytime, anywhere. That’s why you need to conduct thorough cross-browser tests! If you can’t provide users with a working app, they may be looking for an alternative. In the worst case, your company loses customers (and ultimately money).

When and what should you test manually?

Basically, we know two different ways to carry out cross-browser tests: manually and automatically. Since we’re covering manual testing in this blog series, we’re not going to talk too much about test automation, but include the basics to give you an idea of ​​the differences.

Manual cross-browser testing

Here, a tester interacts personally with the web app on all browsers and devices. For this, they can follow a pre-written list of things to test and report any errors they encounter to a system or developer (depending on the company’s workflows).

Automatic cross-browser testing

Testers write test scripts and run them automatically on all required browsers and devices by using automation tools such as Selenium WebDriver. We recently published a blog post about when and what to test automatically, which you can read here.

Naturally, manual testing takes a lot of time – especially if your app is quite complex and must be checked in many different browser versions. Test automation helps reduce the needed time and allows you to focus more on analysis, troubleshooting, and other more pressing matters.

However, manual tests are still required! Some tests are too complicated or computationally intensive for automation, but testers can efficiently perform them manually. Most security components like Captchas cannot be tested automatically either, because it would make no sense if someone could bypass these security mechanisms through automation.

Besides, test automation is overkill for some projects. If you are working on a small and relatively simple website, writing test scripts can take more time than running the test manually. And if your company doesn’t have qualified staff to write these tests, you may also need to opt for manual testing until the situation changes.

What types of manual cross-browser tests are there?

Let’s complete this first blog post on manual cross-browser testing by taking a quick look at the types of tests that you can conduct manually.

Exploratory testing

This type of test is always done manually, as a human must freely discover the app to find UX vulnerabilities and bugs. Even if you could achieve 100% test automation, you would still miss errors that only occur under certain unpredictable circumstances. With exploratory testing, you can find out how users interact with your app and how it responds in different situations. Yet, since you don’t have a checklist to guide you through testing, it can be challenging to know where to start or what to look for. That’s why we have created a playbook to help you discover some of the types of personas you should test for.

Visual Testing

Visual tests ensure that your app looks and feels good in different browsers, browser versions, and devices. Of course, you need to check if your CSS animations and JavaScript-driven components work appropriately under different circumstances. Additionally, designers and QA teams can ensure that the web app meets the expected quality and that the implementation matches the design.

Functional Testing

Looks aren’t everything, and the most stunning web app is worthless if UI components don’t respond as expected. As the name suggests, functional tests help you make sure that users can actually use your app. For example, you can test whether your contact form checks the email field correctly and whether the user can submit forms if the required fields are empty.

Note: While you can’t automate exploratory tests, teams can save time by automating repetitive test cases and tests that can expect a specific result.

Conclusion

In this first part about manual cross-browser testing for beginners, we made sure to provide you with the basic knowledge of the craft. Now you should know about the different types of tests and who will perform them and when. We hope to see you again in the second part of this blog series, where we will talk about how to perform manual tests and what tools you can use to make the process more efficient.