Seleniums “Info-Bar” verschiebt Click-Koordinaten?

Der Chrome zeigt während des Tests

Chrome is being controlled by automated test software

an? Das kann Dir die Click-Events verschieben (um etwa 100px nach oben) 🙄 Fix:

ChromeOptions options = new ChromeOptions();
options.addArguments("disable-infobars");
driver = new ChromeDriver(options);

ChromeOptions options = new ChromeOptions();

options.addArguments("disable-infobars");

driver = new ChromeDriver(options);

UPDATE: Ein paar Tage später sind die Koordinaten wieder verschoben; lag also nicht (nur?) daran!

Kommentare, die die Welt nicht braucht – LXIV

kalauer mitwoch! pic.twitter.com/faqYQHoA7W

— Alex (@alexmilde) June 6, 2018

Überlaufende Texte finden

Eine bessere ~~Übersetzung~~ Umschreibung für text-overflow ist mir nicht eingefallen 🙃

In jQuery ginge das so:

$.expr[':'].truncated = function (e) {
  // ggf. Style checken, bspw.
  // $(e).css('text-overflow') === 'ellipsis'
  return e.offsetWidth < e.scrollWidth;
};

// dann:
let items = $('.your-selector:truncated');

$.expr[':'].truncated = function (e) {

// ggf. Style checken, bspw.

// $(e).css('text-overflow') === 'ellipsis'

return e.offsetWidth < e.scrollWidth;

};

// dann:

let items = $('.your-selector:truncated');

Cross-post; basiert auf den Antworten hier. Bonus: In Selenium geht das so:

WebElement element = ...;

// element is truncated?
double offsetWidth = Double.parseDouble(element.getAttribute("offsetWidth"));
double scrollWidth = Double.parseDouble(element.getAttribute("scrollWidth"));
assertThat(offsetWidth < scrollWidth).isTrue();

// truncation style is ellipsis?
String overflowStyle = element.getCssValue("text-overflow");
assertThat(overflowStyle).isEqualTo("ellipsis");

WebElement element = ...;

// element is truncated?

double offsetWidth = Double.parseDouble(element.getAttribute("offsetWidth"));

double scrollWidth = Double.parseDouble(element.getAttribute("scrollWidth"));

assertThat(offsetWidth < scrollWidth).isTrue();

// truncation style is ellipsis?

String overflowStyle = element.getCssValue("text-overflow");

assertThat(overflowStyle).isEqualTo("ellipsis");

bäm.

Selenium: Touchgesten simulieren

Wer mit Selenium Touchgesten simulieren will (hier: Pull-to-Refresh 🙂), der benötigt zuerst mal einen Browser, der Touch unterstützt:

Map<String, Object> someDeviceMetrics = ...; // see link

Map<String, Object> emulation = new HashMap<>();
emulation.put("deviceMetrics", someDeviceMetrics);
emulation.put("userAgent", "<some user agent>");

ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("mobileEmulation", emulation);

WebDriver driver = new RemoteWebDriver(SELENIUM_URL, options);

Map<String, Object> someDeviceMetrics = ...; // see link

Map<String, Object> emulation = new HashMap<>();

emulation.put("deviceMetrics", someDeviceMetrics);

emulation.put("userAgent", "<some user agent>");

ChromeOptions options = new ChromeOptions();

options.setExperimentalOption("mobileEmulation", emulation);

WebDriver driver = new RemoteWebDriver(SELENIUM_URL, options);

Der Rest ist dann einfach:

public class Browser implements HasTouchScreen, ... {
  // ...

