Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
eslint-plugin-test-selectors
Advanced tools
Makes sure test DOM attributes (e.g. data-test-id) are added to interactive DOM elements.
Enforces that a data-test-id
attribute is present on interactive DOM elements to help with UI testing.
<button>Download</button>
<button data-test-id="download-button">Download</button>
1.3.0
- Add auto-fix capability to onClick
(thank you @bkonuwa and @pixelbandito). (#8)1.1.0
disabled
and readonly
attributes are now ignored by default. See Custom Rules Options to customize this behavior. (fixes #3)plugin:test-selectors/recommended
now emits warnings by default instead of errors. For the old stricter behavior which emits errors, folks can use plugin:test-selectors/recommendedWithErrors
(fixes #4)1.0.1
- fix bug with inline functions (fixes #1)1.0.0
- initial releaseYou'll first need to install ESLint, which requires Node.js (note that eslint-plugin-test-selectors
requires Node.js 10+):
$ npm i eslint --save-dev
Next, install eslint-plugin-test-selectors
:
$ npm install eslint-plugin-test-selectors --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-test-selectors
globally.
Add test-selectors
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"test-selectors"
]
}
If you want to use all the recommended default rules, you can simply add this line to the extends
section of your .eslintrc
configuration:
{
"extends": [
"plugin:test-selectors/recommended"
]
}
By default, this will run all Supported Rules and emit eslint warnings. If you want to be more strict, you can emit eslint errors by instead using plugin:test-selectors/recommendedWithErrors
.
Another option: you can also selectively enable and disable individual rules in the rules
section of your .eslintrc
configuration. For instance, if you only want to enable the test-selectors/button
rule, skip the extends
addition above and simply add the following to the rules
section of your .eslintrc
configuration:
{
"rules": {
"test-selectors/button": ["warn", "always"]
}
}
If you like most of the recommended rules by adding the extends
option above, but find one in particular to be bothersome, you can simply disable it:
{
"rules": {
"test-selectors/anchor": "off"
}
}
Note: see Supported Rules below for a full list.
All tests can be customized individually by passing an object with one or more of the following properties.
The default test attribute expected is data-test-id
, but you can override it with whatever you like. Here is how you would use data-some-custom-attribute
instead:
{
"rules": {
"test-selectors/onChange": ["warn", "always", { "testAttribute": "data-some-custom-attribute" }]
}
}
By default all elements with the disabled
attribute are ignored, e.g. <input disabled />
. If you don't want to ignore this attribute, set ignoreDisabled
to false
:
{
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}
By default all elements with the readonly
attribute are ignored, e.g. <input readonly />
. If you don't want to ignore this attribute, set ignoreReadonly
to false
:
{
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}
Only supported on button
rule, this option will exempt React components called Button from the rule.
{
"rules": {
"test-selectors/button": ["warn", "always", {"htmlOnly": true}]
}
}
test-selectors/anchor
test-selectors/button
test-selectors/input
test-selectors/onChange
test-selectors/onClick
test-selectors/onKeyDown
test-selectors/onKeyUp
test-selectors/onSubmit
If you don't want these test attributes added in production, you can use something like babel-plugin-jsx-remove-data-test-id
Why data
attributes and not id
or class
? Check out some of the following:
FAQs
Makes sure test DOM attributes (e.g. data-test-id) are added to interactive DOM elements.
The npm package eslint-plugin-test-selectors receives a total of 7,967 weekly downloads. As such, eslint-plugin-test-selectors popularity was classified as popular.
We found that eslint-plugin-test-selectors demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.