Using querySelectorAll() on Github Actions

Lets say we are on a website and want a quick and dirty way to extract some structured data from it using the dev console. Lets illustrate this approach on a repo’s list of Github actions, (if any have been created) they can be found at https://github.com/[org]/[repo]/actions.

Select Github action buttons

The UI doesn’t allow a select on the button elements, so let’s do a right click -> Inspect; we find a <span> with the class ActionListItem-label within an <a> with the class ActionListContent. Lets go with the <a> tag since we want to extract the link later on along with the text content.

document.querySelectorAll('.ActionListContent')

in the dev console gets us a NodeList, but we see it is picking up items from three different <action-list>s. We narrow it down to action-list[1], which has the visible items we are interested in.

nodes = document.querySelectorAll('action-list')[1].querySelectorAll('.ActionListContent')

In order to use map/reduce transform operations we need to “cast” the NodeList into an array using the spread syntax:

nodes = [...document.querySelectorAll('action-list')[1].querySelectorAll('.ActionListContent')]

List of Github action names

Now we can run map operations to our heart’s content. For instance, to get a list of the visible Github action names:

nodes.map(x => x.textContent.trim())

Extract additional data fields

To generate CSV formatted lines containing the names and the associated URLs:

lines = nodes
  .map(x => ({name: x.textContent.trim(), url: x.href})) // extract desired data fields
  .map(item => `${item.name},${item.url}`) // transform to CSV line
csvExport = lines.join('\n')
copy(csvExport) // the extracted data can now be pasted into a CSV file