Egendefinert JavaScript

Egendefinert er en kontroll du oppretter selv. Du skriver et JavaScript-kodeutdrag, Silktide kjører det i nettleseren på hver side som testes, og det kodeutdraget rapporterer, blir til funn på disse sidene.

Dette gjør det mulig å teste hva som helst organisasjonen din er opptatt av, men som Silktide ikke tester som standard: en intern stilregel, et påkrevd sporingskodeutdrag, en utdatert komponent som ikke lenger skal vises, og så videre.

Slik løser du det

Funn fra denne kontrollen betyr det kodeutdraget ditt bestemmer at de betyr, så det er du som definerer løsningen. Skriv message for hvert funn slik at en kollega som aldri har sett kodeutdraget, forstår hva som må endres.

Slik tester Silktide dette

Kodeutdraget ditt kjøres i nettleseren på hver side Silktide tester, etter at siden er lastet inn, som innholdet i en async JavaScript-funksjon – slik at du kan bruke await og return direkte.
Det kodeutdraget ditt returnerer, blir gjort om til funn:
- Returner en matrise med objekter for å rapportere flere funn, der hvert funn fremhever et element på siden:

// Rapporter hvert bilde som er over 500 piksler bredt som et funn
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: 'Bildet er bredere enn 500 piksler',
}));

Hvert objekt kan inneholde selector (en CSS-selektor for elementet som skal fremheves), text (det som skal vises for funnet), severity (low, medium eller high) og message som forklarer problemet.
Returner en vanlig tekststreng for å rapportere ett enkelt funn med lav alvorlighetsgrad for siden.
Returner en tom matrise, eller ingenting, for å rapportere at siden er i orden.

Hvis kodeutdraget utløser en feil eller returnerer noe som ikke støttes, rapporterer kontrollen feilen på siden slik at du kan feilsøke kodeutdraget.

Fordi kodeutdraget kjøres i nettleseren når siden lastes ned, trer endringer i kodeutdraget i kraft neste gang sidene testes på nytt, ikke umiddelbart.

Feilsøking

Kodeutdraget mitt fungerer i nettleserkonsollen, men ikke her

Kodeutdraget er innholdet i en funksjon, så uttrykk som return forventes på øverste nivå. Sørg for at kodeutdraget returnerer funnene sine, i stedet for å logge dem med console.log, som ikke samles inn.

Funn fremhever ikke riktig element

selector du returnerer, må samsvare med nøyaktig ett element på siden på tidspunktet siden ble testet. Foretrekk stabile attributter (ID-er og data-*-attributter) fremfor posisjonsselektorer som :nth-child, som slutter å fungere når innholdet flyttes.