Benutzerdefiniertes JavaScript

Benutzerdefiniertes ist eine Prüfung, die Sie selbst erstellen. Sie schreiben einen JavaScript-Codeausschnitt (Snippet), Silktide führt ihn im Browser auf jeder getesteten Seite aus, und alles, was Ihr Snippet meldet, wird zu Ergebnissen auf diesen Seiten.

Dies ermöglicht es, alles zu testen, was Ihrer Organisation wichtig ist und was Silktide nicht standardmäßig abdeckt: eine interne Stilregel, ein erforderliches Tracking-Snippet, eine veraltete Komponente, die nicht mehr erscheinen sollte, und so weiter.

So beheben Sie das Problem

Die Ergebnisse dieser Prüfung bedeuten genau das, was Ihr Snippet festlegt, daher definieren Sie auch die Korrektur. Formulieren Sie die message jedes Ergebnisses so, dass eine Kollegin oder ein Kollege, der das Snippet noch nie gesehen hat, weiß, was zu ändern ist.

So testet Silktide dies

Ihr Snippet läuft im Browser auf jeder von Silktide getesteten Seite, nachdem die Seite geladen wurde, als Rumpf einer async JavaScript-Funktion - Sie können also await und return direkt verwenden.
Alles, was Ihr Snippet zurückgibt, wird in Ergebnisse umgewandelt:
- Geben Sie ein Array von Objekte zurück, um mehrere Ergebnisse zu melden; jedes hebt ein Element auf der Seite hervor:

// Melde jedes Bild mit mehr als 500 px Breite als Ergebnis
const wide = [...document.querySelectorAll('img')].filter(img => img.width > 500);
return wide.map(img => ({
  selector: 'img[src="' + img.getAttribute('src') + '"]',
  text: img.getAttribute('src'),
  severity: 'medium',
  message: 'Bild ist breiter als 500 px',
}));

Jedes Objekt kann einen selector (ein CSS-Selektor für das hervorzuhebende Element), text (was für das Ergebnis angezeigt werden soll), severity (low, medium oder high) und eine erklärende message enthalten.
Geben Sie einen einfachen String zurück, um ein einzelnes Ergebnis mit niedrigem Schweregrad für die Seite zu melden.
Geben Sie ein leeres Array oder nichts zurück, um die Seite als in Ordnung zu melden.

Wenn das Snippet einen Fehler wirft oder etwas Nichtunterstütztes zurückgibt, meldet die Prüfung den Fehler auf der Seite, damit Sie das Snippet debuggen können.

Da das Snippet im Browser ausgeführt wird, wenn die Seite heruntergeladen wird, werden Änderungen am Snippet erst beim nächsten erneuten Testen der Seiten wirksam, nicht sofort.

Fehlerbehebung

Mein Snippet funktioniert in der Browserkonsole, aber nicht hier

Das Snippet ist der Rumpf einer Funktion, daher werden Anweisungen wie return auf oberster Ebene erwartet. Stellen Sie sicher, dass das Snippet seine Ergebnisse zurückgibt, anstatt sie mit console.log zu protokollieren; diese Ausgabe wird nicht erfasst.

Ergebnisse heben nicht das richtige Element hervor

Der von Ihnen zurückgegebene selector muss zum Zeitpunkt der Prüfung der Seite eindeutig mit dem Element übereinstimmen. Bevorzugen Sie stabile Attribute (IDs, data-*-Attribute) gegenüber Positionsselektoren wie :nth-child, die brechen, wenn sich Inhalte verschieben.