Organize your Selectors in Automation Frameworks with Cypress

When it comes to software testing frameworks, selectors play a crucial role in making the code reusable, modular, and efficient.

In the past, I used Object-Oriented Programming (OOP) and Page Object Model (POM) with Python and Selenium. Back then it made sense to keep selectors as part of each page object and create methods to interact. However, since discovering Cypress a year ago, and working with its own set of built-in commands I realized that you don't need to create any more methods to interact with the DOM, so my perspective on the efficiency or need of POM together with Cypress framework has changed. Of course you may still have particular situations where you build custom methods, but we will talk about that later and see how we can do it different. And just to be clear this applies only with Cypress.

But even with its built-in commands we still have to maintain efficient our selectors. And we do have a simple way, that I rarely see people talk about.

In order for me to explain we must first understand the advantages of using Page Object Model:

1. Code Reusability: By encapsulating web elements and their interactions within separate classes, POM allows for the easy reuse of code across multiple test scenarios. This reduces the amount of duplicated code and makes it easier to maintain the framework.
2. Readability: POM improves the readability of test scripts by abstracting away the details of element selection and interaction. This makes the test cases more focused on the actual test scenarios and easier to understand.
3. Maintainability: With POM, any change to the structure or design of a web page requires updates only to the corresponding page object class. This makes the framework more resilient to changes in the application and easier to maintain.

A Different Approach to Selectors

The answer is relatively simple, you dedicate one file only to selectors, you group them by either functionality, page, usage, or whatever fits your web app needs. Here is an example :

Now lets break down each advantage of POM and see if we can find them in this kind of setup.

Code Reusability

If you want to use any of these selectors all you have to do is import them into your test. You can import all or selectively choose whatever is required in the test. An example below:

Code Readability

One of the key features in using POM is that you can read and understand what is going on in the test with ease. Similar you can see that we follow the same principle and the readability is almost at the same level as Gherkin syntaxes of given when then. Maybe not that far, but really close to that. I believe anyone can easily read what the test does.

or

Maintainability

Selectors are grouped and stored into one place, whenever a selector is changed in the DOM or the structure is updated, the changes we have to make are all in the same place. We don't touch any of the tests, we just update our selectors file.

Of course, I do still see others creating their Cypress tests with POM in mind. I do talk with them and try to understand the reasons why they approach this way, and most of the answers I got are related to something along the words "cause this is how I always do frameworks". But you don't always have to follow something because everybody is doing it, you should always try to improve your software testing frameworks, adapt to new ways and always experiment to find what works best for your project.

I know new ways of doing things are always a struggle. Take for example an article I wrote on how Cypress deals with multiple domains , and its not even close to how you usually do it but you may find out that different is nothing to be afraid of. And you may like it.

What I do believe that is most important is the fact that with the approach presented here you can decrease the complexity of the framework, you can simplify the logic, write less code and any new comer to an existing project will take a shorter time to understand it.

As for specific situations where you do have to create some custom methods, I will later create a post about it, but you can do this by using Cypress and build your own methods without even the need to import them into your tests. It may even be more efficient than POM.

If you are curious to see the repo related to this post you can find it here

Hit the clap button if you found this useful. Or even buy me a coffee if you want to motivate me even more.