Slider: Not rendering in the cypress test execution

Bug Description

We are using webcomponent in our UI - https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-slider--docs Its rendering fine in all browsers and resolution but when we are executing cypress tests, the slider component isn't rendering. We have following cypress test: Then("I should see slider component", () => { cy.get("[data-testid='mySlider']").should("be.visible"); });

We are getting error in the cypress logs that Slider component with dimension 368x0 is not visible. After giving explicit height, the top level DOM rendered but none of the child nodes are getting rendered.

For example below is not working even after giving explicit height: cy.get("[data-testid=mySlider]").shadow().find(".ui5-slider-tickmarks").children().eq(4).click({ force: true });

I suspect its related to lack of polyfills or somehow the library for Slider isn't available. Is there any known issue with Slider component while testing using cypress?

Affected Component

Slider

Expected Behaviour

Slider should render fine in the cypress test env how its rendering in the normal browser

Isolated Example

No response

Steps to Reproduce

Due to confidentiality, its not possible to share cypress test commands and recording as contains other information. Please contact me over email if you need further details.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP Labs

Declaration

[X] I’m not disclosing any internal or sensitive information.

Hi @saurabhmehta02,

We are still investigating how cypress works with web components but I've tried following code with version 2.0-rc6 of webcomponents (no major changes have been done in ui5-slider) and it was executed correctly:

import { html } from 'lit';

describe("Slider", () => {
    it("test 1", () => {
        cy.mount(html`<ui5-slider data-testid="mySlider" min="0" max="5"></ui5-slider>`)

        cy.get("[data-testid='mySlider']")
            .shadow()
            .find("[part='handle']")
            .as("handle")
            .click();

        cy.get("@handle")
            .type("{rightArrow}{rightArrow}{rightArrow}")
    })
})

It would be nice if you can setup simple repository with cypress and your web component where the problem occurs so we can investigate further. Please follow up if the code that I've provided doesn't work for you.

Regards, Nayden

SAP / ui5-webcomponents