insertAdjacentText throws "TypeError: Illegal invocation" when called with number #7352

htho · 2022-10-28T08:28:03Z

What is your Scenario?

I have code that calls element.insertAdjacentText(where, data) with a number instead of a string for the data parameter.
This works in normal browsers, but fails when executed during a testcafe test.

This is a repository with reproduction code:
https://github.com/htho/testcafe-repro-insert-adjacent-text

<body>
    <button id="insert-text">insert text</button>
    <button id="insert-number">insert number</button>
    <div id="target"></div>
</body>
<script>
    const insertText = document.getElementById("insert-text");
    const insertNumber = document.getElementById("insert-number");
    const target = document.getElementById("target");
    let ctr = 0;
    insertText.addEventListener("click", () => {
        target.insertAdjacentText("beforeend", ++ctr + "");
    });
    insertNumber.addEventListener("click", () => {
        target.insertAdjacentText("beforeend", ++ctr);
    });
</script>

test("insert text", async (t) => {
    await t.click(Selector("#insert-text"));
    await t.expect(Selector("#target").innerText).eql("1");
});
test("insert number", async (t) => {
    await t.click(Selector("#insert-number")); // <- FAILS: "TypeError: Illegal invocation"
    await t.expect(Selector("#target").innerText).eql("1");
});

What is the Current behavior?

This fails, allthough it shouldnt

target.insertAdjacentText("beforeend", 42)

What is the Expected behavior?

target.insertAdjacentText("beforeend", 42)

should have the same effect as

target.insertAdjacentText("beforeend", "42")

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

https://github.com/htho/testcafe-repro-insert-adjacent-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="insert-text">insert text</button>
    <button id="insert-number">insert number</button>
    <div id="target"></div>
</body>
<script>
    const insertText = document.getElementById("insert-text");
    const insertNumber = document.getElementById("insert-number");
    const target = document.getElementById("target");
    let ctr = 0;
    insertText.addEventListener("click", () => {
        target.insertAdjacentText("beforeend", ++ctr + "");
    });
    insertNumber.addEventListener("click", () => {
        target.insertAdjacentText("beforeend", ++ctr);
    });
</script>
</html>

What is your TestCafe test code?

import { fixture, Selector } from "testcafe";


fixture("insertAdjacentText")
	.page("http://localhost:3000/")

test("insert text", async (t) => {
    await t.click(Selector("#insert-text"));
    await t.expect(Selector("#target").innerText).eql("1");
});
test("insert number", async (t) => {
    await t.click(Selector("#insert-number")); // <- FAILS: "TypeError: Illegal invocation"
    await t.expect(Selector("#target").innerText).eql("1");
});

Your complete configuration file

none

Your complete test report

PS C:\XXX\github.com\htho\testcafe-repro-insert-adjacent-text> npm run test

