Web Application Testing: A Detailed Guide
By Vivek Mannotra, Community Contributor - May 24, 2022
The internet, World Wide Web (WWW) or simply the web, is the most revolutionary information technology and application development platform in the world. The present world economy majorly depends on the web as the number of internet users has been rising globally over the past few years, as seen below.
The most straightforward way to conceptualize it is a network of interconnected nodes called servers and clients, exchanging data over well-defined protocols like TCP/IP, HTTP, FTP, etc. When building for the web as per today’s industry standards, it is vital to have an updated and relevant stack of tools with an architecture that supports CI/CD and QA.
Structure of Web Applications
A web application or website is a package loaded on the client-side containing multiple layers of interdependent modules, built on the core web technologies:
- HTML: Hypertext markup language or HTML, is the tag-based document marking system that defines the structure and individual components of, what is compiled into the Document Object Model or DOM.
- CSS: Cascading style sheet or CSS is the native style description framework used to identify and style different parts of the DOM into the visible area of the page. It provides elements selection by id, class, and relation to other DOM elements.
Besides the front-end layer, in most applications, there is also a backend or server-side layer with APIs built on micro-services and databases, which hold all the data, and business logic and abstract all the information into relevant contracts that the front-end can access via HTTP methods, with proper request and credentials.
Depending on the tools used, and the nature of the website, it will need an appropriate hosting strategy and infrastructure. Websites can be hosted on various systems, broadly classified into:
- Static Web Hosts: Used for static websites, file storage-based delivery platforms that provide domains, email, DNS, and other features like SSL encryption and 3rd party integrations. E.g. Godaddy, Hostinger, etc.
- Dynamic Web Hosts: For dynamic web apps, cloud platforms like AWS, Google Cloud, Azure, Salesforce and IBM cloud are preferred, which provide a range of computing features like Virtual Machines, Databases, on-demand resource scaling, etc. as services over the internet. These platforms are the standard for deploying web applications for business purposes because of their advanced performance and security features. They also provide a range of cutting-edge AI/ML-based tools.
Even with a pretty simple initial setup, a web application will increase in complexity as more pages, content, and functionality are added. After a certain threshold of complexity, it becomes very difficult to manage the application’s behavior, and it gets more challenging to audit resource consumption and allocation.
Depending on the application, developers might prefer certain approaches to the application structure like
- Single-Page app: This refers to a web app with a single document model within which all functionality is contained. It involves a large amount of functional logic being packaged and sent to the client’s computer with appropriate security and performance optimizations. Some popular examples are Gmail, Facebook, GitHub, etc.
- Multiple Page app: Most commonly used structure, where the application is divided into multiple pages, accessible through various route URLs. Server-side app frameworks and template engines are used to build such applications, and they have an inherent security advantage over SPAs.
- Progressive Web App: This is a modern way of using WebView providers on handheld devices to run web applications as native apps using service workers, manifests, and an app shell. In case, one is looking to test a PWA, read this.
No matter what approach you take, implementing test plans at the level of development and beyond to ensure an efficient and continuous DevOps workflow is equally important for all.
Concept of Web Application Testing
A good website testing plan includes a strategy, test objectives, test approach, test schedule, and test environment. The test strategy should be designed to ensure that the website meets the business requirements and is fit for purpose.
The web application testing should include:
- Integration Testing: Involves testing various parts of the website code as interdependent functions or modules through test code or other tools triggered as the code is merged with the parent repository. All major cloud hosts like Github, Gitlab, and Bitbucket have native CI/CD integration support.
- System Testing: Testing the workings of the website at the level of user interface and features like login, signup, and other supported flows, which validates parts of the website working together. Selenium is the most widely adopted automation framework for web browsers.
- Acceptance Testing: This is usually the final stage of testing in which the fully assembled application with data is tested in a live or pre-production environment. This involves testing with actual or mock users. Automated visual testing is the most efficient way to manage the change approval process on a rapidly changing product UI.
- Performance Testing: With an increase in users, it becomes vital to ensure that the servers can handle the request loads at peak usage times. Also, maintaining end-to-end security at each point of contact between the website and users properly using HTTP headers and metadata analysis.
Role of Browsers in Web Application Testing
All websites need another application, known as the ‘browser’, running on top of a device’s operating system. Web browsers are built by many companies and are usually free.
Web browsers play an important role in making websites accessible to users and helping the developers with a wide set of tools to test and debug various aspects of a web application under development. Most browsers provide development tools as an auxiliary interface to developers who want to peek under the hood and access the inner workings of a rendered web app. These tools can generally be accessed by right-clicking on a page and selecting the option ‘inspect’.
Learn More: Differences Between Bugs & Errors
Let’s have a look at the primary tools provided in the dev tools section of Chrome:
- Elements: The element explorer provides access to the compiled DOM with a host of features to add/remove components, and set states like hover, focus, etc.
- Sources: Under the sources panel, you can see a list of all the source code files downloaded by the web page, listed under the domain provider name. On the right side of this tab, you have a script debugger that can be used to put breakpoints and debug the website execution in real-time.
- Network: This panel logs all the network calls to and from the webpage, with a long list of details like type, status, request/response, timing, etc. It also has an option to simulate network availability scenarios by using the throttling feature.
- Performance: Under this panel, you get the ability to record runtime performance by recording page load events and analyzing the rich breakdown provided after the recording is analyzed.
- Memory: You can take memory heap snapshots and analyze things like memory leaks, object size, visualize memory usage over time, etc.
- Application: This can be used to evaluate, edit and debug service workers, worker caches, etc.
- Security: Gives you a summary of the SSL certificate validity.
Chrome Dev Tools
There is also a built-in device toolbar which lets you simulate user interface scenarios across a range of devices with a list of preset resolution profiles, network throttle, zoom level, screen rotation, and the ability to enter custom resolution for testing responsiveness. With Chrome Developer Tools from BrowserStack, you can debug websites on iOS and Android from your computer with no additional setup.
Testing Local Deployments of Web Applications
Before you move to set up a live testing flow in a browser, it is also recommended to implement a unit testing workflow in your application to ensure a strong and clean codebase.
When developers make a website, they check all changes and updates in a browser on their work computer. After preliminary functional testing, the next important part is the cross-browser compatibility testing, which gives us a sense of how the app looks and performs on different device-browser combinations.
Because a developer has limited access to the range of all possible devices, it becomes a bit trickier to capture some bugs during web application testing. Even though the web has well-defined standards and specifications, discrepancies in the interpretation of different browsers arise due to different implementations in the underlying browser engine and JS interpreter. Overall a modern web browser provides a loaded toolkit to open up and debug any aspect of the application.
But, Browserstack lets you link up your local or staging environment to a range of more than 3000+ device-browser combinations and execute tests, making your testing feedback so much more valuable. See how you can set it up in these simple steps:
- Download the Browserstack desktop tool from the live dashboard local testing section.
- Install the plugin on the development computer and enable network access.
- Refresh the BrowserStack Live session, and the local testing section status should change to green from red.
- Open the local console and debug your app from there.
Read the Local Testing with Live tutorial to get details on implementing other advanced features.
Automated Integration Testing of Web Application
The main goal is to eliminate the need to manually validate functional updates after changes are made to the application. The preferred approach is using modern test automation frameworks to run tests sequenced while generating appropriate reports.
Read More: Key Elements of an Effective Test Automation
- Installing command-line interface (CLI) and other dependencies in your local development environment.
- Connect to your Browserstack account using the access keys in your application.
- Invoke the first test run on local deployment.
- Configuring the test suite and validating on local setup.
- Run cross-browser tests with the automation test.
- Migrate the test suite to higher environments.
The Automate dashboard helps visualize the status of builds, sessions, queues, etc. Here are some more benefits of using it:
- Once scripted properly, your tests can be scaled easily to cover a wide range of device scenarios.
- Ability to test local, staging, and production environments seamlessly.
- Integration with CI/CD tools and platforms helps streamline the dev process.
- Highly configurable at the level of code.
- All information is accessible through the cloud platform.
The Automate API offers more functionality and access to information like plans, projects, build sessions, etc.
Automated Visual Testing
From the user’s perspective, the application is a visual experience, and the journey a user takes on a website is defined by the design specifications set by the business analysis and design processes. To ensure that the developed website stays true to the design goals, one has to ensure a proper regiment of visual testing and approval of changes to the code base.
Read More: Visual Testing: A Beginner’s Guide
This is where the QA team plays a leading role. The process of visual testing used to be mostly manual about a decade ago, but now, it is increasingly being automated. One efficient way to implement visual testing is by using Percy visual testing in your stack which offers a user-friendly and tightly integrated way to perform visual tests on the CI/CD line.
Let’s look at the brief steps to implement:
- Create a project on the Percy app dashboard.
- Follow the integration guide applicable to your programming framework and use the token provided for linking accounts and validation.
- Install project dependency on your local environment as per the guide and now you can write percy commands into your application execution script and take snapshots.
- Build and run your application, and check logs for updates on screenshot events.
- After the build is complete, go back to the dashboard, and there, you should be able to see your build listed.
- If you click on any entry, you will be taken to the review section, where you can see the difference between an explorer and other features of the Percy dashboard.
Once your build is showing on the dashboard, you can now tweak the project to add more features like webhook, slack, repository integrations, and the ability to change the browser in which the snapshots are taken.
You can add your team members and configure it for the production environment, where each build can be evaluated for visual differences and the team can collaborate on approvals. Learn how major brands across different domains used Percy for their benefit.
Case Study: How Intercom Deploys Faster & Safer with Percy
After you successfully lay out a clear path of testing on your local machine manually, and implement visual automated testing to control UI changes, your website is good to go to production or live environment.
But that does not mean that the role of testing is over. If your test cases are properly configured, and your CI/CD flow runs smooth, you will have to spend less time on validations and error checks and more time on actually developing new features. To ensure a healthy testing system, just keep in mind these points:
- Test runs at all stages and levels need to be monitored because automation will help you execute and detect errors. Still, to understand the severity of the defect and then find a way to resolve it, we need proper communication and allocation within the team.
- Dashboards provide a great way to monitor the status of builds and test runs, but having too many separate dashboards will lead to difficulty in tracking and also waste time, so it is suggested that integration of layers wherever possible should be implemented.
- Any change in business or design specifications has to flow from the leadership to the development process and finally into the test scripts. In a healthy dev process, the flow of information from top to bottom is seamless and quick.
Many different approaches to testing websites and many different combinations of tools can be applied. Still, with cloud-based technologies, web application testing has become more feature-rich and reliable for large-scale enterprises. With Enterprise Test Automation, collaborating with multiple teams on the same platform for building test plans supercharges the output as all members can access shared resources on the dashboard.
Enterprise test automation covers:
- Business-critical website or app features that require Continuous Monitoring.
- Features and modules that are too complex to test manually, AKA ones prone to human error.
- Unit tests to verify how a function or class operates in isolation.
- Integration tests that verify how several components work with each other.
- End-to-end testing to verify user journeys and transactions across multiple software components, whether at the UI or API level.
- Performance tests that evaluate the software’s stability, scalability, and availability under various levels of traffic, load, etc.