CircleCI - Parallel Runs Name

circleci-parallel-runs-name.js

const parallelRunList = document.querySelectorAll('ol')[2]
const watchableStepsMap = {
    "e2e-production": "Running E2E Tests",
    "e2e-dev": "Running E2E Tests",
    "chromatic-sandboxes": "Running Chromatic",
    "test-runner-production": "Running Test Runner",
    "create-sandboxes": "Creating Sandboxes",
    "build-sandboxes": "Building Sandboxes"
}

function getParentNodeForText(ele, text) {
    if (ele.nodeType === Node.TEXT_NODE && ele.nodeValue.trim()?.includes(text)) {
        return ele.parentNode
    }
    return ele.childNodes.length && [...ele.childNodes].flatMap(e =>
        getParentNodeForText(e,text)
    ).filter(Boolean);
}

function waitForElm(selector) {
    return new Promise((resolve) => {
        if (selector()) {
            return resolve(selector());
        }        

        const observer = new MutationObserver(mutations => {
            if (selector()) {
                resolve(selector());
                observer.disconnect();
            }
        });
        

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

document.querySelector('input[role=switch]').click();

for(const li of Array.from(parallelRunList.querySelectorAll('li'))) {
    li.querySelector('a').click()
    await new Promise((resolve) => setTimeout(resolve, 0));
    
    const step = watchableStepsMap[document.querySelector('h1').innerText]
    await waitForElm(() => document.querySelector(`[aria-label*='${step}'`))
    document.querySelector(`[aria-label*='${step}'`).click()
    let sandbox = await waitForElm(() => document.querySelector(`[aria-label*='${step}'`).parentNode.parentNode.parentNode.querySelector('pre')).then((elm) => {
        let span = getParentNodeForText(elm, '👉 Selected sandbox:')[0]
        return span.innerText.match(/Selected sandbox: (.*)/)[1]
    })
    const node = li.querySelector('a div:last-child div:first-child')
    node.innerText = sandbox;
}