userflow-nav.js

const USERFLOWNAV = (() => {
            const queue = [];
            let processing = false;

            const waitForEvent = (event, selector) => new Promise(resolve => {
                const listener = () => { window.removeEventListener(event, listener); resolve(); };
                const observer = new MutationObserver(() => {
                    if (document.querySelector(selector)) { observer.disconnect(); resolve(); }
                });
                window.addEventListener(event, listener);
                observer.observe(document.body, { childList: true, subtree: true });
            });

            const clickOn = async (clickValue, itemNumber = 1) => {
                const clickId = 'data-userflow-click-id';
                const elements = document.querySelectorAll(`[${clickId}="${clickValue}"]`);
                if (elements[itemNumber - 1]) {
                    elements[itemNumber - 1].click();
                    await waitForEvent('popstate', `[${clickId}="${clickValue}"]`);
                } else {
                    console.error(`['data-userflow-click-id="${clickValue}"'], itemNumber: ${itemNumber} not found`)
                }
            };

            const addToQueue = (clickValue, itemNumber = 1) => { // uses index 1 instead of 0
                queue.push({ clickValue, itemNumber });
                if (!processing) processQueue();
                return USERFLOWNAV;
            };

            const processQueue = async () => {
                processing = true;
                while (queue.length) {
                    const { clickValue, itemNumber } = queue.shift();
                    await clickOn(clickValue, itemNumber);
                }
                processing = false;
            };

            return {
                clickOn: addToQueue,
                ClickOn: addToQueue
            };
        })();



        // Example Usage
        USERFLOWNAV.clickOn('settings')
            .clickOn('channel', 2) // Clicking on list items, indexing starts at 1 instead of 0 easy for the content team 
            .ClickOn('smart-review') // Both Click and click works