JavaScript personnalisé

Le personnalisé est une vérification que vous créez vous-même. Vous écrivez un extrait de JavaScript, Silktide l'exécute dans le navigateur sur chaque page qu'il teste, et tout ce que votre extrait signale devient des constats sur ces pages.

Cela permet de tester tout ce qui importe à votre organisation et que Silktide ne teste pas nativement : une règle de style interne, un extrait de suivi requis, un composant obsolète qui ne devrait plus apparaître, etc.

Comment le corriger

Les constats issus de cette vérification signifient ce que votre extrait décide qu'ils signifient ; la correction est donc définie par vous. Rédigez le message de chaque constat de sorte qu'un collègue qui n'a jamais vu l'extrait sache quoi modifier.

Comment Silktide teste cela

Votre extrait s'exécute dans le navigateur sur chaque page testée par Silktide, après le chargement de la page, en tant que corps d'une fonction JavaScript async — vous pouvez donc utiliser await et return directement.
Tout ce que votre extrait renvoie est transformé en constats :
- Retournez un tableau d'objets pour signaler plusieurs constats, chacun mettant en évidence un élément de la page :

// Signaler chaque image de plus de 500 px de large comme un constat
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: 'Image de plus de 500 px de large',
}));

Chaque objet peut inclure un selector (un sélecteur CSS de l'élément à mettre en surbrillance), text (ce qui s'affiche pour le constat), severity (low, medium ou high) et un message expliquant le problème.
Retournez une simple chaîne pour signaler un seul constat de faible gravité pour la page.
Retournez un tableau vide, ou rien, pour indiquer que la page est correcte.

Si l'extrait lève une erreur ou renvoie quelque chose de non pris en charge, la vérification signale l'erreur sur la page afin que vous puissiez déboguer l'extrait.

Comme l'extrait s'exécute dans le navigateur lorsque la page est téléchargée, toute modification de l'extrait prend effet lors du prochain test des pages, pas instantanément.

Dépannage

Mon extrait fonctionne dans la console du navigateur mais pas ici

L'extrait constitue le corps d'une fonction, donc des instructions comme return sont attendues au niveau supérieur. Assurez-vous que l'extrait renvoie ses constats plutôt que de les enregistrer avec console.log, qui n'est pas collecté.

Les constats ne mettent pas en évidence le bon élément

Le selector que vous renvoyez doit correspondre de façon unique à l'élément présent dans la page au moment du test. Préférez des attributs stables (id, attributs data-*) aux sélecteurs positionnels comme :nth-child, qui se cassent lorsque le contenu bouge.