Tengo un pequeño problema con mi código javacript/cypress.
Lo que estoy tratando de hacer es que si el usuario hace clic en un botón (es un enlace <a> en el html más abajo), espere hasta que la selección de clase Agregada se elimine del dom con ese enlace <a> .
Déjame mostrarte lo que quiero decir. Aquí está el botón:
<a class="oddsBoostedPrice button__bet eventSelection--link" "="">Haga clic en el botón y aparecerá brevemente una clase conocida como .selectionAdded (representa el extremo frontal como el texto 'Agregado' que se desplaza sobre el botón).
<a class="oddsBoostedPrice button__bet eventSelection--link selectionAdded" "=""> Después de unos momentos, el cursor 'Agregado' desaparece del botón y el elemento ahora se ve así (se agrega la clase .selected pero, lo que es más importante, vuelve a un estado en el que se puede hacer clic, lo que solo ocurre una vez que .selectionAdded se elimina del dom).
<a class="oddsBoostedPrice button__bet eventSelection--link selected" "="">Entonces, básicamente, mi lógica a continuación es básicamente encontrar un elemento que aún no esté seleccionado, hacer clic en él, salir del bucle y luego esperar a que el elemento no contenga la selección de clase Agregada (para garantizar que se pueda hacer clic en el botón, ya que más adelante haré clic en el mismo botón) .
const oddsSelectionElements = new OddsSelectionElements(); When ("User selects an available bet bundle selection", () => { oddsSelectionElements.oddsButton().each((element, index) => { if (element.not("have.class", "selected")) { oddsSelectionElements.selectionName().eq(index).invoke("text").then(formatters.formatString).as("selectionName"); cy.wrap(element).click(); return false; } }) oddsSelectionElements.oddsButton().not("have.class", "selectionAdded"); })clase OddsSelectionElements
class OddsSelectionElements { oddsButton() { return cy.get('.button__bet') } }exportar OddsSelectionElements predeterminados
Mi problema es que mi prueba es inestable y parece que se debe a que, a veces, más adelante en la prueba, hace clic en el botón cuando no está en un estado en el que se pueda hacer clic y creo que es porque no espera hasta que el botón no tenga esa clase de selectionAdded agregada.
¿Qué tiene que pasar para arreglar esto?
Intenta verificar el css del elemento de esta manera
if (!element.css("selected")) { ...El comando Cypress .not() debe pasar un selector
cy.get('selector').not('.selected')La forma en que lo usa no es una sintaxis válida, pero desafortunadamente no da un error
.not("have.class", "selectionAdded") // "have.class" can't be used with .not()en tu prueba
oddsSelectionElements.oddsButton() .each((element, index) => { if (element.not(".selected").length === 0) { oddsSelectionElements.selectionName() .eq(index) .invoke("text") .then(formatters.formatString).as("selectionName"); cy.wrap(element).click(); return false; } }) oddsSelectionElements.oddsButton().not(".selectionAdded");Ok, para arreglar esto puedes agregar tiempos de espera. Esto puede ser local para un solo comando o también global. Por defecto, Cypress tiene un tiempo de espera de 4 segundos
Para aplicar el tiempo de espera localmente, puede hacer algo como esto:
//timeout for 7 seconds cy.get('selector', { timeout: 7000 }).("have.class", "selectionAdded") O, si desea aumentar el tiempo de espera globalmente para todos los comandos, vaya a cypress.json y agregue:
defaultCommandTimeout: 7000También cambie:
oddsSelectionElements.oddsButton().("not.have.class", "selectionAdded")