Tampermonkey script for Playwright Test Report, adds a button that copies an "approve" command to the clipboard

playwright-approve-command-button.js

// ==UserScript==
// @name         Playwright Approve Button
// @namespace    http://tampermonkey.net/
// @version      2024-02-28
// @description  Adds a button to the Playwright Test Report that makes it easier to "approve" a snapshot by copying a command to the clipboard.
// @author       M. Scott Ford
// @match        http://localhost:9323/
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const errorMessageElementSelector = 'div:has(> .test-error-message)';

    function addCopyCommandButton() {
        if (document.title != "Playwright Test Report") {
            return;
        }

        if (document.querySelector('#copy-command')) {
            return;
        }

        const fragment = document.createDocumentFragment();
        const div = document.createElement('div');
        div.id = 'copy-command';
        const button = document.createElement('button');
        button.innerText = 'Copy Approve Command to Clipboard';
        button.onclick = function() {
            const paths = document.querySelector('.test-error-message').innerText.split("\n").filter((value) => value.startsWith("Expected:") || value.startsWith("Received:")).map((value) => value.replace("Expected: ", "").replace("Received: ", ""))
            navigator.clipboard.writeText(`mv ${paths[1]} ${paths[0]}`);
        }
        div.appendChild(button);
        fragment.appendChild(div);
        const errorMessageContainer = document.querySelector(errorMessageElementSelector);
        if (errorMessageContainer) {
            errorMessageContainer.appendChild(fragment);
        }
    }

    setInterval(() => {
        if (document.querySelector(errorMessageElementSelector)) {
            addCopyCommandButton();
        }
    }, 100);
})();