The Test ID Generator is a Visual Studio Code extension designed to simplify the process of adding test identifiers (data-test attributes) to HTML elements in web development projects. If your codebase lacks test IDs and you find yourself spending valuable time manually adding them, this extension is here to be your time-saving ally.

• Effortlessly assign test IDs to HTML elements with a simple keyboard shortcut.
• Customize the test ID attribute keyword via a user-configurable .testidrc.json file.
• Intelligent generation of test IDs from existing element IDs for a seamless testing experience.
• Support for various file types, including HTML, Vue, and JSX.

• Visual Studio Code Marketplace

Launch Quick Open:

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter.:

ext install test-id-generator

By default Shift + Alt + T (Cmd + Shift + T for Mac) key combination inserts test id to all the html elements.

It checks the element for the id first. If the element has it, it copies it to the test id. If the element has not, it generates the test id by adding elementName to the defaultTestId from the config.

The attributeKeyword is for test id attribute (data-test, data-test-id, test-id ...)

The ignoreElements is for not adding test id to all the html elements. (<template>, <script>, <style> ...)

// .testidrc.json
{
  "attributeKeyword": "data-test-id",
  "ignoreElements": [
    "template",
    "script",
    "style",
    "body",
    "head",
    "html",
    "header",
    "footer",
    "meta",
    "title",
    "link"
  ],
  "defaultTestId": "test"
}

I believe in the power of collaboration! This project is open to contributions from the community. If you're passionate about testing in web development and want to contribute, check out the project on GitHub, and let's build something amazing together! 🤝✨

This project is licensed under the MIT License.