Automated Testing for Angular Project with Ghost Inspector
Our developers can develop the front-end component-based using Angular. I think we can process testing as it.
Now I used Ghost Inspector tools for automate testing, and design test cases component-based with feature of Modularizing Tests and Variables. It will be easy to design automate testing about unit test, integrate test and End to End test for developers and testers.
At first, developers will design component as below.
This component will be used in many pages of the system, sometimes there are multiple same tag name elements generated by the component on one page.
If we design test steps for the element on every page, it’s difficult to maintain and reuse. I tried to resolve it with Ghost Inspector as below.
Step1, Prepare a reused step named “Jump into” the component as below.
The component in HTML has the tag name as “<app-task-modal>”, I prepare the CSS to identify the element, set it as reused step with variables ({{CSSPath-2-app-task-modal}}), then when jump into the component-based element, it will use the CSS which has been pre-defined ({{AppTaskModalPrefixCSS-TylerCreated }}).
Step2, Design reused test steps for component elements as below.
It’s used the CSS which has been pre-defined ({{AppTaskModalPrefixCSS-TylerCreated}}), I just only to make sure the other part CSS path to identify elements (Details of the task) in the component-based element (<app-task-modal>).
If I need to use JavaScript to design operations of the component-based element, I will identify the component-based element first with the CSS which has been defined ({{AppTaskModalPrefixCSS-TylerCreated}}), then use the component-based element to finish the JavaScript. I can prepare all operations for the component-based element, if the element is changed, just change the reused steps.
Step3, Design the test steps with variables, modularizing and reused step as below.
If I need some operations in the component-based element, I need to “jump into” the component-based element at step 7&step 8 as above, then import reused steps with variables (all operations include click, input, assert and so on) of the component-based element. After the test case run, it looks as below.
If developers design unit test for component-based as above, it’s will be easy to reuse for testers because some operations has been existed, the tester can design automate test cases ASAP. If Ghost Inspector add a “Jump into” operation and return elements generated by component to the test case, maybe it will be easier to use.