Selector Playground does not work for me on specific Salesforce based sites

I couldn’t find any other issue like the one I seem to be having, when browsing selector playground issues that have already been created. I don’t really know how to investigate this further. It happens every time I try to click this selector playground button (boxed in red). So it has never worked for me on the sites I need to test. But it does work on google.com. So my only vague idea so far is that it could be related to salesforce somehow, since to build our sites we use lightning and aura web components.

Current behavior:

https://files.gitter.im/cypress-io/cypress/eHIk/image.png

cypress_runner.js:162659 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@32]' TypeError: Cannot read property 'length' of undefined
    at superMatcher (cypress_runner.js:14146)
    at Sizzle.select (cypress_runner.js:14342)
    at Function.Sizzle [as find] (cypress_runner.js:12510)
    at jQuery.fn.init.find (cypress_runner.js:14541)
    at getOrCreateSelectorHelperDom (cypress_runner.js:177581)
    at Object.addOrUpdateSelectorPlaygroundHighlight (cypress_runner.js:177609)
    at AutIframe._clearHighlight (cypress_runner.js:176393)
    at AutIframe.toggleSelectorHighlight (cypress_runner.js:176584)
    at cypress_runner.js:177129
    at reactionRunner (cypress_runner.js:162926)
    at trackDerivedFunction (cypress_runner.js:162090)
    at Reaction../node_modules/mobx/lib/mobx.js.Reaction.track (cypress_runner.js:162630)
    at Reaction.onInvalidate (cypress_runner.js:162907)
    at Reaction../node_modules/mobx/lib/mobx.js.Reaction.runReaction (cypress_runner.js:162596)
    at runReactionsHelper (cypress_runner.js:162733)
    at reactionScheduler (cypress_runner.js:162711)

Here is the line of code it references in the stack trace. If the answer to my problem is contained in the comments/messages, I don’t understand how, so maybe someone could just explain it to me, if this is the case.

Desired behavior:

I would like the playground selector to work as described by its documentation. It very obviously is not working on these sites. I’ll understand if this is an issue that cypress can’t fix if it is only specific to certain sites. Maybe it really is an issue contained primarily in cypress code though? Or maybe I can find help on how I can resolve it on my end.

Steps to reproduce: (app code and test code)

simply run a test that only visits this URL:

1. cy.visit('https://help.doterra.com/')
2. Open the playground selector
3. Click on the arrow button as if to select elements (the one boxed in red from the first screen shot)
4. mouse off of that button and immediately I always see the mobx console error, if it hasn’t occurred even earlier
5. At this point the selector playground seems stuck and the error will happen over and over trying to click that button

If I need to create a more contained environment to reproduce it in, I can do that, but I figured this should work since that is a public site. It would be very interesting to me if someone else could not reproduce it this way.

Versions

Cypress package version: 3.7.0 Cypress binary version: 3.7.0 Chrome Version 79.0.3945.88 (Official Build) (64-bit)

[JasonFairchild]

So right now, what we have decided to do is save the native definition for these methods, before SF overrides them, and then reapply the native definition. We will only ever do this in test environments. We have this script run before each of our test sites is built. It is a very brute force implementation (reapply every 100ms) that we are just beginning to experiment with:

<script>
    let dfs = {};
    dfs['querySelector'] = document.querySelector;
    dfs['getElementById'] = document.getElementById;
    dfs['querySelectorAll'] = document.querySelectorAll;
    dfs['getElementsByClassName'] = document.getElementsByClassName;
    dfs['getElementsByTagName'] = document.getElementsByTagName;
    dfs['getElementsByTagNameNS'] = document.getElementsByTagNameNS;
    dfs['getElementsByName'] = document.getElementsByName;
    setInterval(function(){
        document.querySelector = dfs['querySelector'];
        document.getElementById = dfs['getElementById'];
        document.querySelectorAll = dfs['querySelectorAll'];
        document.getElementsByClassName = dfs['getElementsByClassName'];
        document.getElementsByTagName = dfs['getElementsByTagName'];
        document.getElementsByTagNameNS = dfs['getElementsByTagNameNS'];
        document.getElementsByName = dfs['getElementsByName'];
    }, 100);
</script>

With the native method definitions there, I haven’t found a time where the playground selector will error and it seems to work completely to find selectors as I’d expect. So that is the main reason why I think this is the root problem of the issue I was experiencing.

We are planning to try this to facilitate testing (and maybe a few other capabilities) and we are hopeful that this will not introduce any significant environment differences between where we test and prod. We think we may be fine, particularly with how we use SF LWC. But I would be very interested in others opinions in what SF is doing with their locker service and how else we might deal with it.

I think we could of course, just follow Salesforce’s way of querying. Emulating this in custom cypress commands: document.querySelector(‘LWC_component_selector’).shadowRoot.querySelector(‘element_selector’)

And I probably will try that as soon as document-fragments stop causing cypress to have this recursion error #5528 But that might be a lot of work for nested LWC components that are many levels deep, as I’m pretty sure we’d have to drill through every parent shadow level one at a time. So we’ll see.

I will leave this issue open a little while longer to see about other’s opinions. But if someone else thinks it should be closed, I understand.

[sergeyblohin]

@JasonFairchild, hi, I encountered the same problem when working with SalesForce. A new experimental feature experimentalShadowDomSupport helped me.

cy
  .get('one-app-nav-bar')
  .shadow()
  .find('one-app-nav-bar-item-root')
  .shadow()
  .find('a[title="Home"]')