Best practices for .js based UI Automation
What is meant by best practices?
Best practices can be considered as a set of guidelines, ethics or ideas that represent the most efficient course of action that may be established by authorities or they may be internally followed by a company’s management team.
During framework development, we need to consider practices that enhance our automation code and show visibility of testing to the development team and client.
- Framework hierarchy and structure must have following parameters.
.gitignore file must include /download folder and all the reporting files. We need to follow its practices.
2. Documentation is very important when we handover projects to client or development team. It requires zero learning curve, if readability is clearly visible. Below screenshot follows JSdoc representation on all functions/methods.
@class — represent a class
@Param — represent a function/method with {*} represent it accepts argument with details
3. Naming convention — for locators, we usually follow naming convention in all caps with const. We do not use let/var for these type of files.
For test methods and functions. We can either use camel casing but it is preferable to use kebab-case for JavaScript.
4. Code formatting — it is very important to beautify your code. VS Code provides different linting and prettify extensions that can be used. But its proper usage and configuration should be used.
npm install -D prettier
.prettierrc file with configuration as per need
you can create above configuration file using shortcuts ctrl+shift+p and select prettier:create configuration file
Hence, prettier can be configured through this and we can format document using ctrl + shift + i (for whole document). But it would be hectic to format manually.
VS code provides a feature to format document on save. We just need to enable this feature.
In VS code, go to File -> Preferences -> Settings. Under this select Text editor -> Formatting and select the checkbox saying Format on save.
This way, VS code will automatically format your document on save. Hence, if we accidentally add extra spacing, it will automatically be fixed on save.
There are plenty of other options in settings that can be explored for better coding. Also, VS code provides various extensions to ease programming/automation (coding).
5. Shortcuts — though its not any feature, but if we consider best practices, we should know the shortcuts for the IDE we are using for development. For VS code, its community provide the shortcuts which are very useful for fast development.
6. Report viewer — we use different html reporting in our automation code. We can also use extensions to view report within IDE
No extra configuration required. Just install above extension in VS code. Open html file in VS code and type ctrl+shift+v. It will open report view within editor.
And its preview would be (After pressing ctrl_shift+v)
To sum up, there would be plenty of more options available to explore for best practices. Above mentioned are some of them.
