Test runner "time travel" not working with custom elements

[chbiel]

When trying to reproduce the problem a found the real issue here :) Previous title: "Test runner "time travel" not working"

The issue is not when using react states in a specific way (as thought earlier).

Current behavior

The issue comes from using custom elements that are added again to the DOM when hovering a command in the test runner and the "connectedCallback" function, that ensures the rendering, is executed again.

Context

We wrap our whole application in custom elements, as we have a distributed frontend architecture that loads applications during runtime and all of that applications are custom elements. That leads to the problem, that the whole application is "reset" to an initial state as the whole application is rendered from scratch when the custom element is loaded in the DOM.

Desired behavior

Also save the custom elements content when creating a DOM snapshot in a way, that does not rerender the custom element when restoring the snapshot.

Test code to reproduce

https://github.com/chbiel/chbiel-cypress-custom-element-react-bug

run yarn start then yarn cypress:open

Previous issue:

I actually don't know if this is a bug or something that we miss. I asked in the chat first but did not get help there so here is our observation:

We have a react application heavily rely on internal state.

When using the test runner UI, the time travel feature does not work for as the shown down snapshot is always reset to the initial state before any actions where executed (like I open the page the first time).

It seems that, when hovering a command in the test runner, the dom snapshot is loaded but react resets the application back to the initial state.

So we don't have any benefit of the "time travel" feature, as it does not work.

Additionally: When doing click actions for example I can see where the click happend, but the element is not shown in the loaded DOM snapshot.

As said I don't know if this is a bug, so I would appreciate your input.

Current behavior

When hovering a command in the test runner, the loaded DOM snapshot is not the one I would expect, but the initial DOM before executing any command.

Desired behavior

I see the application as it was at the point of a command, when hovering that command.

Test code to reproduce

I don't have reproduceable code at the moment that I can share. If requested, I will try to create a working example.

In general it should be reproduceable with any react application that manages internal state.

Versions

4.12.1

[PodJumper]

Just making sure you're not inadvertently click/pinning snapshots? Doesn't sound like it but just in case.

[chbiel]

Just making sure you're not inadvertently click/pinning snapshots? Doesn't sound like it but just in case.

yes. it does not work in both cases. It shows the same behaviour when pinning and hovering a command in the test runner.

[jennifer-shehane]

Yah, it's possible this could be a bug.

We'll need a reproducible example in order to investigate this, as it's likely highly dependent on the code from he application under test.

Please comment in this issue with a reproducible example or else we will have to close the issue. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

[chbiel]

Ok, I will try to put an example together next week.

[chbiel]

When trying to reproduce the issue, I fell over the real issue :) Updated the title and initial report.

Do you need more information or can I further help investigating the issue?

[chbiel]

@jennifer-shehane do you need more information? Or can I further help investigate this?

[chbiel]

hi @jennifer-shehane, can you remove the "needs information" tag if all informations are provided or point me to what is missing?

[jennifer-shehane]

I can recreate the issue with the following repo: https://github.com/chbiel/chbiel-cypress-custom-element-react-bug

• yarn
• yarn start
• cypress open
• Hover over commands - they will not 'time travel' although clicking was showing new content.

[achaikou]

I'd like to additionally point out that this issue is rather inconvenient during test development as it changes final DOM state even on accidental open log hover. In our case final state is not reset, but broken due to implementation of connectedCallback in external component. This might mean test restart is only available workaround.

describe('Custom element and connectedCallback', () => {
    it('Renders component as many times as user hovers over log', () => {
        cy.log("Hover over me and then hover back to main space.")
        cy.visit("https://equinor.github.io/fusion-components/iframe.html?id=general-markdown-editor--default&args=&viewMode=story#/")        
    })
})

[mrttrifork]

We are also experiencing this error in the time travel. Our issue is that Cypress tries to initiate the custom element without any arguments

We get this error

!

I assume it's because Cypress tries to set innerHTML or using document.createElement with the custom element inside of it like this.

<div>
    <horizontal-view-tab></horizontal-view-tab>
</div>

or

document.createElement("horizontal-view-tab");

But we only use custom elements through Typescript/Javascript so that we can use initialize the element with parameters.

Here is the relevant code for the custom element

export interface HorizontalViewTabCustomElementArgs {
    selectFirstTabAutomatically?: boolean;
    selectedTab?: IViewTab;
    viewTabs: IViewTab[];
}

export class HorizontalViewTabCustomElement extends HTMLElement {
    constructor(private horizontalViewTabArgs: HorizontalViewTabCustomElementArgs) {
        super();
        const {
            selectedTab,
            selectFirstTabAutomatically = true,
            viewTabs
        } = horizontalViewTabArgs;
    }
}

Example of usage

const horizontalViewTab = new HorizontalViewTabCustomElement({
    viewTabs: []
});

[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.

[cypress-app-bot]

This issue has been closed due to inactivity.