{{post.title}}
{{post.body}}
Enabling better Test selectors in Ember.js applications.
npm install ember-test-selectorsember-test-selectors
==============================================================================
Enabling better element selectors in Ember.js tests
> [!NOTE]
> ember-test-selectors was written and is maintained by Mainmatter and contributors.
> We offer consulting, training, and team augmentation for Ember.js – check out our website to learn more!
Features
------------------------------------------------------------------------------
- Removes attributes starting with data-test- from HTML tags and
component/helper invocations in your templates for production builds
- Removes properties starting with data-test- from your JS objects like
component classes for production builds
More information on why that is useful are available on our
blog!
Compatibility
------------------------------------------------------------------------------
- Ember 3.8 to Ember 4.12
- Ember CLI 3.8 or above
- Node.js 18 or above
If your Ember app is an Embroider+Vite app, you can use strip-test-selectors classic addon, which supports Ember 3.28 or above.
Installation
------------------------------------------------------------------------------
``bash`
ember install ember-test-selectors
Usage
------------------------------------------------------------------------------
In your templates you are now able to use data-test-* attributes, which areproduction
automatically removed from builds:
` {{post.body}}hbs`
{{post.title}}
Once you've done that you can use attribute selectors to look up and interact
with those elements:
`js
assert.dom('[data-test-post-title]').hasText('Ember is great!');
await click('[data-test-like-button]');
`
You can use the same syntax also for component invocations:
`hbs`
Inside the Spinner component template the data-test-spinner attribute will...attributes
be applied to the element that has on it, or on the componentdiv
wrapper element if you don't use tagName = ''.
If you want to use ember-test-selectors in an addon make sure that it appears
in the dependencies section of the package.json file, not in thedevDependencies. This ensures that the selectors are also stripped correctly
even if the app that uses the addon does not use ember-test-selectors itself.
Configuration
------------------------------------------------------------------------------
You can override when the data-test-* attributes should be stripped from theember-cli-build.js
build by modifying your file:
`js`
var app = new EmberApp({
'ember-test-selectors': {
strip: false
}
});
strip accepts a Boolean value and defaults to !app.tests, which meansember test
that the attributes will be stripped for production builds, unless the build
was triggered by . That means that if you useember test --environment=production the test selectors will still work, butember build -prod` they will be stripped out.
for
License
------------------------------------------------------------------------------
ember-test-selectors is developed by and ©
Mainmatter GmbH and contributors. It is released under the
MIT License.
ember-test-selectors is not an official part of Ember.js
and is not maintained by the Ember.js Core Team.