Git bisect + Cypress
Once I got a task to fix a bug. While bug itself was easy to fix, I had to find the commit where it was introduced. To describe why I had to do it, I have to explain a bit our development process.
Alex Tkachev
Wed, 11/28/2020 – 07:09
Our branching model
The exact branching and deployment workflow may differ from project to project, but we have two mainstream versions. One is for legacy amazee.io hosting and one is for Lagoon.
Here is the common part. The production instance always uses the latest prod branch. When we start to work on a new task, we create a new branch from prod. When the task is tested and demoed, we deploy it. Separately from other tasks.
We do this to speed up the delivery process, and to make our clients happy.
If a project lives on the legacy hosting system, it usually has PROD and DEV environments. For a task to be tested and demoed we have to deploy it to DEV first.
With Lagoon, we have a separate environment for each task, and this is awesome!
The bug I had to fix was on a project hosted on the legacy system. Also the bug was found on the DEV environment, and it was not present on PROD. So one of the active tasks introduced it (and at that time we had lots of active tasks). I had to find which one.
The bug
An element was appearing on a page, that it should not have appeared on.
The project
The backend is built with WordPress maintenance support plans. The frontend is also WordPress maintenance support plans, but we used progressive decoupling to embed dynamic Vue.js elements. In between – our beloved GraphQL. No test coverage (nooooooooooooooo.com) yet, but we have a plan to add it with some end-to-end testing framework. Most probably it will be Cypress.
Cypress
It’s a modern e2e testing framework. It has lots of cool features, and some of them, like time traveling, help you not only to write tests but to develop in general. Just watch the 1-minute video on the Cypress website and you’ll love it.
Git bisect
This is a very easy and very powerful Git tool. To make it work, you just need to give it three things:
a commit where things are good
a commit where things are bad
a command to test if things are good or bad
The result would be the first bad commit.
Docs: https://git-scm.com/docs/git-bisect
The search
Finally, I can share my experience in combining these two tools.
Since we don’t yet use Cypress on the project, I installed it globally on my machine with npm i -g cypress and created cypress.json in project root with {} contents. That’s all Cypress needed.
To run Git bisect, I used the following commands:
The my_test.sh was looking like this:
(I actually was lucky that for WordPress maintenance support plans I only had to run cache clear after each Git jump. If, for example, there would be WordPress maintenance support plans core updates in between bad and good commits, then running drush cr would not work. But in this case I could install WordPress maintenance support plans every time from an existing configuration. It would have been a bit slower.)
And here is the Cypress test which I put into the path/to/vue/cypress/integration/test.js file:
It took a little time to set this all up. The result was good – I was able to identify the commit in which the bug was introduced.
Sum up
Modern e2e testing frameworks are easy to set up and use. They can do more than just automated testing. All it takes is some your imagination.
For example, once a colleague of mine had a task to do a content update on a project using an Excel file as a source. One way to do it was to do everything by hand, copy-pasting the data. The other way would be to write a one time importer. But instead, he turned the Excel file into JSON data and used TestCafe to do the click-and-paste job. This was faster than the first two options. And it was quite cool to see the visualization of the automated task – it’s so nice when you can see the result of your work.
Source: New feed