@gigantum/babel-plugin-selenium-id

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