Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes')

[ChristianThingKnudsen]

What is your Scenario?

When running running an Elm application using the testcafe browser it causes an elm runtime error: Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes') This is due to testcafe somehow manipulating the DOM that makes Elm chrash.

What is the Current behavior?

The Elm application chrashes

What is the Expected behavior?

The Elm application should not chrash

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

Unable to provide due to company restrictions

What is your TestCafe test code?

fixture("Elm Fixture").page("url-to-elm-application");

test("Should render elm page", async (t) => {
  await elmPage.isRendered()
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

Steps to Reproduce

1. Go to page of elm application.
2. The page is not rendered
3. The console is spammed with errors

TestCafe version

v1.20.1

Node.js version

v1.20.1

Command-line arguments

./node_modules/.bin/testcafe --skip-js-errors Chrome <./path-to-fixture>

Browser name(s) and version(s)

Chrome

Platform(s) and version(s)

MacOS 12.16.1

Other

We only see this issue on some elm pages. However the elm application runs perfectly outside TestCafe in Chrome, Firefox and Safari. I have tried using many different versions of testcafe but this seems to be an issue in all versions.

[github-actions[bot]]

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. Refer to this article to create the best example: How To: Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

[ChristianThingKnudsen]

Unfortunately, I am unable to provide an example in a public forum due to company restrictions. Is it possible to provide an example for you to debug without uploading it to a public forum?

[AlexKamaev]

Hello

You can send a simple sample to support@devexpress.com.

Would you also try running your test with testcafe@2.3.1-alpha-1 with the experimental-proxyless option enabled? This option enables native browser automation. In Proxyless mode, a few issues have already been fixed. This issue might also be fixed in Proxyless mode. This option is available in all interfaces: js

// Command-line
testcafe chrome tests --experimental-proxyless 

// Programmatic
const testcafe = await createTestCafe({ experimentalProxyless: true });

// Configuration file
{
   "experimentalProxyless": "true"
}

Note that at present it is an experimental mode. Also, the Proxyless mode is implemented only in Google Chrome. It will not work correctly if you run tests in a non-Chrome browser or in a combination of other browsers.

[github-actions[bot]]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

[ChristianThingKnudsen]

I tried testing using your proxy less mode. This however resulted in other problems with the application. I was actually able to reproduce and "fix" the above using Grammarly or Lastpass. The problem occurs when content is dynamically inserted into a form elm is controlling. I tried to apply the code below to our application:

const cleanBodyHelp = () => {
  document.body
    .querySelectorAll(
      "[data-grammarly-shadow-root], [data-lastpass-root], [data-lastpass-icon-root],  [data-hammerhead-focused]"
    )
    .forEach((el) => document.body.after(el));
};
window.addEventListener("error", (err) => {
  console.log(err);
  if (
    err.message ===
    "Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes')"
  ) {
    console.log("Got body error. Cleaning! ", err);
    cleanBodyHelp();
  }
});

This code removed the element:

<textarea class="flex-1 m-1 px-1 py-2 " rows="2" autofocus="" id="message-text-input" data-hammerhead-focused="true"></textarea>

This made the runtime error go away but now I am missing the input field. The above code works fine for Grammarly and Lastpass. Do you have any suggestions on how to fix this for testcafe @AlexKamaev?

[miherlosev]

Hi @ChristianThingKnudsen

Could you please upgrade to the latest version (testcafe@.2.3.1), specify the dev option, run the test and share a screenshot of the script error (the same as in the issue description)?

[ChristianThingKnudsen]

Upgrading to testcafe version 2.3.1 did not solve the issue. The same error persists. I use a custom runner activated by an npm script:

"test": "npm run type-check && ./node_modules/.bin/testcafe --skip-js-errors chrome $*"

And I provide the following config for my runner:

export const runnerConfig: Partial<RunOptions> = {
  skipJsErrors: true, // Should ideally be set to false
  quarantineMode: { successThreshold: 1, attemptLimit: 3 }, // Tests are only marked as failed when they fail three times
  selectorTimeout: 20000,
  assertionTimeout: 20000,
  pageLoadTimeout: 20000,
  speed: 1,
  browserInitTimeout: 720000,
};

In my case, the page does not load due to the above error and I get hundreds of console errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes')

As mentioned, the above code solves it, but it removes the text area. The error occurs inside the elm application but is due to test cafe applying data-hammerhead-focused to the text area.

[miherlosev]

You need to update the Runner configuration as follows:

export const runnerConfig: Partial<RunOptions> = {
skipJsErrors: true, // Should ideally be set to false
quarantineMode: { successThreshold: 1, attemptLimit: 3 }, // Tests are only marked as failed when they fail three times
selectorTimeout: 20000,
assertionTimeout: 20000,
pageLoadTimeout: 20000,
speed: 1,
browserInitTimeout: 720000,
developmentMode: true,
};

and then share a screenshot of the Console panel in the same way as in the issue's description:

The shared screenshot should contain full function names in the call stack.

[ChristianThingKnudsen]

There is no change in the console panel. This is what I get after applying the above:

[miherlosev]

Thank you for the update.

There is no change in the console panel.

In this case, we cannot find the cause of the issue without an example that can be run locally. Could you please share such an example?

[ChristianThingKnudsen]

I have just shared a simple example to support@devexpress.com to our private test server with the same topic as this issue where you hopefully can reproduce the error.

[AlexKamaev]

I managed to reproduce the issue. Thank you for sharing the example.

[ChristianThingKnudsen]

Sounds good. When can I expect this issue to be resolved? And do you still need access to our private test server for further debugging?

[AlexKamaev]

We cannot give you any precise estimates of when the issue will be resolved. We would like to have further access to your test server if possible.

[moniquelive]

I'd like to +1 this same error that started happening recently as well with my app at https://meuastral.com/

The app elm.json is:

{
  "type": "application",
  "source-directories": ["src"],
  "elm-version": "0.19.1",
  "dependencies": {
    "direct": {
      "abradley2/elm-datepicker": "4.1.0",
      "elm/browser": "1.0.2",
      "elm/core": "1.0.5",
      "elm/html": "1.0.0",
      "elm/http": "2.0.0",
      "elm/json": "1.1.3",
      "elm/time": "1.0.0",
      "justinmimbs/date": "3.2.1",
      "myrho/elm-round": "1.0.5",
      "terezka/elm-charts": "3.0.0"
    },
    "indirect": {
      "danhandrea/elm-time-extra": "1.1.0",
      "debois/elm-dom": "1.3.0",
      "elm/bytes": "1.0.8",
      "elm/file": "1.0.5",
      "elm/parser": "1.1.0",
      "elm/svg": "1.0.1",
      "elm/url": "1.0.0",
      "elm/virtual-dom": "1.0.3",
      "justinmimbs/time-extra": "1.1.1",
      "ryannhg/date-format": "2.3.0",
      "terezka/intervals": "2.0.1"
    }
  },
  "test-dependencies": {
    "direct": {
      "elm-explorations/test": "2.1.1"
    },
    "indirect": {
      "elm/random": "1.0.0"
    }
  }
}

and I link with the following external dependencies:

%PUBLIC_URL%/manifest.json
%PUBLIC_URL%/favicon.ico
https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.2.x/dist/typography.min.css
https://cdn.jsdelivr.net/npm/daisyui@2.14.3/dist/full.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css
https://www.google-analytics.com
https://cdn.syndication.twimg.com
https://connect.facebook.net
https://static.xx.fbcdn.net
https://scontent.fsdu5-1.fna.fbcdn.net

https://cdn.tailwindcss.com
https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v14.0&appId=306456439378733&autoLogAppEvents=1
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7232537493483974

The full source code is here: https://github.com/moniquelive/meuastral

Hope this helps.

[AlexKamaev]

Hi @moniquelive,

Thank you for sharing this information. We will follow-up with you once we have specific information to share.

[JordanDalton]

Ran into a situation like this today this did the trick:

--experimental-proxyless

[ChristianThingKnudsen]

Unfortunately in my case the flag --experimental-proxyless is causing other issues in my provided example. Some https requests are now returning 401 (Unauthorized) which they did not before. So this is not a viable solution in my case.

[AlexKamaev]

Unfortunately in my case the flag --experimental-proxyless is causing other issues in my provided example. Some https requests are now returning 401 (Unauthorized) which they did not before. So this is not a viable solution in my case.

Could you please create a separate issue for this inquiry? Please note that in TestCafe 2.5.0 and newer, the --experimental-proxyless flag is called --native-automation.

[ChristianThingKnudsen]

I just tested my provided example with testcafe v.2.4.0 and v.2.5.0 respectively using --experimental-proxyless and --native-automation

• v.2.4.0: An authorization error inside the application occurs.
• v.2.5.0: No authorization error but the same error as described in this issue.

So it seems like in version 2.5.0 the workaround --native-automation does not work.

[AlexKamaev]

Hi @ChristianThingKnudsen,

Thank you for sharing your results. We appreciate it.

[miherlosev]

Hi @ChristianThingKnudsen,

I tried to reproduce the issue on the latest commit, and test execution stopped on the failed assertion. I guess the logic of the tested application was changed. Could you please update the example and share it with us?

[ChristianThingKnudsen]

I just sent you an email with the updated code. The error above was due to the messagesBtn selector having withExactText instead of withText. If you correct this you should be able to reproduce

[ChristianThingKnudsen]

@Aleksey28 Do you know if this is going to be a part of testcafes upcoming version 3.0.0?

[Aleksey28]

Yes, it will be part of testcafe 3.0.0.

[ChristianThingKnudsen]

@Aleksey28 I have just tested the newly released Testcafe v.3.0.0. It works locally on my computer, but it seems like the issue still persists on the docker image.

[Aleksey28]

@ChristianThingKnudsen please ensure that you use Testcafe v.3.0.0 in the docker image. Execute the testcafe -v command before starting tests.

[ChristianThingKnudsen]

@Aleksey28 Using your latest docker image or the one with the tag: 3.0.0 It prints this in the console when executing testcafe -v:

Using locally installed version of TestCafe.
2.6.1

I am using bitbucket pipeline and have tried to using: image: testcafe/testcafe and image: testcafe/testcafe:3.0.0 with the same results

[Aleksey28]

@ChristianThingKnudsen,

I executed the 'docker pull' command for the testcafe/testcafe image with the latest tag and the docker run testcafe/testcafe -v command. As a result, 3.0.0 was printed. Please reinstall the testcafe/testcafe image.

[ChristianThingKnudsen]

My apologies. The issue was due to Bitbucket caching an old Testcafe version in the pipeline even though I used the correct Docker image.