{"id":15317,"library":"ember-test-selectors","title":"Ember Test Selectors","description":"Ember Test Selectors is an Ember.js addon designed to facilitate robust and stable UI testing by providing a convention for marking elements in templates with `data-test-*` attributes. These attributes are automatically stripped from production builds to minimize bundle size and prevent leakage of internal testing details. The current stable version is 7.1.0, released recently with a new plugin for Vite. The project maintains an active release cadence, typically aligning with Ember and Node.js LTS updates. Key differentiators include its tight integration with the Ember build pipeline to automatically remove test attributes and its widespread adoption within the Ember ecosystem for defining clear test-only hooks. It supports Ember versions 3.8 to 4.12 and Node.js 18 or above, with a separate `strip-test-selectors` package available for Embroider+Vite applications.","status":"active","version":"7.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/mainmatter/ember-test-selectors","tags":["javascript","ember-addon"],"install":[{"cmd":"npm install ember-test-selectors","lang":"bash","label":"npm"},{"cmd":"yarn add ember-test-selectors","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-test-selectors","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[],"quickstart":{"code":"ember install ember-test-selectors\n\n// app/templates/components/my-component.hbs\n
\n

{{post.title}}

\n

{{post.body}}

\n \n
\n\n// app/tests/integration/components/my-component-test.js\nimport { module, test } from 'qunit';\nimport { setupRenderingTest } from 'ember-qunit';\nimport { render, click } from '@ember/test-helpers';\nimport { hbs } from 'ember-cli-htmlbars';\n\nmodule('Integration | Component | my-component', function(hooks) {\n setupRenderingTest(hooks);\n\n test('it renders post title and handles like click', async function(assert) {\n this.set('post', { id: '123', title: 'Ember is great!', body: '...' });\n await render(hbs``);\n\n assert.dom('[data-test-post-title]').hasText('Ember is great!');\n assert.dom('[data-test-resource-id=\"123\"]').exists();\n\n await click('[data-test-like-button]');\n assert.ok(true, 'Like button was clicked'); // Replace with actual assertion\n });\n});","lang":"javascript","description":"Demonstrates how to install the addon, use `data-test-*` attributes in Ember templates, and then select those elements in an integration test."},"warnings":[{"fix":"Upgrade your Node.js environment to a supported LTS version (18, 20, or >= 22).","message":"Support for Node.js versions 12, 14, and 16 has been removed. Ensure your project is running on Node.js 18, 20, or >= 22.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Review component templates for `data-test-*` usage. If attributes are not appearing, ensure the component's root element or a specific element within the component includes `...attributes`.","message":"Deprecated automatic attribute binding behavior for `data-test-*` attributes has been fully removed. You must explicitly apply `...attributes` to the target element within components.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Update `ember-cli-babel` in your project to version 6 or higher, ideally to version 8 or the latest compatible with your Ember CLI version.","message":"Support for `ember-cli-babel` v5 has been dropped. Projects must upgrade `ember-cli-babel` to a compatible version (e.g., v8 for Ember 3.28+).","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Upgrade your Ember.js application to version 3.8 or newer. Consider using `ember-cli-update` for assistance.","message":"This addon drops support for Ember.js versions below v3.8 due to an update of `ember-cli-htmlbars`.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Modify your `ember-cli-build.js` file: `var app = new EmberApp({'ember-test-selectors': { strip: false }});` to disable stripping, or implement custom logic for `strip`.","message":"By default, `data-test-*` attributes are stripped from production builds (`ember build -prod`) but are present for `ember test --environment=production`. If you need them in production or want to strip them differently, you must configure this behavior.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade Node.js to version 18, 20, or 22+.","cause":"Running `ember-test-selectors` with an unsupported Node.js version (e.g., 12, 14, 16).","error":"Error: Node.js version X is not supported by ember-test-selectors."},{"fix":"Ensure your component's template has `...attributes` on the root HTML element or the specific element where the attribute should be applied. For example: `
...
`.","cause":"Attempting to pass `data-test-*` attributes to an Ember component without `...attributes` being explicitly spread on an element within its template, or using an older unsupported binding method.","error":"Assertion Failed: You must apply `...attributes` to an HTML element in your component."},{"fix":"Update `ember-cli-babel` to a compatible version for your Ember CLI setup, typically `^8.0.0` for modern Ember projects, by running `npm install ember-cli-babel@latest`.","cause":"`ember-cli-babel` is an outdated or missing dependency, often related to `ember-test-selectors` compatibility requirements.","error":"Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'ember-cli-babel'"},{"fix":"To enable `data-test-*` attributes in production builds, modify `ember-cli-build.js`: `var app = new EmberApp({'ember-test-selectors': { strip: false }});`. Be aware that this will increase bundle size.","cause":"The `data-test-*` attributes are automatically stripped from production builds by default, making them unavailable in that environment.","error":"document.querySelector('[data-test-some-element]') returns null in production builds."}],"ecosystem":"npm"}