
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
ember-test-selectors
Advanced tools
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!
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!
If your Ember app is an Embroider+Vite app, you can use strip-test-selectors classic addon, which supports Ember 3.28 or above.
ember install ember-test-selectors
In your templates you are now able to use data-test-*
attributes, which are
automatically removed from production
builds:
<article>
<h1 data-test-post-title data-test-resource-id={{post.id}}>{{post.title}}</h1>
<p>{{post.body}}</p>
<button data-test-like-button>Like</button>
</article>
Once you've done that you can use attribute selectors to look up and interact with those elements:
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:
<Spinner @color="blue" data-test-spinner>
Inside the Spinner
component template the data-test-spinner
attribute will
be applied to the element that has ...attributes
on it, or on the component
wrapper div
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 the
devDependencies
. This ensures that the selectors are also stripped correctly
even if the app that uses the addon does not use ember-test-selectors itself.
You can override when the data-test-*
attributes should be stripped from the
build by modifying your ember-cli-build.js
file:
var app = new EmberApp({
'ember-test-selectors': {
strip: false
}
});
strip
accepts a Boolean
value and defaults to !app.tests
, which means
that the attributes will be stripped for production builds, unless the build
was triggered by ember test
. That means that if you use
ember test --environment=production
the test selectors will still work, but
for ember build -prod
they will be stripped out.
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.
FAQs
Enabling better Test selectors in Ember.js applications.
The npm package ember-test-selectors receives a total of 60,943 weekly downloads. As such, ember-test-selectors popularity was classified as popular.
We found that ember-test-selectors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.