script in svg

[tipy01]

What is your Scenario?

Test an svg with an embedded script like described here.

What is the Current behavior?

I make test with testcafe on an app that displays an svg with an embedded script.

I GET the svg then I inject it writing innerHTML.

I got that error:

hammerhead.js:10 Uncaught (in promise) TypeError: Illegal invocation
    at t.getScriptContent (hammerhead.js:10)
    at e._processScriptElement (hammerhead.js:9)
    at e.processElement (hammerhead.js:9)
    at hammerhead.js:2
    at Ii (hammerhead.js:2)
    at Ri (hammerhead.js:2)
    at HTMLDivElement.setter [as innerHTML] (hammerhead.js:12)
    at ?editor_console=:126

In raw web browser it works

If I remove the <script> part of my svg it works also with hammerhead.

What is the Expected behavior?

hammerhead to not crash on finding script in svg.

What is your public website URL? (or attach your complete example)

https://jsfiddle.net/tipy01/dn7u4rpL/67/

With a workaround consisting of removing script in svg it passes:
https://jsfiddle.net/tipy01/dn7u4rpL/66/

What is your TestCafe test code?

import { Selector } from "testcafe";

fixture`SVG script page`;

test("svg script", async (t) => {

    await t.navigateTo("https://jsfiddle.net/tipy01/dn7u4rpL/67");

    const iframeSelector = Selector('iframe', { timeout: 60000 }).withAttribute("name", "result");

    await t.switchToIframe(iframeSelector);

    await t.expect(Selector("svg").withText("Click on circle to change its size").exists).ok();

});

Your complete configuration file

module.exports = {

"browsers": ["firefox"],
"src": "e2e/**/*.spec.ts",
"reporter": [
    {
        "name": "spec"
    },
    {
        "name": "spec",
        "output": "reports/report.txt"
    }
],
"quarantineMode": false,
"debugMode": false,
"debugOnFail": true,
"stopOnFirstFail": true,
"skipJsErrors": true,
"skipUncaughtErrors": true,
"appCommand": "",
"appInitDelay": 7000,
"concurrency": 1,
"selectorTimeout": 5000,
"assertionTimeout": 5000,
"pageLoadTimeout": 3000,
"speed": 0.8,
"disablePageCaching": false,
"developmentMode": false,
"qrCode": false,
"compilerOptions": {
    "typescript": {
        "configPath": "e2e/tsconfig.e2e.json"
    }
}

}

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Execute the test above to see the hammerhead error in dev console
2. To confirm that it is the script that produce this error your can modify the test to use the "workaround url"

TestCafe version

1.18.1

Node.js version

16.13.2

Command-line arguments

chrome

Browser name(s) and version(s)

Chrome Version 92.0.4515.159, Firefox 96.0

Platform(s) and version(s)

Ubuntu 20.04.3

Other

No response

[dositec]

Thank you for sharing the code snippets. We reproduced the issue and will do our best to fix it as soon as possible.