JavaScript personalizzato

Il personalizzato è un controllo che crei tu. Scrivi uno snippet JavaScript, Silktide lo esegue nel browser su ogni pagina che verifica e qualunque risultato restituito dallo snippet diventa un elemento rilevato su quelle pagine.

Questo consente di verificare qualsiasi aspetto importante per la tua organizzazione che Silktide non controlla direttamente: una regola di stile interna, uno snippet di tracciamento obbligatorio, un componente obsoleto che non dovrebbe più comparire e così via.

Come risolvere il problema

Gli elementi rilevati da questo controllo indicano qualunque cosa lo snippet stabilisca, quindi sei tu a definire come risolverli. Scrivi il valore message di ogni elemento rilevato in modo che un collega che non ha mai visto lo snippet sappia cosa modificare.

Come Silktide esegue questo controllo

Il tuo snippet viene eseguito nel browser su ogni pagina verificata da Silktide, dopo che la pagina è stata caricata, come corpo di una funzione JavaScript async: puoi quindi usare direttamente await e return.
Qualunque valore restituito dallo snippet viene trasformato in elementi rilevati:
- Restituisci un array di oggetti per segnalare più elementi rilevati, ciascuno dei quali evidenzia un elemento della pagina:

// Segnala come elemento rilevato ogni immagine di larghezza superiore a 500 px
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: 'L’immagine è più larga di 500 px',
}));

Ogni oggetto può includere selector (un selettore CSS per l’elemento da evidenziare), text (il testo da mostrare per l’elemento rilevato), severity (low, medium o high) e message, che spiega il problema.
Restituisci una semplice stringa per segnalare un singolo elemento rilevato con gravità bassa per la pagina.
Restituisci un array vuoto, oppure non restituire nulla, per indicare che la pagina è corretta.

Se lo snippet genera un errore o restituisce un valore non supportato, il controllo segnala l’errore sulla pagina, così puoi eseguire il debug dello snippet.

Poiché lo snippet viene eseguito nel browser quando la pagina viene scaricata, le modifiche allo snippet diventano effettive la prossima volta che le pagine vengono verificate nuovamente, non immediatamente.

Risoluzione dei problemi

Il mio snippet funziona nella console del browser, ma non qui

Lo snippet è il corpo di una funzione, quindi istruzioni come return sono previste al livello principale. Assicurati che lo snippet restituisca gli elementi rilevati invece di registrarli con console.log, che non viene raccolto.

Gli elementi rilevati non evidenziano l’elemento corretto

Il selector restituito deve corrispondere univocamente all’elemento presente nella pagina al momento della verifica. Preferisci attributi stabili (ID, attributi data-*) ai selettori basati sulla posizione, come :nth-child, che smettono di funzionare quando il contenuto cambia.