MDC Web Screenshot Module API

golden.json

{
  "mdc-button/classes/baseline.html": {
    "idle state": {
      "desktop_chrome_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_chrome_ltr.png",
      "desktop_chrome_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_chrome_rtl.png",
      "desktop_firefox_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_firefox_ltr.png",
      "desktop_firefox_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_firefox_rtl.png",
      "desktop_edge_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_edge_ltr.png",
      "desktop_edge_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_edge_rtl.png",
      "desktop_ie11_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_ie11_ltr.png",
      "desktop_ie11_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_ie11_rtl.png",
      "desktop_safari_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_safari_ltr.png",
      "desktop_safari_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/desktop_safari_rtl.png",
      "ios_safari_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/ios_safari_ltr.png",
      "ios_safari_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/ios_safari_rtl.png",
      "android_chrome_ltr": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/android_chrome_ltr.png",
      "android_chrome_rtl": "https://.../<USERNAME>/<TIMESTAMP>/<COMMIT>/<HTML_FILE_PATH>/android_chrome_rtl.png",
    },
    "hover state": {
      "desktop_chrome_ltr": {...},
      "desktop_chrome_rtl": {...},
      "desktop_firefox_ltr": {...},
      "desktop_firefox_rtl": {...},
      ...
    },
    "mousedown state": {...},
    "mouseup state": {...},
    "focus state": {...}
  }
}

screenshot-api-usage-example.js

const ScreenshotSheriff = require('@material/screenshot-sheriff');

const screenshotter = new ScreenshotSheriff({
  cbt_credentials: {username: '...', authkey: '...'},
  gcloud_credentials: {username: '...', authkey: '...'},

  browsers: ['chrome[n,n-1,n+1]', 'firefox[n,n-1]', 'safari[n,n-1]', 'edge[n,n-1]', 'ie[11]'],
  directionality: ['ltr', 'rtl'],
  
  urls: [
    'https://example.com/page1.html',
    'https://example.com/page2.html',
    'https://example.com/page3.html',
  ],
  golden_file: './golden.json',
});

screenshotter.on('progress', (progress) => console.log(progress));

screenshotter.diff().then((diffs) => {
  console.log(diffs);

  if (userApprovesDiffs(diffs)) {
    screenshotter.updateGoldens(diffs);
  }
});