> repro-testcafe-insert-adjacent-text@1.0.0 test
> testcafe chrome test.tc.ts

 Running tests in:
 - Chrome 106.0.0.0 / Windows 10

 insertAdjacentText
 √ insert text
 × insert number

   1) A JavaScript error occurred on "http://localhost:3000/".
      Repeat test actions in the browser and check the console for errors.
      Enable the “skipJsErrors” option to ignore JavaScript errors during test execution. Learn more:
      "https://testcafe.io/documentation/404038/recipes/debugging/skip-javascript-errors"
      If the website only throws this error when you test it with TestCafe, please create a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

      JavaScript error details:
      TypeError: Illegal invocation
          at ElementSandbox._hasShadowUIParentOrContainsShadowUIClassPostfix (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:17154:58)
          at ElementSandbox._onElementAdded (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:17183:29)
          at ElementSandbox._addNodeCore (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:16849:19)
          at ElementSandbox._insertAdjacentTextOrElement (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:16889:22)
          at HTMLDivElement.insertAdjacentText (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:16949:33)
          at HTMLButtonElement.<anonymous> (http://localhost:3000/:22:16)
          at HTMLButtonElement.dispatchEvent (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:22986:52)
          at EventSimulator._raiseDispatchEvent (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:23780:23)
          at EventSimulator._dispatchMouseEvent (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:23690:22)
          at EventSimulator._dispatchMouseRelatedEvents (http://XXX.XXX.XXX.XXX:63695/hammerhead.js:23632:22)

      Browser: Chrome 106.0.0.0 / Windows 10

          7 |test("insert text", async (t) => {
          8 |    await t.click(Selector("#insert-text"));
         10 |});
         11 |test("insert number", async (t) => {
       > 12 |    await t.click(Selector("#insert-number")); // <- FAILS: 
         13 |    await t.expect(Selector("#target").innerText).eql("1");
         14 |});

         at <anonymous> (C:\XXX\github.com\htho\testcafe-repro-insert-adjacent-text\test.tc.ts:12:13)
         at <anonymous> (C:\XXX\github.com\htho\testcafe-repro-insert-adjacent-text\test.tc.ts:8:71)
         at __awaiter (C:\XXX\github.com\htho\testcafe-repro-insert-adjacent-text\test.tc.ts:4:12)
         at <anonymous> (C:\XXX\github.com\htho\testcafe-repro-insert-adjacent-text\test.tc.ts:11:35)



 1/2 failed (1s)

Screenshots

No response

Steps to Reproduce

git clone https://github.com/htho/testcafe-repro-insert-adjacent-text.git
cd testcafe-repro-insert-adjacent-text
npm i
npm run serve
npm run test (in another terminal)

TestCafe version

2.0.1

Node.js version

v16.17.1

Command-line arguments

testcafe chrome test.tc.ts

Browser name(s) and version(s)

chrome 106

Platform(s) and version(s)

Windows 10

Other

No response

The text was updated successfully, but these errors were encountered:

AlexKamaev · 2022-10-31T09:51:29Z

Thank you for reporting this issue. We'll take a look at it.

AlexKamaev · 2022-10-31T10:32:34Z

fixed in DevExpress/testcafe-hammerhead#2808

htho · 2022-10-31T10:41:50Z

fixed in DevExpress/testcafe-hammerhead#2808

That was quick! Thank You!

When can I expect this change to be released?

AlexKamaev · 2022-11-01T08:44:28Z

This fix will be included in one of the upcoming versions. Please follow updates on our changelog

htho added the TYPE: bug The described behavior is considered as wrong (bug). label Oct 28, 2022

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Oct 28, 2022

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Oct 31, 2022

AlexKamaev added the FREQUENCY: level 1 label Oct 31, 2022

AlexKamaev closed this as completed Oct 31, 2022

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Oct 31, 2022

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Nov 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

insertAdjacentText throws "TypeError: Illegal invocation" when called with number #7352

insertAdjacentText throws "TypeError: Illegal invocation" when called with number #7352

htho commented Oct 28, 2022 •

edited

AlexKamaev commented Oct 31, 2022

AlexKamaev commented Oct 31, 2022

htho commented Oct 31, 2022

AlexKamaev commented Nov 1, 2022

insertAdjacentText throws "TypeError: Illegal invocation" when called with number #7352

insertAdjacentText throws "TypeError: Illegal invocation" when called with number #7352

Comments

htho commented Oct 28, 2022 • edited

What is your Scenario?

What is the Current behavior?

What is the Expected behavior?

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

What is your TestCafe test code?

Your complete configuration file

Your complete test report

Screenshots

Steps to Reproduce

TestCafe version

Node.js version

Command-line arguments

Browser name(s) and version(s)

Platform(s) and version(s)

Other

AlexKamaev commented Oct 31, 2022

AlexKamaev commented Oct 31, 2022

htho commented Oct 31, 2022

AlexKamaev commented Nov 1, 2022

htho commented Oct 28, 2022 •

edited