doc.createTreeWalker is not a function

[afreix-bricks]

Current behavior

When running a Cypress test via the Test Runner:

node ./cypress/cypress.js -- open

I'm seeing this error thrown from cypress:

cypress_runner.js:175886 TypeError: doc.createTreeWalker is not a function
    at findShadowRoots (https://localhost:8080/__cypress/runner/cypress_runner.js:166508:22)
    at collectRoots (https://localhost:8080/__cypress/runner/cypress_runner.js:166488:24)
    at Object.findAllShadowRoots (https://localhost:8080/__cypress/runner/cypress_runner.js:166498:10)
    at getElements (https://localhost:8080/__cypress/runner/cypress_runner.js:143851:45)
From previous event:
    at resolveElements (https://localhost:8080/__cypress/runner/cypress_runner.js:143905:27)
    at $Cy.get (https://localhost:8080/__cypress/runner/cypress_runner.js:143916:14)
    at $Cy.now (https://localhost:8080/__cypress/runner/cypress_runner.js:156327:47)
    at resolveElements (https://localhost:8080/__cypress/runner/cypress_runner.js:144084:19)
From previous event:
    at tryFn (https://localhost:8080/__cypress/runner/cypress_runner.js:151739:21)
    at whenStable (https://localhost:8080/__cypress/runner/cypress_runner.js:151777:12)
    at https://localhost:8080/__cypress/runner/cypress_runner.js:151269:16
From previous event:
    at $Cy.retry (https://localhost:8080/__cypress/runner/cypress_runner.js:151249:38)
    at onFailFn (https://localhost:8080/__cypress/runner/cypress_runner.js:135999:19)
From previous event:
    at $Cy.verifyUpcomingAssertions (https://localhost:8080/__cypress/runner/cypress_runner.js:136006:63)
    at https://localhost:8080/__cypress/runner/cypress_runner.js:144090:21
From previous event:
    at resolveElements (https://localhost:8080/__cypress/runner/cypress_runner.js:144084:52)
    at tryFn (https://localhost:8080/__cypress/runner/cypress_runner.js:151739:21)
    at whenStable (https://localhost:8080/__cypress/runner/cypress_runner.js:151777:12)
    at https://localhost:8080/__cypress/runner/cypress_runner.js:151269:16

Desired behavior

No error is thrown

Test code to reproduce

I can't share the full source code due to my company's policies. Maybe a simpler repro could be made once I have some idea of where this issue is coming from.

The line of code where this is failing is
cy.findByRole('tabpanel', { hidden: false }).findByTestId('RichCommandFooter').contains('runtime');

Cypress Version

8.1.0

Other

Happy to provide more details. Our cypress.js file has a good amount going on it, but I'm not sure what would be most relevant to help debug.

@testing-library/cypress is on version 8.0.1

[davidmunechika]

Thanks for opening an issue! I see that you are using an older version of Cypress. Please update to the current version of Cypress and let us know if this is still happening for you. Your issue may have already been fixed. Thanks!

[elaides]

I upgraded Cypress to v.9.5.4 but keep receiveing this "TypeError: doc.createTreeWalker is not a function".
From what i see possible rootcause may be : when i try to loop over array of page elements and check that one of them .contains("some value")

[davidmunechika]

Hmm...looks like it is an unhandled case where querying the shadow dom doesn't work correctly. Do you think you might be able to create a simple test failure repro based on that possible root cause? That would help out a lot, thanks!

[jesperancinha]

Hi there, I can reproduce this issue consistently on my project. Please find an example here: https://gitlab.com/jesperancinha/moving-objects-service-root/-/jobs/3043475557. I'm not sure if this has anything to do with cypress. I can only reproduce it consistently with Edge and this happens while upgrading an okta library. It seems pretty random, but it would be great if cypress could handle this in any way.

This is what I'm getting:

moving-objects-service-root-e2e-edge-1  |      TypeError: doc.createTreeWalker is not a function
moving-objects-service-root-e2e-edge-1  |       at findShadowRoots (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:169004:22)
moving-objects-service-root-e2e-edge-1  |       at collectRoots (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:168984:24)
moving-objects-service-root-e2e-edge-1  |       at Object.findAllShadowRoots (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:168994:10)
moving-objects-service-root-e2e-edge-1  |       at getElements (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:143111:93)
moving-objects-service-root-e2e-edge-1  |       at tryCatcher (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:11318:23)
moving-objects-service-root-e2e-edge-1  |       at Function.Promise.attempt.Promise.try (http://192.168.0.15:8080/__cypress/runner/cypress_runner.js:8592:29)

[steve-schreiner]

Any news on this? It's blocking our tests, and we run into it often. Any workaround? We have paid support. Thanks

[AtofStryker]

Hi @steve-schreiner. I am starting to take a look into this issue. I am trying to run @jesperancinha 's repository but I am having trouble getting it going this time (was able to start it before for a different issue). Are either of you able to help me provide a small reproduction to consistently reproduce the issue?

My guess is the includeShadowDom option is set to true, and when looking up the shadow root within cypress in the case stability may/may not be achieved, the root returns null and causes a createTreeWalker is not a function error. I could be wrong, but I can likely confirm this suspicion with a reproduction.

[steve-schreiner]

Hi Bill, I'm adding 3 people from my QA team that can assist you. Thanks, Steve

…

On Mon, Oct 24, 2022 at 5:11 PM Bill Glesias ***@***.***> wrote: Hi @steve-schreiner <https://github.com/steve-schreiner>. I am starting to take a look into this issue. I am trying to run @jesperancinha <https://github.com/jesperancinha> 's repository but I am having trouble getting it going this time (was able to start it before for a different issue). Are either of you able to help me provide a small reproduction to consistently reproduce the issue? My guess is the includeShadowDom option is set to true, and when looking up the shadow root within cypress in the case stability may/may not be achieved, the root returns null and causes a createTreeWalker is not a function error. I could be wrong, but I can likely confirm this suspicion with a reproduction. — Reply to this email directly, view it on GitHub <#20813 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWQ2VXJIOOSZ4QWDJBFQBT3WE33QXANCNFSM5R4SF62Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[laradiaz]

Hi Bill and Matt, how are you? As Steve mentioned, we have been encountering this doc.createTreeWalker error in the tests since August. We didn’t have the includeShadowDom option set to true at the time, when we ran into this error we tried setting it to true and for a while it worked and the error disappeared although with flakiness.
Currently the error createTreeWalker is not a function persists in our tests. Making it difficult for us to continue with the normal workflow.
In the last two days, I disabled the includeShadowDom option again, and many components (such as checkbox, dropdowns, etc) started to crash. So disabling this flag is not an option for our app. Hopefully we can resolve this error soon
Thank you!

[mschile]

Thanks @laradiaz, unfortunately, I haven't been able to recreate the issue. If anyone has a project I can look at and debug or if you are able to create the issue using the cypress-test-tiny project that would be great.

[aquanow-rtran]

Hi everyone, would just like to leave my two cents on this issue as I am also experiencing it. I have noticed in my tests that the createTreeWalker is not a function error occurs when the tests are trying to get an element that is currently being loaded in. Have seen two different instances where it has happened. Once when I'm performing a cy.get().contains() and another where my table hasn't fully loaded in yet.
My workaround was to change cy.get().contains() to cy.contains(selector, content) and to input a {timeout: 10000}
Hope my solution is able to at least get your tests running until a proper fix could be applied

[yarmakR]

@mschile @aquanow-rtran we have it repeated in this and the following runs as well https://dashboard.cypress.io/projects/zz1ryi/runs/3684/overview/411c1463-3742-46aa-9ff7-1c200c3a9363
any thoughts?

[mschile]

@yarmakR, unfortunately, I don't have access to view your project. Do you have a link to your project code that I could debug?

[ryanthemanuel]

@laradiaz, were you able to potentially get a publicly sharable reproduction of this issue as @mschile suggested?

[laradiaz]

@laradiaz, were you able to potentially get a publicly sharable reproduction of this issue as @mschile suggested?

No, I'm sorry. But this approach #20813 (comment) help us to resolve the issue for now.

Thank you!

[BlueWinds]

This looks suspiciously like another manifestation of the same underlaying bug as #7306. We've spent a lot of work looking into that for Cypress 12.0.0 - my hope is that this issue will be resolved in Cy12, which should come out next week.

Going to assign myself so I remember to follow up here after release.

[jesperancinha]

Hi there, I'm not sure if this is helpful at the moment since you are going to release version 12 at some point, I'm looking forward to that, but just wanted to share a build where this is now almost always happening:

https://github.com/jesperancinha/moving-objects-service-root/actions/runs/3613540356/jobs/6089355201

This is part of a dependabot PR:

jesperancinha/moving-objects-service-root#9

[tkrabel-db]

Does anyone know how I could work with iframes in cypress without calling the find() method separately from get()? IIUC, the whole idea of working with iframes leverages that paradigm (.get().<...>.find()).

[GrayedFox]

Thanks to @aquanow-rtran for the hint:

I have noticed in my tests that the createTreeWalker is not a function error occurs when the tests are trying to get an element that is currently being loaded in.

Rather than target the element you want to work with directly a decent work around is to target the nearest parent you know to be already loaded (or unaffected by dynamic JavaScript) and do a preliminary loading check first. Here is an example that relies on the waitForStableDom plugin in TypeScript using the PageObject pattern (I know I know, POs are now an anti pattern, don't @ me)

abstract class BasePage {
  get finishedLoading(): Cypress.Chainable {
    return cy.get('[loading="true"]').should('have.length', 0);
  }

  waitForDomReady(): Cypress.Chainable {
    return this.finishedLoading.waitForStableDOM();
  }

You might want to check for disabled too depending on your use case. My problem was updating an item inside a shopping cart which involved updating the image and other product details, hence the item would become disabled and still be loading after the the requests we're waited on:

// ... derived class ...
  saveEdits() {
    cy.intercept('POST', BasePage.urls.api).as('graphql');
    this.saveEditsButton.click();
    cy.wait(['@graphql', '@graphql']);
    this.waitForDomReady(); // ensures items finish loading and DOM has settled
    return this;
  }

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[jennifer-shehane]

Closing. Hopefully this is resolved in v12, but there wasn’t a reproducible example provided here to investigate.