Playwright much needed keyboard shortcuts.

playwright-extensions-script.md

Features

1. Add arrow navigation between tests
2. Keyboard shortcuts to image diffs
3. Shift + D for diff mode
4. Shift + S for slider mode
5. Shift + A for actual
6. Shift + E for expected
7. Copy all test paths button - click on failed tests and click the button to copy all paths for a local run

Installation

1. Install tampermonkey
2. Go to utilities on the extension settings
3. Paste in "Import from URL" and click Install

userscript.js

// ==UserScript==
// @name         Playwright report keyboard shorrtcuts
// @version      2024-12-01
// @description  Quickly navigate the playwright html report using keyboard shortcuts, copy all failed tests to re-run them locally with ease
// @author       Adam Gensafht
// @grant        GM_setClipboard
// ==/UserScript==

(function() {
    'use strict';

    if( document.title !== 'Playwright Test Report' ) {
        return
    }

    console.log("tampering playwirght report")


    window.addEventListener("keydown", e=>{
        const [prev, next] = document.querySelectorAll(".hbox a")
        if(e.key === "ArrowRight"){
            e.preventDefault()
            ![...next.parentElement.classList].includes("hidden") && next.click()
        } else if (e.key === "ArrowLeft"){
            e.preventDefault()
            ![...prev.parentElement.classList].includes("hidden") && prev.click()
        }

        const comparators = document.querySelectorAll('[data-testid="test-result-image-mismatch-tabs"]')
        for(let i = 0; i < comparators.length; i++){
            const comparator = comparators[i]
            const [diff,actual,expected,sideBySide,slider] = comparator.querySelectorAll("div")

            if(e.shiftKey && e.key === "D"){
                diff.click()
            }else if(e.shiftKey && e.key === "S"){
                slider.click()
            }else if(e.shiftKey && e.key === "A"){
                actual.click()
            }else if(e.shiftKey && e.key === "E"){
                expected.click()
            }
        }

    })

    const cooyFailedDiv = document.createElement("button")
    document.body.appendChild(cooyFailedDiv)
    cooyFailedDiv.append("copy failed")
    cooyFailedDiv.onclick = ()=>{
        GM_setClipboard([...document.querySelectorAll(".test-file-path")].map(el=>el.textContent).join(" "))
    }


})();