1.0.5 • Published 5 years ago
@gigantum/babel-plugin-selenium-id v1.0.5
babel-plugin-react-element-info
Babel plugin for exposing React element name and filename in DOM nodes
Installation
npm install --save-dev @gigantum/babel-plugin-selenium-id
The problem solved
This is useful for auto-generating selectors to run selenium tests.
Example
In
myInputFile.js
class Foo extends React.Component {
render() {
return (
<MyReactComponent>
My component contents
</MyReactComponent>
);
}
}
Out
class Foo extends React.Component {
render() {
return (
<MyReactComponent data-selenium-id="Foo">
My component contents
</MyReactComponent>
);
}
}
Usage
Via .babelrc
(Recommended)
.babelrc
without options:
{
"env": {
"development": {
"plugins": [
"@gigantum/babel-plugin-selenium-id"
]
}
}
}
with options. Prefix is the attribute prefix, defaulting to (data-selenium-id
).
{
"env": {
"development": {
"plugins": [
["@gigantum/babel-plugin-selenium-id"]
]
}
}
}
Via CLI
babel --plugins @gigantum/babel-plugin-selenium-id script.js
Via Node API
without options:
require('babel-core').transform('code', {
plugins: [
'@gigantum/babel-plugin-selenium-id',
],
});
with options:
require('babel-core').transform('code', {
plugins: [
['@gigantum/babel-plugin-selenium-id'],
],
});
License
MIT
This plugin extends https://www.npmjs.com/package/babel-plugin-react-element-info