Trabajando con listas y dropdowns

Web site:

• https://itera-qa.azurewebsites.net/home/automation

Una manera más sencilla utilizando la función de Cypress contains , simplemente le decimos el elemento que contenga el texto que queremos y le damos click.

it.only("Interacting with the dropdown elements", function () {
    cy.visit("https://react-select.com/home");
    cy.get("#react-select-6-input").type(" ");

    cy.get("#react-select-6-listbox")
      .children()
      .children()
      .contains("Red")
      .click();
  });

Comparto los Links:

• “https://itera-qa.azurewebsites.net/home/automation”
• “https://react-select.com/home”

La razon por la que “no funcionaba” la opcion 5 es que la pagina ya aparece con algunas opciones marcadas y al ser seleccionadas estas dejan de ser opciones, precisamente por ser un select dinamico.

Si intentan con la opcion 8:

• "#react-select-option-8"
  si va a encontrar y clickear en este caso a “slate”.

¡Rock n’ Roll! 🤟

Para mi la pagina de itera-qa no funcionaba, tuve que usar otra como esta:
https://ultimateqa.com/simple-html-elements-for-automation/

it.only('Interactuando con los dropdowns', function() {
        cy.visit('https://ultimateqa.com/simple-html-elements-for-automation/')

        // Cuenta desde indice 0
        // en selects puedes seleccionar por indice, value o texto
         cy.get('select').select(2)

        cy.get('select').select('opel').should('have.value', 'opel')

        cy.get('select').select('Opel').should('have.value', 'opel')
    })

Para react select el codigo de click es deprecado y puede que no funcione, pero recuerden que siempre pueden hacer wrap del elemento (que trucazo no)

it.only('Interactuando con los dropdowns dinamicos', function() {
        cy.visit('https://react-select.com/home/')
        cy.get('#react-select-6-input').click()

        cy.get('#react-select-6-listbox').children().children().each(($el, index, $list)=> {
            if($el.text() === 'Red') {
                cy.wrap($el).click()
            }
        })
        
    })

Para el caso del click(), probé con la opción del wrap y me funcionó:

    it('Interacting with dynamic selectors', () => {
        cy.visit('https://react-select.com/home')
        cy.get('#react-select-6-input').type(' ')
        cy.get('#react-select-6-listbox')
        .children()
        .children()
        .each(($element, index, $list)=>{

            if($element.text() === 'Red'){
                cy.log('I am in the if');
                //$element.on('click',)
                cy.wrap($element).click()
                //$element.click()
            }
        })
    })
})

Caso alterno, si solo queremos enviar el dato y seleccionar.

	it.only('Select Dynamic', function () {
		cy.once('uncaught:exception', () => false)
		cy.visit('https://react-select.com/home')
		cy.get('#react-select-4-input').click().clear().clear()
        	cy.get('#react-select-4-input').type('Orange{enter}')
	})
})

Para buscar un texto en la terminal pueden utilizar Ctrl+F

Los dropdowns siempre dan problemas 😅