angular-testid v0.0.4
AngularTestid
This library was generated with Angular CLI version 8.2.14.
It contains a simple directive [testId] that allows adding markers into your DOM which are easy to lookup using simple
CSS attribute query. Such markers can be disabled/enabled on the fly event in production environment. This way, you can
make your application easier to test via automated test tools while not leaking your test markers to the public, making
page scrapers life harder ;)
Usage
First install angular-testid with npm compatible package manager of your choice e.g.
npm install angular-testid
then simply add it to one of your modules in the Angular application, e.g. to `application.module.ts
imports: [
BrowserModule,
AppRoutingModule,
AngularTestidModule /
],You can optionally include additional configuration tje the AngularTestidModule using static with()
imports: [
BrowserModule,
AppRoutingModule,
AngularTestidModule.with({...} as TestidOptions)
],To use it in your application, use testId on your component of choosing
<button class="primary xyz" testId='continue-button'"> which will render as
<button class="primary xyz" testid="continue-button">Kontynuuj</button>which can be easily obtained via
document.querySelector("[testid=continue-button]");Such tag is will survive style changes, language changes and event element change, and still your e2e tests will pass ( most probably)
Enablind/disabling
It is possible to enable/disable test tags on the runtime using a LocalStorage. Whenever there is a following entry
present in the storage
tagid=true tags will appear in the DOM. Trigger key and value can be modified using TestidOptions
Configuration options
Any of following options can be provider to module configuration via AngularTestidModule.with(options) method. Non
existend keys will be filled in with the default values
TestidOptions type:
| Property | Descritption | Default value |
|---|---|---|
tag | Tag name to be rendered as test tag | testid |
enabledByDefault | Whenever test tag is always rendered, or only if enable via LocalStorage | false |
enableKey | key that is inspected in the LocalStorage to enable/disable test tags | testid |
enableValue | if this value is present under enableKey key in LocalStorage, tags will be rendered into the DOM. Different value or absense of it, disables tags | true (string) |
LocalStorage event detection
Due to fact how storage events are fired, changes will not be picked up when you change the value of enableKey using Javascript, at least not on the same page.
https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
However, making via developer tools should do the tick. In cases when this does not work, reload the application with preset value in the local storage, and you are good to go