Testing greasemonkey/tampermonkey userscripts

[pke]

My userscript injects a new span into matched websites and I would like to use cypress to run tests if the userscript runs correctly.
I have not found a way to load my userscript into the cypress website. I tried:

cy.visit('https://www.example.org')
    cy.get("head").then(head => {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "../../../my.user.js";
        head.appendChild(script);
      })
  })

It claims "head" does not have appendChild

[BloodyRain2k]

Wouldn't it be easier to just install TamperMonkey in the Cypress browser and just let it do it's thing with the script?
With the way you're attempting it's theoretically possible that the script works when embedded into the page but breaks when actually run in the extension. Or the other way around.

[pke]

And how would one do that automatically? Because manually installing it is no option for a CI environment

[pke]

I have found a working solid solution. With a little bit of metadata the userscript can work as a browser extension.

{
  "manifest_version": 3,
  "name": "my userscript",
  "version": "1.0",
  "content_scripts": [
    {
      "js": ["my.userscript.js"],
      "matches": [
        "https://www.amazon.com/*"
      ]
    }
  ]
}

Then loading this in the cypress plugin.js

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
// eslint-disable-next-line import/no-extraneous-dependencies
const path = require('path')

const DIST_PATH = path.resolve(path.join(__dirname, '..', '..'))

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Load userscript as webextension for E2E testing
  // WARNING: headless mode only work for Electron and Firefox browser
  // Chrome must be run with --headed option.
  on('before:browser:launch', async (_, launchOptions) => {
    launchOptions.extensions.push(DIST_PATH)
    return launchOptions
  })
}

[simonasmulevicius-humbility]

@pke Does this solution still work with the new Cypress version?

[pke]

Something changed in Cypress that would not make it work? I haven't tested for while now and switched to puppeteer (it works there).

[dvirtz]

I couldn't get this to work due to the script being run in an isolated environment which doesn't allow it to access the page's global variables.
Instead I'm using playwright where all that's required is

page.addScriptTag({path: pathToScript})