📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP
Socket
Sign inDemoInstall
Socket

react-testid-generator

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-testid-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.

1.0.3
latest
npm
Version published
Maintainers
1
Created
Source

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 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.

FAQs

Package last updated on 05 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts