{"id":17594,"library":"eslint-plugin-angular-test-ids","title":"ESLint Plugin for Angular Test ID Enforcement","description":"eslint-plugin-angular-test-ids is an ESLint plugin designed to enforce the presence of specific attributes, typically `data-test`, on HTML elements within Angular templates. Currently at version `1.0.6`, this plugin offers a practical solution for development teams where end-to-end testing strategies rely on stable identifiers. While the plugin's author expresses a preference for user-visible labels, it acknowledges the widespread industry need for test IDs often mandated by QA processes. Key differentiators include its deep integration with `@angular-eslint/template-parser` for accurate Angular template analysis and highly flexible configuration options. Users can customize the required attribute name (e.g., `data-test`, `test-id`) and precisely define the list of elements that must include this attribute, supporting both native HTML elements and Angular Material components. This allows teams to tailor enforcement rules to their project's specific requirements, making it a robust tool for maintaining testability in Angular applications.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":"git@github.com:undsoft/eslint-plugin-angular-test-ids","tags":["javascript","eslint","eslintplugin","eslint-plugin","angular"],"install":[{"cmd":"npm install eslint-plugin-angular-test-ids","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-angular-test-ids","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-angular-test-ids","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for parsing Angular HTML templates to apply rules.","package":"@angular-eslint/template-parser","optional":false},{"reason":"The core ESLint engine required to run the plugin's rules.","package":"eslint","optional":false},{"reason":"Angular projects are TypeScript-based; template parser often relies on a TypeScript environment.","package":"typescript","optional":false}],"imports":[{"note":"Registers the plugin within your ESLint configuration, making its rules available for use.","wrong":"\"plugins\": [\"@undsoft/eslint-plugin-angular-test-ids\"]","symbol":"plugin:angular-test-ids","correct":"\"plugins\": [\"angular-test-ids\"]"},{"note":"Enables the primary rule of the plugin to enforce `data-test` attributes on specified elements. The rule must be prefixed with `angular-test-ids/`.","wrong":"\"rules\": {\"require-test-id\": [\"error\"]}","symbol":"rule:require-test-id","correct":"\"rules\": {\"angular-test-ids/require-test-id\": [\"error\"]}"},{"note":"Rule options are provided as a JSON object in the second element of the rule's configuration array. Keys must be quoted as per JSON specification.","wrong":"\"angular-test-ids/require-test-id\": [\"error\", {attribute: \"data-e2e\"}]","symbol":"rule:options","correct":"\"angular-test-ids/require-test-id\": [\"error\", {\"attribute\": \"data-e2e\", \"addElements\": [\"app-my-component\"]}]"}],"quickstart":{"code":"{\n  \"files\": [\"*.html\"],\n  \"parser\": \"@angular-eslint/template-parser\",\n  \"plugins\": [\"angular-test-ids\"],\n  \"rules\": {\n    \"angular-test-ids/require-test-id\": [\n      \"error\",\n      {\n        \"attribute\": \"data-test-id\",\n        \"addElements\": [\"div[role='button']\"]\n      }\n    ]\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 2020,\n    \"sourceType\": \"module\"\n  }\n}","lang":"json","description":"Configures ESLint in an Angular project to use the `angular-test-ids` plugin, enforcing a custom `data-test-id` attribute on buttons, inputs, and custom `div[role='button']` elements."},"warnings":[{"fix":"Ensure your `.eslintrc` file explicitly defines `\"parser\": \"@angular-eslint/template-parser\"` for HTML files, or extends a configuration that does, such as `\"extends\": [\"plugin:@angular-eslint/template/recommended\"]`.","message":"This plugin critically relies on `@angular-eslint/template-parser` to correctly process Angular template files. Incorrect parser configuration will prevent rules from running or lead to parsing errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the `addElements` option to append custom selectors to the default list, or `overrideElements` to replace it entirely, within the `angular-test-ids/require-test-id` rule configuration.","message":"The default elements that require a test ID include common native HTML and Angular Material components. If your project uses custom components or other UI libraries, you will need to extend or override this list.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Add `\"angular-test-ids\"` to the `plugins` array in your `.eslintrc` file.","cause":"The 'angular-test-ids' plugin has not been correctly registered in the ESLint configuration's `plugins` array.","error":"ESLint: Definition for rule 'angular-test-ids/require-test-id' was not found"},{"fix":"Ensure that the `parser` option in your `.eslintrc` (specifically for HTML files) is set to `\"@angular-eslint/template-parser\"`.","cause":"ESLint does not know how to parse Angular HTML template files without a specified parser, typically `@angular-eslint/template-parser`.","error":"Parsing error: You have to provide an explicit 'parser' option."},{"fix":"Verify that option names like `attribute`, `overrideElements`, and `addElements` are spelled correctly and enclosed in double quotes as JSON object keys.","cause":"Incorrect option name or invalid JSON syntax (e.g., unquoted keys) within the rule options object.","error":"Property 'attribute' is not known."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}