Frontend testing helps a team check how an application behaves for the people using it. Time and budget are limited, so a test plan needs to identify the journeys and failures that matter most. This article introduces that planning process and the role of different testing tools.
What is Testing?
Testing compares a system’s observed behaviour with its expected behaviour. A useful test makes the starting conditions, action and expected result clear enough to repeat.
What is Frontend Testing?
Frontend testing examines the interface and user-facing behaviour of an application. It helps a team check whether pages, controls and workflows continue to work as intended when the software changes.
Why Frontend Testing?
Applications can put substantial logic in the browser and depend on external services. That creates several areas to consider:
- Client-side behaviour, including state changes and form validation
- Differences across the browsers and devices the application supports
- Interactions with third-party services
- The needs of people using different input methods, assistive technologies and connection speeds
Unit Testing
Unit tests check a focused piece of behaviour in isolation. They can help developers find errors in individual functions or components before those parts are used together.
End to End (E2E) Testing
End-to-end tests follow an application workflow from beginning to end. For example, a test might sign in, submit a form and check the resulting confirmation. These tests help reveal problems in how the application’s parts work together.
How to plan frontend testing
A test suite cannot cover every possible combination of users, data and conditions. Start with the application’s purpose and the consequences of a failure, then decide where testing effort will be most useful.
- Identify the critical user journeys and expected results.
- Define the browsers, devices and operating conditions to cover.
- Agree the time, budget and responsibilities for testing and fixing defects.
- Choose tools that support those requirements and fit the team’s development process.
Include failure and recovery paths as well as successful journeys. A form that submits correctly should also explain invalid input and handle a failed request in a way the user can understand.
Frontend Tools and Frameworks
Choose a tool after defining the tests it needs to run. A tool suited to isolated logic tests may serve a different purpose from one used for browser workflows or visual checks. Compare candidates using a small example from your own application.
The original article included the following tools. Their documentation is the appropriate place to check current features, supported environments and maintenance status.
Tools from the original article
How to compare testing tools
A useful comparison records how each candidate handles the same requirements:
- Environment: Can it test the browsers, devices and deployment environments you need?
- Application behaviour: Can it handle your authentication, navigation, asynchronous updates and external dependencies?
- Debugging: Does a failed run provide enough information to reproduce and investigate the problem?
- Integration: Can the team run the tests locally and in its build process?
- Maintenance: How much work is needed to keep the tests understandable and reliable as the interface changes?
- Cost and access: Which licences, hosted services, credentials and data permissions are required?
Run a representative workflow before committing to a tool. Include a deliberate failure so the team can assess the diagnostic information as well as a passing result.
Evaluating a Selenium-based approach
For a Selenium-based approach, begin with the browser workflows and environments the application needs to support. If a hosted testing service is part of the plan, compare its execution limits, reporting, access controls and costs with the team’s requirements.
Evaluating other end-to-end testing approaches
Evaluate alternatives against the same journeys. Check how each handles navigation, events, waiting and failures in your application, and confirm supported environments in the documentation. Keep the comparison tied to what the team needs to test.
Choosing unit-testing tools
Choose unit-testing tools that fit the project’s language, framework and build process. Try a small set of tests and review how easy they are to write, understand and debug. The team needs to maintain those tests alongside the application.
Plan testing early and give it time in each release. A clear test plan helps the team choose suitable tools, detect defects and understand the risks that remain.