Device and Browser Testing Strategies

Testing without proper planning can cause major problems for an app release, as it can result in compromised software quality and an increase in total cost. Defining and following a suitable and thorough testing procedure is a very important part of the development process that should be considered from the very beginning. Time should be specifically allocated to the manual testing on devices and browsers, as this is a low cost strategy to significantly improve the quality of the app release.  In this article, I will share some of the strategies we follow at MetaSys for real device and browser testing.

There are four points that we consider when defining our testing strategy.

  1. The first point is determining which devices and browsers will be used for testing. This is entirely dependent on the project requirements, and the development team analyses the application use cases to make the selection based on the following principles:
  • For web applications, we usually test on the three most commonly used browsers (Chrome, Firefox and Safari). If time allows for more extensive testing, we will also test on other browsers like Internet Explorer and Microsoft Edge.
  • For Device testing of web applications, we choose the devices based on the functional requirements and priorities of the applications. In other words, if a web application is supposed to run especially well on any particular device we focus the testing on the corresponding commonly used browsers with the appropriate resolution. For instance, for the Android platform we focus on Chrome and Firefox, whereas for the iOS platform we focus on Safari and Chrome.
  • For Native applications we directly test the application on the devices themselves, rather than using an emulator. This provides the most accurate feedback in terms of functionality and application performance.
  1. There are instances where the project timeline and/or budget limits the amount of testing that we can do. It is very important to identify these situations, and to develop strategies in order to still deliver high quality software to the client. At MetaSys we handle these cases by focusing on high level general testing, which covers most of the UI and the functional part of the applications.
  2. For functional testing of web applications, we utilise automation as much as possible. For repetitive testing of browsers, we usually design automated test cases. Using automation not only helps save the time of the testers, it is also very useful for retesting resolved issues. We use the Selenium WebDriver tool for automation testing and the Microsoft Team Foundation Server 2019 and the Microsoft Test Management tools for bug reporting and test case management.
  3. For web applications, we put a strong emphasis on performance, in addition to the ‘look and feel’., The speed of the app is one of the most important factors that determines the user experience. For performance testing we use the Apache JMeter and New Relic tools which give very accurate results regarding the application performance. The New Relic tool also provides an analysis of database query level problems, and gives many more reports and real time graphs. This helps significantly with troubleshooting, and improving performance.

At MetaSys, We have a team of experienced Dot Net developers who build solutions using Microsoft technologies. We have done web application development using ASP.Net Core, .Net & ASP.Net Framework, Visual Studio, Microsoft SQL Server, MVC, Team Foundation Server, Javascript and JQuery. For more info.

A Case Study – Building a Dashboard using Google charts in ASP.NET

Tracking KPIs, metrics and any other relevant data is important for any business looking to improve their performance, and proper visualisation can be helpful for identifying trends and patterns. A useful information management tool is a dashboard, which can be used to provide a graphical summary of all relevant information. This article details a recent project, in which we successfully built a dashboard for a client using Google charts.

Case study

Our client wanted a way to efficiently track day to day reporting, check the status and progress of different tasks, and financial metrics like revenue, costs and profit-loss data. Previously, they had to access several different reports to analyse the overall business performance. We built a dashboard that allowed them to visualise the day to day business activities on a single screen, saving time and energy.

We decided to use Google Charts for a number of reasons:

  • Google Charts are a good tool for visualization as the graphics are highly interactive.
  • There is a large gallery of chart types that allow for a lot of customisation for representing different kinds of data.
  • It is compatible with different browsers.

Technology and Implementation

For the implementation of the dashboard we used jQuery and These technologies are easy to use, and allow for easy rendering of the page. Furthermore, Google Charts have an inbuilt library in jQuery.

Implementation steps of Google chart in ASP.NET

Before the implementation, all the Google Chart Libraries and the visualization API need to be loaded. The following procedure was used to include a chart in

  1. Create an html div to hold the chart as per our requirement.
  2. Ajax call for loading data in the chart
  3. Call the Visualization API before assigning it to the chart and set the chart options like legends and axis titles
  4. Assign the div id to the chart
  5. The call to the chart depends on the chart type (barchart, donut chart etc.).
  6. Call the draw method of the Google chart and set the chart option.

Chart examples

Donut Chart:

donut chart


Stack Chart:

stack chart

Matching client requirements

Our main challenge was to modify the chart to meet the clients needs.  For example, the client specified that the revenue chart was to be displayed in a rectangular format without a legend, or axes. We identified the “Timeline chart” as the most appropriate chart option amongst the templates although it still required customization. We modified the inbuilt generated SVG code from JavaScript by specifying the position and width and by hiding the x- and y-axes to match the client requirements.

NG & MNG data

If you are interested in a similar implementation of data visualisation, feel free to contact us. Our team has extensive experience in handling diverse custom ASP.NET application projects.