chrome-ui-coverage

Track UI coverage in a Chrome browser.

Warning

May slow down UI while running.

Setup

This is still in development, so extension needs to be ran in developer mode.

• Clone repo locally
• In chrome browser, navigate to chrome://extensions/
• In top right, enable "Developer mode"
• In top left, click "Load unpacked"
• Select the location to this repo (chrome-ui-coverage)

Retrieving tracking data

After enabling extension, tracking data will be updated automatically. To retrieve data, click the extension button in the top-right of the browser and select Download Coverage Report.

Will be formatted as follows:

{
  "webpage1": {       // Webpage in domain, i.e. "https://weather.com"
    "element1": {     // DOM element that can be interacted with, i.e "<button>PressMe</button>"
      "event1": bool  // i.e "click" or "hover". will be 'false' if not interacted with, or 'true' if it has been.
    },
  }
}

Shortcomings

• Currently, repeat elements per page are itemized individually. For example, a table with 100 entries, each with a checkbox, will have 100 individual elements tracked in the coverage data, one for each checkbox. Leads to many "false" misses.
• If an element's CSS attributes change, either while using the page or upon a page reload, it will be itemized multiple times.
• Elements that appear on every page, such as a top navigation bar, will be repeatedly itemized on every page in the tracking data.
• Tracked data is cleared between web domains or if the browser is closed.