17
The Frontend Hitchhiker's Guide: Testing
Tests give you the confidence to make changes to code whether its yours or someone else's. Tested code also brings peace of mind and is the calling card of a mature developer.
The following is an overview of some of the popular tooling for testing front end applications.
Testing tools typically provide some combination of the following features:
- Test running & reporting
- Assertion Syntax for writing test code
- Browser Automation
- Page auditing & profiling
The following are common types of tests
| Type of Testing | Definition |
|---|---|
| Unit | Checking the functionality of individual components by comparing their inputs and output. |
| Integration | Verifying the functionality of |
| End to End | Automating the browser to verify functionality from the UI, filling forms clicking buttons and checking network requests. |
| Performance | Auditing a web page's performance such as load times and core web vitals |
| Accessibility | Audit the accessibility of a page |
- Libraries
- Browser Automation
- Page Auditing
Testing Library describes itself as a set of utilities that encourage good testing practices. It includes various libraries that allow you to write tests no matter what you use on the frontend such as the angular, React and vue. Some of which are recommended by the corresponding UI library itself such as vue and react
Puppeteer is a fun nodejs package that lets you automate interactions on a browser's webpage. This is usually paired with a testing framework such as mocha to perform End-To-End testcase. For example with this combination you can test to verify if a form submits properly or if a table has a particular structure.
Web driver IO is another automation tool with the advantage of being designed with UI Libraries such as React and Vue in mind. Web Driver IO's syntax lets you directly select react/vue components on the page. This allows you to write tests specific to the source code as opposed to the build output that puppeteer would require.
Selenium Web Driver is another browser automation tool with more support for web browsers than puppeteer including Safari, Opera and even Internet Explorer.
Nightwatch is a fully integrated End-to-End testing tool that adheres to the W3C API. It also works with Browser Stack to perform cloud testing.
Cypress is another fully integrated End-to-End testing tool which lets you write, run and record tests in an interactive dashboard. Cypress has a really nice developer experience and much loved by its userbase.
Lighthouse audits performance according to the core web vitals. Additionally, lighthouse can audit for Accessibility, Best Practices, Search Engine Optimization and whether your page is a Progressive Web App. You can also automate lighthouse audits via its API. Its a great tool to ensure your app is fast and does well with google search.
Web page test is a website that allows you to analyze a web page's performance. It records checks for compression, caching effective use CDN and load times among other things. You can create automated performance tests using its API
This stop was a hefty one. As you can see there many tools available for testing (this is no way all of them) and this is just on the frontend side of things. We will be arriving at stop 6 next week and it promises to be very insightful. Can you guess what it might be?
17