In a company, it is important to have clear roles and responsibilities in order to ensure that tasks are completed efficiently and effectively. Untold is a small company and many times our roles are not so easily defined. In 2022 I found a large part of what I did was QA. When someone takes on the task of quality assurance (QA), they play a crucial role in maintaining the smooth operation of the project, much like I did as a Project Manager in the past. Both roles are responsible for ensuring that all products meet the required standards and specifications, as well as identifying and addressing any issues that may arise. So while the job description was not too different, the HOW was very different and I had little idea where to start.
The tool I found and came to love for QA is Cypress, an open-source testing tool that is designed to make it easy to write and run end-to-end tests for web applications. It is built on top of the JavaScript testing library Mocha and uses a browser-based DOM (Document Object Model) to simulate interactions with a web page. Cypress can be used to test any web application, including those built with frameworks such as React, Angular, and Vue.js.
Now keep in mind, before starting this project I have written very few lines of code, in fact, none unsupervised in any meaningful way. In prior QA scenarios I did simple user testing things like click the button and see if it does what it is supposed to. Using Cypress was complimentary to my previous testing experience. Cypress tests are written in JavaScript and use a series of commands to simulate user interactions with the web application. This is in contrast to other testing tools that run outside the browser.
The learning curve was very quick. All Cypress commands are pretty intuitive. The most difficult part was correctly identifying the element to turn what you want to do into code. However, the difficulty was made pretty easy when using "cypress-testing-library" query functions. It provides a way to find DOM elements. Simply clicking on an element in the Cypress GUI usually gave insight into the element name.
In some cases, you may find that the cypress-testing-library helpers do not work as expected. This could be due to various factors such as changes in the application's DOM structure or issues with the helper functions themselves. When this occurs, I found using the "Inspect Element" feature of your web browser to examine the DOM structure of your application and determine why the helper is not working as expected. This can be especially useful when working with complex or dynamic elements that are not easy to access using the cypress-testing-library helpers. To use the "Inspect Element" feature, simply right-click on the element you want to inspect and select the "Inspect" option from the context menu. This will open the browser's developer console, which provides detailed information about the element and its relationship to other elements in the DOM.
All the tests follow a similar format: name the test, explain what element to focus on (or ‘get’) and then what to do with that element (‘type’, ‘click’, etc). Here is an example of a simple test I wrote to change a user’s avatar:
it('changes profile avatar', () => {
const filePath = 'DGDbull.jpg'
cy.get('.avatar-profile-overlay')
.click()
cy.get('#user-profile-image-file-input').attachFile('DGDbull.jpg')
cy.get('.profile-content > .button')
.click()
})
There was an added element of satisfaction when using Cypress as a first time code writer and that was running the tests in the GUI and watching my code go to work. The GUI allowed me to see the results of my tests in real-time. As a note, tests can also be run in the command line using the cypress run command. It was also satisfying to not just identify the problems but in some cases help fix the issues that arose from the tests. I was able to do this by using the Cypress dashboard which provides detailed debugging information to help users identify and fix issues when a test fails.
Overall, Cypress is a powerful tool for QA purposes and simple enough to use that I was able to be proud of the work I did for my first time writing end-to-end tests for web applications. Cypress provided a user-friendly interface for debugging and fixing the issues that arose. If you are looking for a tool to help with QA for your web application, consider giving Cypress a try
