Element not visible / CSS property: display: none [closed]

Question

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.

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 }).

Answer 1

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.

Answer 2

1. cy.get('some-element').should('be.visible', { force: true }) is not a valid use of cy.should. { force: true } is used on Cypress actions that depend on Cypress' Actionability rules to ignore them. cy.should() is not one of those actions, it is a validation function.
2. Cypress is pretty clear on why your check for .should('be.visible') is failing -> the element you are checking has display: none. You may need to do a different scroll action to force the element into view (perhaps some of the nested scroll boxes I saw in the first screenshot are causing issues?).