Protractor configuration Headless Chrome and Firefox

To run Selenium tests in Firefox and Chrome in Headless mode with Protractor, the following configuraton can be used in the protractor.conf:

exports.config = {
....
  multiCapabilities: [
    {
      browserName: 'chrome',
      chromeOptions: {
        'args': ['--headless']
      },
    },
    {
      browserName: 'firefox',
      firefoxOptions: {
        args: ['--headless']
      },
      'moz:firefoxOptions': {
        args: ['--headless']
      }
    },
  ],
...
};

Angular ngx-translate TranslateLoader ohne http Modul

Compatibility with old browsers, as the Firefox version <= 5 to reach, can you do that angular http Do not use module. The NGX-translate Modules bneötigt a loader, It loads the correct language via AJAX request. Also with the XMLHttpRequest and an Observalbe solve this can:

import {Injectable} from '@angular/core';
import {TranslateLoader} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class LanguageLoader implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.create(function (observer) {
    let url = `./assets/i18n/${lang}.json?=` + new Date().getTime();
    let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE || xhr.readyState == 4) {
              let response = JSON.parse(xhr.responseText);
              observer.next(response);
              observer.complete();
        }
      }
      xhr.open('GET', url, true);
      xhr.send(null);
    });
  }
}

In the app.module.TS can you then embed the loader as follows:

TranslateModule.forRoot({
  loader: {provide: TranslateLoader, useClass: LanguageLoader}
})

JavaScript debugging on the console with console.table()

The new JavaScript method Console.table() is very hilfgreich, to represent objects and arrays on the console.

Example:

var data = [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        null,
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        null,
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        null,
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        null,
        {"id": "Help"},
        {"id": "About", "label": "About Adobe CVG Viewer..."}
    ];

console.table(data);

Produces the following output in the developer tools in the chrome:

console-table

 

Angular 5 URL without index.html

At an angular application you must call by default the index.html, Thus starts the application on an Apache Web server. This also without / index.html with the domain alone only (www.foo.de) funktioneirt, do you set this:

1. Create a .htaccess file in src/.htaccess with the content:

DirectoryIndex index.html

2. Change the base URL in the src/index.html

<base href="">

3. GGF. Add .htaccess to the build process in the .angular cli.json

"apps": [
  {
    "assets": [
      "assets",
      "favicon.ico",
      ".htaccess"
    ],

 

Configure angular German localization

To configure the German language for Fehlermeldugen and also the date format angular from Version2, do one the following set in the app.modules.ts:

...
import { LOCALE_ID} from '@angular/core';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeDe, localeDeExtra);

@NgModule({
 providers: [
 { provide: LOCALE_ID, useValue: 'de' },
 ]
})

Javascript disable all readonly Dropdowns and send via Form

Readonly select-Tags are not allowed in HTML until now, but can be used.

An alternative would be to use the disabled = true attribute, but this will not send the select value on form submission.

An easy solution would be to disable the selection with Javascript and leave it readonly:

$( document ).ready(function() {
    $('select[readonly="readonly"]').css('pointer-events','none');
});

The only problem is, that you can still tab throw the form and select elements with your keyboard but the mouse can not select element from the dropdown.

Create animations with JavaScript

Small animation, like that disappear a div block, can setTimeout JavaScript very easy with the function() create.

The logic is always the same:

For each movement frame the size or Posiition of object is changed using the setTimeout function at a certain time, so that at the end of strung together an animation comes out for the human eye.

Bsp:
[inline]

Click me

[script type="text/javascript"]// < ![CDATA[
var duration = 10; //seconds
var running = 0
var element;

function SetHeight(height) {

element.style.height = height + "px";
//console.responsen>("Ajax Call Success"); }, error: function (response) { handleError(response); } } ); return response; }(height);
}
function hideObject() {
//console.responsen>("Ajax Call Success"); }, error: function (response) { handleError(response); } } ); return response; }("hide");
element.style.display = 'none';
}

function removeObject(id) {
if(running) return
running = true;

element = document.getElementById(id);
height = element.offsetHeight;
var until = height;
var i;
for (i = 0; i <= until; i += 1) {
height = height - 1;
setTimeout("SetHeight(" + height + ")", i * duration);
}
i = 1
setTimeout("hideObject();", i * duration);
}
// ]]>

[/script]
[/inline] more…

TinyMCE focus and blur events JavaScript

You can treat as follows the TinyMCE focus and blur events with JavaScript:

        <script type="text/javascript">
            $( window ).load(function() {
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "focus", function(){
                    console.log("focus");
                });
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "blur", function(){
                    console.log("blur");
                });
            });
        </script>