In the login POM we can observe two improvements that can be made:
- Move all selectors to constants
- Convert the parameter type to an interface
Let's start with the first one. In the method loginAndVerifyUser we are dealing
with two pages. The login page and the dashboard where we verify the navbar to
ensure we have properly logged in. So let's create a constants directory,
create a selectors directory within that and create two files called login.ts
and dashboard.ts where we will be moving all these constants. We will also
create an index.ts file inside the selectors directory which will export all
the selector exports from a single file to make the imports easier.
Now lets start moving all the constants there.
Now let's deal with the second action item. Let's convert the parameter type to
an interface. It's always better to define the types of objects as interfaces
when dealing with objects having more than two keys since it can improve the
code readability.
There is one additional item we can improve in this code which is regarding the
declaration and initialization of class variables. In the code above we have
written 3 lines of code just for declaring and initializing the page class
variable. TypeScript provides us a short-hand notation to avoid this repetition
by just adding an access modifier to the constructor parameter.
We can see that we avoided a lot of boilerplate code by this short-hand.
The reason why we specify a private modifier instead of public here is because
the page class variable is not usually accessed outside the POM. So there is
no need to make it public. If need arises that we need to access some class
variables outside the POM, then we have to define the constructor parameter with
a public access modifier.
Another thing to note is that this short-hand is only applicable for constructors
with positional parameters like the one above and NOT in constructors with named
parameters. (Refer this article to learn more about positional and names
parameters)