Para hacer algunas pruebas, necesito establecer campos en un valor. Tengo algunos problemas para establecer una lista desplegable de la mejor manera. Otras suites parecen comenzar antes de que se complete una suite con la lista desplegable. Estoy recorriendo los campos, y por campo hice una suite, específicamente para asegurarme de que no se hagan en paralelo. La suite establece y comprueba el campo.
Para la lista desplegable (quasar q-select), la situación es que no sé cuántas opciones hay y, después de n opciones, se agregan nuevas opciones al contenido de la selección y se eliminan las antiguas. Esto significa que si solo selecciona el div que contiene todas las opciones, funcionará si su valor es de esa cantidad.
En este momento tengo esta función personalizada para una lista desplegable. Cada vez que presiona la flecha hacia abajo, la selección se mueve hacia abajo y, cuando sea necesario, agregará las siguientes opciones a la lista. Por lo tanto, sigo necesitando obtener el contenido.
Cypress.Commands.add('selectOption', (strOptionValue) => { function funcSelect (strOptionValue, iIndex) { cy.get('.q-select__options--content') .find('.q-item') .eq(iIndex) .then($oOption => { cy.wrap($oOption) .find('[class=q-item__label]') .then($oOptionLabel => { const strListValue = $oOptionLabel.text(); cy.log('['+strOptionValue+']-['+strListValue+']'); if (strListValue === strOptionValue) { cy.wrap($oOption) .click(); } else { cy.wrap($oOption) .type('{downarrow}'); funcSelect(strOptionValue, iIndex + 1); } }); }); } funcSelect(strOptionValue, 0); });Lo que creo que no está bien: usar el archivo index. La cantidad no cambia en la lista, y ahora sigue revisando toda la lista. Creo que de alguna manera debería ser posible hacer:
¿Alguna idea aquí?
EDITAR: Hay dos desafíos adicionales: a. A veces, el comienzo se encuentra en la mitad de la cantidad total de artículos. La flecha hacia abajo, en el último elemento, se mueve al primero. Esto está bien, pero significa que una ruptura también debe estar en el elemento donde comenzó por primera vez. b. La 'flecha hacia abajo' hace lo mismo que el clic, selecciona el elemento. Todavía estoy comprobando, pero podría causar un problema al continuar con el ciclo de prueba antes de hacer clic en el valor real
Creo que está en el camino correcto con la función recursiva, pero necesita un protector de ruptura para detener la recursividad infinita.
Luego obtendría todas las etiquetas de opciones existentes que Cypress puede seleccionar actualmente (es decir, cargadas en DOM) y vería si el valor de búsqueda está en la lista.
Dado que la lista cambia cada recursión, volvería a consultar la opción dentro de if/else en lugar de envolver.
Por último, encadenaría la llamada recursiva dentro de un .then() , ya que .type('{downarrow}') ocurre en la cola de comandos de Cypress y solo desea pasar a la siguiente llamada después de que finalice ese paso. También puede usar una espera pequeña o una espera de intercepción si los elementos se obtienen de una API.
function selectOption(searchForValue, attempt = 0) { if (attempt > 10 ) throw 'Too many attempts - item not found'; cy.get('.q-select__options--content') .find('[class=q-item__label]') .then($labels => { const listValues = [...$labels].map(label => label.innerText) if (listValues.includes(searchForValue) { cy.contains('.q-select__options--content .q-item', searchForValue) .click() } else { cy.contains('.q-select__options--content .q-item', searchForValue) .type('{downarrow}') .then(() => { cy.wait(100) // or wait on an intercept alias if API involved selectOption(searchForValue, attempt + 1) }) } }) } selectOption(searchForValue); Por cierto, creo que los prefijos func y str quedaron obsoletos oficialmente en 1996;).
Superando el problema con la flecha hacia abajo
Según su comentario sobre la flecha hacia abajo, lo probé en la selección de cuásar "Estándar" con 1000 elementos.
Algunos de los selectores necesitaban ajustes, pero el principio funciona.
function selectOption(searchValue, attempt = 0) { if (attempt > 100 ) throw 'Too many attempts - item not found'; cy.get('.q-item__label') .then($labels => { const listValues = [...$labels].map(label => label.innerText) if (listValues.includes(searchValue)) { cy.contains('.q-item__label', searchValue).click() } else { const lastItem = listValues[listValues.length -1] cy.contains('.q-item__label', lastItem) .type('{downarrow}') .then(() => { selectOption(searchValue, attempt + 1) // next batch }) } }) } const searchValue = '500' cy.get('.q-field__append').click(); // open dropdown selectOption(searchValue); // find value cy.get('.q-field__control-container span') // confirm value .should('have.text', searchValue) // passes ✅