cypress

Element not visible / CSS property: display: none

I'm working on the automation of testing in SAP Hybris with Cypress. I've received a blocker where Cypress can't find a component. You may see the component I'm talking about on the screenshot below. It is a section on the page that contains multiple products listed (for replacement). My goal is to test does this section contains all the products requested for replacement.

enter image description here

I've tried using this piece of code:

 cy.get('.ye-default-reference-editor-selected-listbox') // Target the scrollable body of the list
  .eq(18)
  .scrollIntoView()      // Scroll into view if it's not initially visible
  .should('exist')
  .should('be.visible',{ force: true })  // Ensure the element is visible
  .within(() => {
    // Select the specific row based on the title attribute
    cy.get('tr[title="CAN_BE_REPLACED_BY ->  [] - IQOS ILUMA One Holder Moss Green [G0000607] - Tunisia Product Catalog : Staged"]')
      .should('be.visible') // Ensure the row is visible
      .click({ force: true }); // Click on the row forcefully if necessary

What I have noticed is that Cypress gets stuck at this part: .should('be.visible',{ force: true }).

enter image description here

Solution

  • When the list box is disabled, it's generally because it needs a click to open it up. The click action by the user makes it visible.

    Generally the pattern is

    1. find the control you want to test
    2. if there's an open button or icon (usually on the right) click it
    3. if there's no button, click the control itself
    4. wait for the listbox to be visible with .should('be.visible')
    5. select the items in the list, filter the list to the one you want
    6. scroll it into view
    7. click it

    This is a typical example

    cy.get('[placeholder="text of placeholder"]').click()  // 1,2,3
cy.get('.listbox').should('be.visible')                // 4
cy.get('.listbox-items').eq(18)                        // 5
  .scrollIntoView()                                    // 6
  .click()                                             // 7

    If you post details, can make the example more relevant.