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