React Test Id Generator

React Test Id Generator is a package that can auto generate test attributes for testing tools used by QA automatically. The attribute name required can be passed into a function and the package handles everything else.

Usage

• Install with

npm i react-testid-generator --save

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

import tagAttributes from 'react-testid-generator';

• Call tagAttributes function in useEffect or componentDidUpdate as shown

useEffect(()=>{
  tagAttributes('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 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 tagAttributes from 'react-testid-generator';

function App() {

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

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

export default App;

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 depeneding on the stack.

Contact

In case of any doubts please contact me via mail [email protected] 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.