Most companies you know have a website. Many of these websites act as either an e-commerce website trying to sell items from the company's inventory, or are set up to market the product or service the company is selling.
Creating, hosting and maintaining these websites cost money. Companies want to make sure their website looks and behaves correctly on all different platforms and configurations.
Organizations selling items from their website will want to make sure that their shopping cart, purchase or checkout flow and payment flow work correctly for all its users, no matter on which platform they are.
Visitors to a website may consume the website from a specific location, using a specific platform, with a specific browser, running a specific browser version on a specific screen resolution.
It is important to make sure that your website works, for all variations of these 5 variables.
That is why a service such as TestingBot is useful to company owners, developers creating or improving the website of the company and QA teams testing the company’s website. We've got you covered on all these fronts:
- Test from a specific geographic location.
- Test from a specific OS (Windows, Linux, macOS) or Mobile OS (Android, iOS)
- Choose a browser vendor (Chrome, Firefox, IE, Edge, Safari, Opera)
- Pick a version of the browser. Usually, you will pick the latest version as most people using a browser will auto-update to the latest version. The so-called evergreen browsers such as Firefox, Chrome and Edge provide this feature.
- Test with different screen resolutions, also known as responsive testing
- Test manually or automatically, both are possible with TestingBot
Manual Browser Testing
The quickest way to start testing is by going through your website manually. You will fire up a specific browser on an OS and start using your website like any visitor would use it.
You will then proceed to test its design and functionality. Either you have a website QA checklist, or you just go through the website randomly and try out different features.
The most popular errors you may encounter when testing a website include:
Javascript Errors
When a Javascript error occurs, some component or functionality on your website might be broken. For example, an 'add-to-cart' button which performs client side validation with Javascript should never break, as that would result in potential revenue loss.
Javascript errors are usually caused by one of these issues:
- A bug inside the Javascript code
- A piece of Javascript code is incompatible with the current version of the browser, on the specific OS.
- Browser sniffing which was wrongly implemented
- Usage of an outdated browser version
- Incorrect feature detection with Javascript
A bug inside the Javascript code
A Javascript code bug might happen due to a mistake by the developer, a deployment that went wrong, file corruption of the Javascript file (either via CDN or hosting) or have some other reason.
This usually means that the Javascript code will be broken on all platforms, browsers and browser versions.
For example, you might be using Javascript to provide a custom dropdown feature on your website. If there is a bug inside the Javascript code of that component, the drop down might not appear, leaving the user of your website with a broken state.
Javascript incompatibilities
Javascript incompatibilities might happen when the developers who created (or maintain) the website try to use modern JavaScript features that are not supported on older browsers or browser versions.
A few examples of newer Javascript features which are unsupported on older browsers:
Browser Sniffing wrongly implemented
Developers may have implemented browser sniffing, which enables or disables certain features on the website according to the device that is being used.
This usually involves code such as navigator.userAgent to check if the user is using a specific device, by looking at the userAgent header.
Depending on the browser version, certain features might be enabled or disabled, depending on the compatibility of the browser version with the Javascript code.
Outdated browser version
Some users may be using an old version of a browser. Usually websites will display a banner informing the user that the website might not work correctly on this outdated browser version.
You can use TestingBot to test if this banner is showing up correctly for these older browser versions.
Feature detection
Your website might be using feature detection to see if certain features are available in the current user's browser.
Some features are not available for certain browser versions, for example:
- Flexbox
- WebRTC
- WebP image format
- CSS grid
You can find out which features are supported on which browser by using CanIUse.
Design/Layout Issues
Here is a list of the most popular design issues that may appear for any given website:
- Responsive Design issues
- Vendor specific prefixes in CSS
- Missing CSS resets
- Text overflow issues with different locales
Responsive Design issues
The most popular design issues are related to responsive designs. Many websites use responsive design to tailor their UI and UX to the screen size of the user, increasing the usability of the website on multiple devices with various viewports.
In case of a mobile device, layout issues may occur if responsive design was not implemented correctly for all possible screen sizes.
Examples include buttons that are too small, too big or positioned in a way that they cannot be clicked. Navigation menus with multi-layered drop-down menus might look broken on devices with limited screen size.
Usually, you can fix these issues by using media queries to change the CSS code depending on the screen dimensions.
For example, see the code below where a flex layout uses a different flex-direction and max-width for a list, depending on the screen size.
.page-menu {
display: flex;
margin: 0 auto;
max-width: 80%;
}
@media all and (max-width: 767px) {
.page-menu {
flex-direction: column;
max-width: 100%;
}
}
It is important to perform responsive testing. You can do this in your own browser, for example with Chrome's built-in developer tools, or online with a cloud-based browser grid such as TestingBot.
Test if the content, images and videos are adapting correctly to the available screen size on different devices, with different viewports.
Vendor Specific Prefixes
Your website might also use vendor specific prefixes in CSS that need to be tested. These prefixes may alter the design of your website for a specific browser vendor.
Browser vendors have been using prefixes to provide access to experimental APIs, for example access to specific animations, CSS transforms, transitions and more.
These major browsers provide their own prefixes:
-
-webkit-: Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS -
-moz-: Firefox -
-ms-: Internet Explorer and Microsoft Edge (not the Chromium based)
Important to know is that the usage of vendor specific prefixes have declined over the years. Specifically, WebKit (Safari is based on this) released a statement in 2016 that it would no longer release experimental features with css prefixes.
Missing CSS resets
Every browser implements its own rendering engine.
By default, some browsers will enforce specific paddings, margins and other styles to a webpage.
It is important to use a CSS reset and to test this on all different browsers with the help of TestingBot.
Text overflow issues with different locales
Your website might be translated in different languages. Test pages of your website across the various languages that are available to see if everything looks good.
For example, you might have a 'Pay now' button that looks good in English, but translated to German it might be too long, causing the button to look broken.
Take a look at the example below, where a button looks malformed because of a translation that is too long.
Conclusion
There are many possible errors that a website might suffer from which can be detected with cross browser testing.
TestingBot provides features to manually or automatically detect these issues. With a grid of over 3000 browser combinations, you can test your website with any browser, version and OS. From a specific geolocation, with a screen resolution of your choosing.
Sign up for a free trial to immediately start testing your website for issues.
