Aangepaste JavaScript

Aangepaste is een controle die je zelf maakt. Je schrijft een stukje JavaScript, Silktide voert dit in de browser uit op elke pagina die wordt getest en alles wat je stukje code rapporteert, wordt een bevinding op die pagina's.

Zo kun je alles testen wat belangrijk is voor je organisatie, maar wat Silktide niet standaard test: een interne stij lregel, een vereist trackingfragment, een verouderd component dat niet meer mag worden weergegeven, enzovoort.

Zo los je het op

Bevindingen van deze controle betekenen wat je stukje code bepaalt dat ze betekenen. Jij bepaalt dus hoe je ze oplost. Schrijf het message van elke bevinding zo dat een collega die het stukje code nog nooit heeft gezien, weet wat er moet worden gewijzigd.

Zo test Silktide dit

Je stukje code wordt in de browser uitgevoerd op elke pagina die Silktide test, nadat de pagina is geladen, als de body van een async JavaScript-functie. Je kunt dus rechtstreeks await en return gebruiken.
Alles wat je stukje code retourneert, wordt omgezet in bevindingen:
- Retourneer een array met objecten om meerdere bevindingen te rapporteren, waarbij elk object een element op de pagina markeert:

// Rapporteer elke afbeelding die meer dan 500 px breed is als bevinding
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: 'Afbeelding is breder dan 500 px',
}));

Elk object kan een selector bevatten (een CSS-selector voor het element dat moet worden gemarkeerd), text (wat voor de bevinding wordt weergegeven), severity (low, medium of high) en een message waarin het probleem wordt uitgelegd.
Retourneer een gewone tekenreeks om één bevinding met lage ernst voor de pagina te rapporteren.
Retourneer een lege array, of niets, om te rapporteren dat er niets mis is met de pagina.

Als het stukje code een fout veroorzaakt of iets retourneert wat niet wordt ondersteund, rapporteert de controle de fout op de pagina, zodat je het stukje code kunt debuggen.

Omdat het stukje code in de browser wordt uitgevoerd wanneer de pagina wordt gedownload, wordt een wijziging in het stukje code pas van kracht wanneer pagina's opnieuw worden getest, niet direct.

Problemen oplossen

Mijn stukje code werkt in de browserconsole, maar niet hier

Het stukje code vormt de body van een functie. Statements zoals return worden dus op het hoogste niveau verwacht. Zorg ervoor dat het stukje code de bevindingen retourneert in plaats van ze te loggen met console.log, want dat wordt niet verzameld.

Bevindingen markeren het verkeerde element

De selector die je retourneert, moet op het moment dat de pagina werd getest precies één element op de pagina vinden. Gebruik bij voorkeur stabiele kenmerken (id's, data-*-kenmerken) in plaats van positionele selectors zoals :nth-child, die niet meer werken wanneer de inhoud verschuift.