automation-wizard v1.0.2

Automation Wizard

Automation Wizard is a package that can auto generate test attributes for testing tools like Selenium. The attribute name required can be passed into a function and the package handles everything else.

Usage

• Install with

npm i automation-wizard --save

• import abracadabra on a top level component like App.js or index.js as shown

import abracadabra from 'automation-wizard';

• Call abracadabra function at a top level page or component in case of a SPA as shown

abracadabra('data-test-id','',2000,[]);

• In case of React, call abracadabra function in useEffect or componentDidMount as shown, note that we are only calling the function once (second parameter of useEffect ensures this)

useEffect(()=>{
  abracadabra('data-test-id','',2000,[]);
},[])

In the above code the first parameter is the attribute name to be added to the html element, second parameter is the prefix if needed for the attribute value (can be left blank if not needed) passign 'pre-' for example would generate attributes like data-test-id = "pre-7a61787824", the third parameter is the delay before executing the function in milliseconds (if your application takes longer to load all the elements on the screen pass a higher delay), the fourth paramter is an array of text that can be passed in case there are custom html elements in the application like for <hashif><dev> the input would be 'hashif','dev' (pass an empty array [] in case there are no custom elements)

• Full code is shown below

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';
import abracadabra from 'automation-wizard';

function App() {

useEffect(()=>{
  abracadabra('data-test-id','',2000,[]);
},[])

  return (
    <div className="App">
       .
       .
       .
    </div>
  );
}

export default App;

Dynamic Behavior

This package tracks the DOM and assigns id's to any newly added html element automatically so that any changes during runtime are covered. This package can work with any frontend framework or with vanilla JS.

Note

This package can be used with JS frameworks like Angular or in any JS application. Please remember to call the function from an appropriate lifecycle hook equivalent once depeneding on the stack.

Contact

In case of any doubts please contact me via mail hashif360@gmail.com or via LinkedIn www.linkedin.com/in/hashif-habeeb-a82064162

Thanks

In case you are feeling down today here is an inspiring quote -

“Do what you can, with what you have, where you are.” ―Theodore Roosevelt.