  @Override
  public TouchScreen getTouch() {{
    return driver instanceof HasTouchScreen ?
        ((HasTouchScreen) driver).getTouch() :
        new RemoteTouchScreen(new RemoteExecuteMethod((RemoteWebDriver) driver));
  }
}

// ...

// offsetX/offsetY = the distance to be panned
new TouchActions(getBrowser())
      .flick(target, offsetX, offsetY, 200)
      .perform();

public class Browser implements HasTouchScreen, ... {

// ...

@Override

public TouchScreen getTouch() {{

return driver instanceof HasTouchScreen ?

((HasTouchScreen) driver).getTouch() :

new RemoteTouchScreen(new RemoteExecuteMethod((RemoteWebDriver) driver));

}

// ...

// offsetX/offsetY = the distance to be panned

new TouchActions(getBrowser())

.flick(target, offsetX, offsetY, 200)

.perform();

(wenn man davon absieht, dass der vierte Parameter laut Sourcecode 0, 1 oder 2 sein sollte, nicht 200 – getestet mit selenium-java 3.9.1)

Javascript: “Pull to refresh”

Pull-to-refresh in (mobilen!) Webseiten nachzubauen, ist jetzt keine Raketenwissenschaft, aber doch so viel Aufwand, dass sich ggf. eine Library lohnt. Viele (? einige? apeatling, ember-gestures, …) bauen aber auf hammer auf, und das hat einen Bug (Beispiel, es gibt weitere Tickets) im Zusammenspiel von Panning (also dem “Pull” in “Pull-to-refresh”) und Scrolling. Zusammengefasst: Es geht nur eines von beiden. Mit ein wenig Drumherumgehacke bekommt man das etwas näher zusammengeführt, aber entweder kommt PanEnd dann gar nicht (was das “refresh” schwierig macht), oder bspw. die PanMove-Events kommen nicht zuverlässig (wodurch man den “pull” nicht 1:1 an den Finger des Nutzers hängen kann).

Ein npm-Modul, das nicht auf hammer aufbaut, wäre pulltorefreshjs (getestet mit 0.1.11 und 0.1.13):

PullToRefresh.init({
  mainElement: '.myCssSelector',
  onRefresh: () => {
    console.log('hello moto')
  },
});

PullToRefresh.init({

mainElement: '.myCssSelector',

onRefresh: () => {

console.log('hello moto')

});

In Ember sieht das als Komponente so aus:

import Component from '@ember/component';
import PullToRefresh from 'npm:pulltorefreshjs';
import {get, set} from '@ember/object';
import {getOwner} from '@ember/application';
import {inject as service} from '@ember/service';

export default Component.extend({
  classNames: ['pull-to-refresh'],

  router: service(),
  currentRouteInstance: undefined,

  didInsertElement() {
    this._super(...arguments);

    const owner = getOwner(this);
    const currentPath = owner.lookup('controller:application').currentPath;
    set(this, 'currentRouteInstance', owner.lookup(`route:${currentPath}`));

    // TODO use unique identifier for mainElement, store result of init()
    PullToRefresh.init({
      mainElement: '.pull-to-refresh',
      onRefresh: () => {
        get(this, 'currentRouteInstance').refresh();
      },
    });
  },

  willDestroyElement() {
    this._super(...arguments);

    // TODO destroy current ptr only; id is returned by init()
    PullToRefresh.destroyAll();
  },
});

import Component from '@ember/component';

import PullToRefresh from 'npm:pulltorefreshjs';

import {get, set} from '@ember/object';

import {getOwner} from '@ember/application';

import {inject as service} from '@ember/service';

export default Component.extend({

classNames: ['pull-to-refresh'],

router: service(),

currentRouteInstance: undefined,

didInsertElement() {

this._super(...arguments);

const owner = getOwner(this);

const currentPath = owner.lookup('controller:application').currentPath;

set(this, 'currentRouteInstance', owner.lookup(`route:${currentPath}`));

// TODO use unique identifier for mainElement, store result of init()

PullToRefresh.init({

mainElement: '.pull-to-refresh',

onRefresh: () => {

get(this, 'currentRouteInstance').refresh();

});

willDestroyElement() {

this._super(...arguments);

// TODO destroy current ptr only; id is returned by init()

PullToRefresh.destroyAll();

});

Auf dem Handy sollte das so schon funktionieren. Auf dem Desktop hatte ich das Phänomen, dass Hochcrollen immer erst beim zweiten mal funktioniert hat (und auch dann nur, wenn zwischen Versuch 1 und 2 nicht zu viel Zeit lag). Weil: Die Lib immer beim Hochscrollen den Loader anzeigt, wenn man die Funktion shouldPullToRefresh nicht vom default !window.scrollY ummapt, bspw. auf

shouldPullToRefresh: () => {
  let scrollTop = this.$().parent()[0].scrollTop;
  return scrollTop === 0;
},

shouldPullToRefresh: () => {

let scrollTop = this.$().parent()[0].scrollTop;

return scrollTop === 0;

Hochscrollen geht sonst nur, so lange der Loader angezeigt wird 🙃

Generische npm Module in Ember

Wer, wie ich, die ~~verfilzte~~ komplexe Javascript-Umgebung etwas… “unübersichtlich” findet, und sich fragt, wie zur Hölle man ein nicht-Ember-spezifisches npm-Modul in Ember importiert, dem kann geholfen werden:

Erst Browserify:

npm install ember-browserify --save-dev

1	npm install ember-browserify --save-dev

dann, voilà:

import PullToRefresh from 'npm:pulltorefreshjs';

1	import PullToRefresh from 'npm:pulltorefreshjs';

Neues Fenster in Web Apps

Anwendungsfall: Eine Bedienungsanleitung in Form eines PDFs in einem neuen Fenster/Tab öffnen. Internet sagt (hier am Beispiel Ember):

window.open('anleitung.pdf');

1	window.open('anleitung.pdf');

Das funktioniert grundsätzlich auch in Fullscreen Web Apps, aber da solche Apps keine Browsernavigation anzeigen, kommt man ggf. „nie wieder“ aus der geöffneten Seite raus. Abhilfe schafft

var a = document.createElement('a');
a.setAttribute('href', 'anleitung.pdf');
a.setAttribute('target', '_blank');
a.click();

var a = document.createElement('a');

a.setAttribute('href', 'anleitung.pdf');

a.setAttribute('target', '_blank');

a.click();

, was anleitung.pdf im „richtigen“ Browser anzeigt, statt innerhalb der App.

Kommentare, die die Welt nicht braucht – LXIII

Sabuwer..!! Funktioniert!!!

Kommentare, die die Welt nicht braucht – LXII

https://twitter.com/crusy/status/978882528974114817

https://twitter.com/crusy/status/978883549494431744

English for runaways, but sponge over.

Java: application.properties ohne Spring

Wer, bsplw. aus Analogiegründen, seine Konfiguration in eine application.properties aus lagern will, selbst wenn dieses projekt kein Spring-Projekt ist, der kann Apache Commons Configuration verwenden (via, Achtung, erfordert commons-beanutils):

static final org.apache.commons.configuration2.Configuration CONFIG;

static {
  try {
    CONFIG = new Configurations().properties(new File("application.properties"));
  } catch (ConfigurationException e) {
    throw new RuntimeException(e);
  }
}

static String getServerName() {
  return CONFIG.getString("dbIp", "localhost");
}

static final org.apache.commons.configuration2.Configuration CONFIG;

static {

try {

CONFIG = new Configurations().properties(new File("application.properties"));

} catch (ConfigurationException e) {

throw new RuntimeException(e);

}

static String getServerName() {

return CONFIG.getString("dbIp", "localhost");

}

mit:

some.key=foo
some.other.key=bar

# use this to overwrite System properties:
dbIp = ${sys:dbIp}

some.key=foo

some.other.key=bar

# use this to overwrite System properties:

dbIp = ${sys:dbIp}

crusy.net

♪ Commit ins Abenteuerland ♫

Category Archives for Coding