La aplicación tiene una lista de elementos en una tabla y los elementos tienen [id=item[0].setupCost, id=item[1].setupCost, id=item[2].setupCost] etc.
También hay una funcionalidad para agregar elementos, por lo que el índice sigue aumentando.
Quiero obtener un campo de entrada independientemente de usar números mágicos. Por ejemplo (cy.get('[id=item[some_regex].setupCost]')
Por si necesitas otra respuesta:
Puede usar una expresión regular si agrega una extensión jQuery.
Funciona porque Cypress usa jQuery internamente y puede modificar el comportamiento del selector extendiendo jQuery.
it('finds multiple ids by regex', () => { const $ = Cypress.$ $.extend( $.expr[':'], { idRegex: function(a, i, m) { const regex = new RegExp(m[3], 'i'); return regex.test(a.getAttribute('id')); } } ) const regex = 'item\\[\\d+\\].setupCost' cy.get(`input:idRegex(${regex})`) .its('length') .should('eq', 3) // ✅ }) Coloque la extensión jQuery en /cypress/support/index.js para usarla globalmente.
Tenga en cuenta que en la expresión regular tenemos que escapar dos veces porque pasamos una cadena, no una expresión regular.
La expresión regular que se aplica es \[id="item\[\d+\].setupCost\] .
Encierre la expresión regular entre barras diagonales, no entre comillas.
cy.get(/\[id="item\[\d+\].setupCost\]/)Esta sintaxis no está documentada : funciona (en Cypress v9.5.0) pero solo devuelve un resultado.
Entonces, si desea contar sus artículos, esto fallará
cy.get(/\[id="item\[\d+\].setupCost\]/) .its('length') .should('eq', 3) // ❌ Si desea utilizar selectores de atributos parciales, este es el más fuerte ya que incluye .setupCost
Ref Encuentra el elemento con id que comienza con "local-" y termina con "-remote"
cy.get('[id^="item"][id$=".setupCost"]') // use "starts-with" and "ends-with" selectorsEsto tiene éxito con la prueba de conteo.
cy.get('[id^="item"][id$=".setupCost"]') .its('length') .should('eq', 3) // ✅Podría crear un comando Cypress personalizado que insertaría el índice por usted. A continuación, asumo que la id a la que hace referencia es la identificación del elemento y es un selector de CSS estándar
Cypress.Commands.add('getItemById', (index) => { return cy.get(`#item\\[${index}\\].setupCost`) }); cy.getItemById(0)...