Can you imagine a world where a parent could prevent a sleep regression in a growing toddler? What if you could scan for hidden structural faults in your home before they became big issues? Or automatically get suggestions for areas of improvement before giving that big presentation? When it comes to development, these dreams can become a reality with automated testing.
Why Use Automated Tests?
Automated testing uses automation or Continuous Integration (CI) to execute pre-determined tests. Why do we need to use automated tests when we can just test manually? Automated testing by no means removes the need for a person to manually test their code but adds an extra layer of efficiency and accuracy to your code. Automated tests can:
- Catch more bugs early on in the review cycle
- Quickly measure your code against industry standards and show areas for improvement
- Prevent functionality regressions from being introduced with new code
Some of the tools we use at Kanopi to help prevent regressions are Cypress end-to-end and Backstop visual regression tests. For improving the quality of our work, we leverage Pa11y and Google Lighthouse tests—just to name a few.
Regression Testing
It’s a developer’s worst nightmare—you just launched a shiny new piece of functionality to your website only to realize that it has broken a piece of the existing functionality. That’s where regression testing tools come in. They can be run automatically to flag any unexpected changes in your website’s look or functionality.
Cypress
Cypress is a modern Javascript framework that can test anything a visitor or content admin can do on a site. Once you set up what you want to test for, you can watch the tests run in real time and see where the test fails.
Check out the helpful demo video on https://www.cypress.io/
Key Features
- Time Travel: Cypress captures snapshots during test execution. These can be viewed by hovering over commands in the Command Log to see a step-by-step breakdown of the test
- Debugging: Cypress allows debugging directly with familiar tools like Developer Tools
- Automatic Waiting: Cypress automatically waits for commands and assertions before moving on
Example Use Cases
- User login and authentication flows
- Form submissions and data validation
- Navigation and page interactions
BackstopJS
BackstopJS is a framework that automates visual regression testing. It compares a page from production with the changes implemented and highlights any visual differences between them. This can be set to check high profile pages (Homepage etc) with every code change to verify nothing has been unintentionally changed.
Example Use Cases
- Maintaining brand and design system fidelity during development
- Detecting layout shifts and styling issues
- Verifying responsive design
Improving Quality
Improving your website’s quality is essential not only for enhancing user experience but also for meeting modern web standards—and tools like Google Lighthouse and Pa11y play a crucial role in achieving that.
Lighthouse
Lighthouse is a tool from Google that provides insights on a website’s Performance, Accessibility, SEO and Best Practices and scores it for each category. After running these tests, Lighthouse gives detailed notes about improvements that can be made to your site.
Benefits of Using Lighthouse
- Identify performance bottlenecks
- Improve accessibility for all users
- Optimize for search engines
Example Use Cases
- Analyzing page load speed
- Checking for color contrast issues
- Ensuring mobile-friendliness
Pa11y
Pa11y is a free open-source tool that provides accessibility testing for sites. Pa11y, highlights areas where a site may fall short of compliance with WCAG standards, which is vital for making the web usable for people with disabilities.
Key Features:
- Can generate HTML reports, making it useful for non-technical stakeholders
- Tests against WCAG AA 2.1 accessibility standards
Use Cases:
- Auditing for accessibility issues in development and production environments
- Running automated a11y checks as part of a CI/CD pipeline
- Ensuring sites meet legal compliance and inclusive design practices
While automated testing helps improve efficiency and code coverage, manual testing is essential to make your website as accessible as possible. Check out Kanopi’s guide for website accessibility testing for more a11y tools and strategies.
Integrating Automated Tests into the Development Workflow
No matter the CMS platform or host, Kanopi utilizes Quality Assurance (QA) environments that are built on every pull request, automatically. These environments allow for our automated tests to run on an identical server to your live server, and allow for human review of the changes in addition to the automated tests.
Our development workflow allows us to to stay consistent, and creates the freedom to work on implementing the best testing we can using industry leading tools.
How to Write Effective and Maintainable Tests:
- Keep tests focused: Each test should verify a single behavior or functionality to make debugging easier and reduce flakiness.
- Use meaningful names: Name tests clearly to describe their intent, making them easy to understand at a glance.
- Add inline code comments when needed: Brief explanations help clarify complex logic or edge cases.
- Organize logically: Group tests by feature or component, and follow a consistent folder structure and naming pattern.
Maintain your test suite: Regularly refactor, update, or remove outdated tests as your application evolves.
Regular Testing is key for long-term site health
Regular test runs and reporting are essential for maintaining the long-term health and reliability of any web application. By continuously running automated tests, whether for functionality, visual consistency, performance, or accessibility, teams can catch regressions early, before they reach production and impact users. Ultimately, regular testing and clear reporting help ensure a stable, high-quality product that evolves safely with every release.
To guarantee exceptional service for our clients, Kanopi utilizes a robust quality assurance process that includes automated testing tools to prevent regressions and improve code quality, supplemented by meticulous cross-device testing performed by our dedicated QA engineers. Feel free to contact us if you need testing help.
