Within the web development workflow we follow at Metadrop, one of the crucial steps is the review of the implemented task's quality. This process aims to detect possible errors or bugs in order to correct them before the work reaches the client for validation and subsequent deployment.
This step, known as Quality Assurance - QA, is often underestimated but holds vital importance if we want to optimize our workflow. Its proper execution prevents future issues in the production environment and plays a fundamental role in building client trust. By significantly reducing the chances of encountering errors during development, QA becomes an essential element to ensure project quality and success. At Metadrop, we recognize and value the relevance of this process, and we strive to carry it out rigorously and comprehensively.
Why is it necessary?
- Regression reduction: By detecting and correcting errors before client validation, the need for subsequent changes is avoided, creating a sense of solidity and confidence in the product.
- Increased security and trust: QA helps identify and address potential vulnerabilities, improving the security and robustness of the website.
- Detection of code improvements: QA is not limited to just finding and fixing errors but also allows for identifying opportunities to enhance the code.
- Preventing lingering errors: Rigorous QA prevents errors and bugs from spreading during the development process and affecting new tasks.
- Agility in the development process: The workflow remains consistent, without unnecessary setbacks, resulting in a more organized and efficient process.
- Time and cost savings: By preventing the need for redoing tasks, development time is optimized, and additional expenses are avoided.
- Promoting continuous improvement: QA fosters a philosophy of constant product improvement and optimization, driving evolution and growth.
How to perform it correctly?
In this section, we will provide a detailed guide on the optimal execution of QA, based on accumulated experience in the field of quality control.
Before getting started
To initiate the QA process, it is crucial to ensure that the card on the board is adequately documented in advance, including two essential sections in its description that enable efficient verification of the implemented changes:
Acceptance criteria
Having well-defined and comprehensive acceptance criteria before the development phase is essential. These criteria establish specific objectives and requirements for considering the successful implementation of each project card. They serve as a guide to evaluate and validate the fulfillment of expectations, quality standards, and client satisfaction. The QA team also uses them to confirm the proper implementation of the card.
Testing details
The developer will provide valuable documentation that will serve as a guide for the person responsible for conducting quality control. This documentation provides the necessary information to carry out the QA process effectively. We can categorize it into the following points:
- Multimedia content such as screenshots or videos showcasing the behavior of new features or implemented changes. Tools like Peek can be used to capture screen videos.
- Relevant URLs to facilitate tracking the testing steps.
- Links to the design or screenshots of it.
- Relevant code or commands.
- Links to the Pull Request for code-level review if necessary.
As at Metadrop we maintain high standards regarding card documentation, if we notice any missing information, we return the card to the responsible person for implementation to complete it.
The QA process
To provide a clearer presentation of the QA process flow, we have the following diagram that summarizes the steps we need to follow:
If it has been validated, the Pull Request is accepted and merged, and the task continues. If not, after describing the errors, it is reassigned to its author to make the necessary corrections.
Important aspects to review
General operation of the site
It is important to verify that the website functions correctly after making significant changes during implementation. This includes checking for any errors or bugs on the main pages and in the display of different content, the header, and the footer.
If the website allows for creating, reading, updating, and deleting content (CRUD), attention should be given to these functions. Even if there are no testing tools like Behat available, a manual review can be conducted to ensure that all CRUD operations work correctly.
Users and permissions
It is essential to check the permissions and actions of different users on the website. This involves testing the functionalities from the perspective of different user roles, such as administrator, registered user, or anonymous user, as appropriate. It should be verified that each type of user has access and can perform the appropriate actions according to their role.
Edge cases
When conducting a comprehensive quality assurance (QA), we should not solely rely on the information provided in the ticket but also perform checks on the most extreme cases involving the developed functionality.
To do this, we need to find ways to break the implemented functionality and look for the most unpredictable errors that can occur. This is a good practice that can help anticipate possible regressions caused by very specific errors.
Operation in different environments
If remote environments are available, it is recommended to use them for additional testing instead of relying solely on the local environment of the QA manager. Remote environments offer the advantage of covering cases closer to reality. For example, the pre-production environment replicates the production environment and allows for more realistic testing before implementing changes in production. By using these remote environments, we can obtain more accurate results and ensure better functioning of the website in real-life situations.
Browsers and devices
In certain tasks, it is advisable to check the functioning on different devices and browsers to ensure compatibility. This involves testing on a variety of physical devices and major browsers or using tools like Browserstack that allow us to virtually test the software's performance on different devices and browsers.
Screenshot of the BrowserStack options menu
As main devices and for testing responsive functionality, we have the following primary displays and browsers available:
Automatic testing tools
We use Behat and BackstopJS as automatic testing tools to optimize our quality control process. These tools are valuable for identifying regressions and reporting errors in tasks before the QA manager begins manual testing.
Behat is a testing tool that allows for covering scenarios of user actions on the web. It provides a structured way to define and execute automated tests, which improves the efficiency of the quality control process. On the other hand, BackstopJS is a framework that helps detect visual regressions in the appearance of a website. By using screenshots, it compares the current state of the website with previous versions and highlights any visual differences that may have arisen as a result of recent changes.
The implementation of automated tests with these tools brings several benefits. Firstly, it allows for early detection of errors as tests are automatically executed with each development iteration. This helps to quickly identify issues and reduce the time spent on manual testing. Furthermore, automated tests are consistent and repeatable, ensuring broader and more comprehensive coverage of website functionalities. By keeping the tests up to date with each introduced change, valid coverage is achieved, and the introduction of new errors is avoided.
Therefore, the use of autotesting tools like Behat and BackstopJS provides the possibility of performing automated tests that cover both functional actions and visual aspects. This streamlines the QA process, reduces the time spent on manual testing, and improves the quality and consistency of the final product.
Execution of a test job reporting an error in BackstopJS
Status: Needs work
When a card transitions to the "Needs work" status, a regression has occurred, and it is returned to the author of the development to make the necessary changes. This can happen due to various reasons such as incomplete documentation, functionality not meeting defined criteria, or the presence of errors and bugs during development.
The responsible of the QA has the task of properly reporting the issues that prevented the task from passing review, with the aim of avoiding future setbacks and bouncing of the card between different workflow states. To achieve this, the QA manager can provide the following documentation, tailored to the specific reason:
The documentation is incomplete:
- Detailed description of the aspects missing in the documentation.
- Suggestions for improving the documentation and making it more complete.
The functionality does not meet defined criteria:
- Specific description of the discrepancies between the implemented functionality and the defined criteria.
- Clear examples demonstrating how the functionality does not align with the requirements.
Errors or bugs are occurring due to the development:
- Screenshots or videos showing the errors in action.
- Detailed description of the steps to reproduce the errors.
- Relevant console error reports.
It is a priority to address tasks that have not passed QA, especially those that are already in development and could have been merged into main branches. This prevents the propagation of undetected errors and ensures higher quality of the final product by maintaining uninterrupted workflow.
Conclusions
At Metadrop, we recognize QA as a fundamental element in the development process, as we understand that implementing it properly can streamline the rest of the involved processes. We always strive to convey the value of QA and improve the procedures and tools we use in this regard.
Throughout my personal experience, I have learned firsthand the importance of QA by witnessing how this practice has significantly benefited us on numerous occasions, allowing us to optimize time and effort in project development.
QA is an essential element in software development. Its proper implementation enables us to achieve higher-quality products, save time and effort, increase efficiency, and achieve greater client satisfaction. At Metadrop, we value and constantly refine our QA procedures and tools to ensure the best results in our projects.
