Playwright report quick VRT checks

plawright_quick_checks.js

let nextTestId = -1;
let tests = [];
const diffType = 1;//1 diff, 2 actual, 3, expected, 4 side by side, 5 slider

const btnNext = document.createElement('button');
btnNext.innerText = 'Next'
btnNext.style.position = 'fixed'
btnNext.style.zIndex = 1000
document.body.prepend(btnNext)

const currentStep = document.createElement('button');

currentStep.style.position = 'fixed'
currentStep.style.zIndex = 1000;
currentStep.style.left = '50px'
document.body.prepend(currentStep)

const btnPrev = document.createElement('button');
btnPrev.innerText = 'Prev'
btnPrev.style.position = 'fixed'
btnPrev.style.left = '150px'
btnPrev.style.zIndex = 1000
document.body.prepend(btnPrev)



const btnReset = document.createElement('button');
btnReset.innerText = 'Reset'
btnReset.style.position = 'fixed'
btnReset.style.left = '200px'
btnReset.style.zIndex = 1000
document.body.prepend(btnReset);


async function setup() {

    document.querySelectorAll('.expanded-false').forEach(e => e.click())

    tests = await waitForElm('div.hbox > div > span:nth-child(2) > a', false);

    btnNext.addEventListener('click', next);
    btnPrev.addEventListener('click', prev);
    btnReset.addEventListener('click', reset);
    updateCurrentStep();
    next();
}

function updateCurrentStep() {
    currentStep.innerText = `${nextTestId + 1} of ${tests.length}`;
}
async function showDiffs() {
    const imagediff = await waitForElm('div[data-testid="test-result-image-mismatch"');
    imagediff.scrollIntoView();
    const sideBySide = await waitForElm(`div[data-testid="test-result-image-mismatch-tabs"] > div:nth-child(${diffType})`);
    sideBySide.click();
}
function goBack() {
    document.querySelector("#root > div > main > div.pt-3 > div > nav > a:nth-child(3)").click()
}
function openNext(id) {
    tests[id].click();
}
function next() {
    if (nextTestId > 0) goBack();
    nextTestId++;
    openNext(nextTestId);
    showDiffs();
    updateCurrentStep();
}
function prev() {
    if (nextTestId > -1) {
        goBack();
        nextTestId = Math.max(0, nextTestId - 1);
        openNext(nextTestId);
        showDiffs();
        updateCurrentStep();
    }

}

function reset() {
    nextTestId = 0;
    next();
}


function waitForElm(selector, single = true) {
    const query = single ? 'querySelector' : 'querySelectorAll'
    return new Promise(resolve => {
        if (document[query](selector)) {
            return resolve(document[query](selector));
        }

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

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

setup()