Custom JavaScript

Custom is a check you create yourself. You write a snippet of JavaScript, Silktide runs it in the browser on every page it tests, and whatever your snippet reports becomes findings on those pages.

This makes it possible to test for anything your organization cares about that Silktide does not test out of the box: an internal style rule, a required tracking snippet, a deprecated component that should no longer appear, and so on.

How to fix it

Findings from this check mean whatever your snippet decides they mean, so the fix is defined by you. Write the message of each finding so a colleague who has never seen the snippet knows what to change.

How Silktide tests this

Your snippet runs in the browser on each page Silktide tests, after the page has loaded, as the body of an async JavaScript function - so you can use await and return directly.
Whatever your snippet returns is turned into findings:
- Return an array of objects to report multiple findings, each highlighting an element on the page:

// Report every image over 500px wide as a finding
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 is wider than 500px',
}));

Each object can include a selector (a CSS selector for the element to highlight), text (what to show for the finding), severity (low, medium, or high), and a message explaining the problem.
Return a plain string to report a single low-severity finding for the page.
Return an empty array, or nothing, to report the page as fine.

If the snippet throws an error or returns something unsupported, the check reports the error on the page so you can debug the snippet.

Because the snippet runs in the browser when the page is downloaded, changing the snippet takes effect the next time pages are retested, not instantly.

Troubleshooting

My snippet works in the browser console but not here

The snippet is the body of a function, so statements like return are expected at the top level. Make sure the snippet returns its findings rather than logging them with console.log, which is not collected.

Findings do not highlight the right element

The selector you return must uniquely match the element in the page at the time the page was tested. Prefer stable attributes (ids, data-* attributes) over positional selectors like :nth-child, which break when content shifts.