0
141
ViewsCompare el archivo json y los valores desplegables que se muestran de forma desordenada
Tengo mi archivo JSON con el siguiente texto [hay alrededor de 100 valores, acabo de poner 4 aquí]
{ label: ['a', 'b', 'c', 'd'], }Tengo mi menú desplegable en mi sitio web que tiene estos valores pero en un orden diferente.
¿Cómo puedo comparar que el texto del JSON y los valores desplegables son iguales?
Además, tengo un texto "TODO" que se muestra en el menú desplegable de forma predeterminada y no está incluido en el archivo JSON. Es así: ingrese la descripción de la imagen aquí
En el menú desplegable, el resto de los valores están en el archivo JSON.
He hecho lo siguiente pero no funciona.
cy.fixture('label.json') .then(function (category) { this.cat = category }) }) cy.get('#labels').each(($ele, i) => { expect($ele).to.have.text(this.category.label[i]) }) })Cualquier ayuda será muy apreciada Gracias
2 answers
Answer question0
Puedes hacer algo como esto:
cy.fixture("labels.json").then((labels) => { cy.get("select#labels option").each(($ele, i) => { if ($ele.text().trim() == "ALL") { expect(labels.label).to.not.include($ele.text().trim()) } else { expect(labels.label).to.include($ele.text().trim()) } }) })Corredor de prueba:
0
Una forma es asignar los elementos de opción a una matriz de textos de etiqueta
HTML
<select name="labels" id="labels"> <option value="" selected="">ALL</option> <option value="a">a</option> <option value="c">c</option> <option value="b">b</option> <option value="d">d</option> </select>Prueba
cy.get('option') .then($options => Cypress.$.map($options, (option => option.innerText))) .then(optionLabels => { // optionLabels is ['ALL', 'a', 'c', 'b', 'd'] cy.fixture('my-labels.json'),then(fixture => { const expected = fixture.label.concat(['ALL']) // add the ALL // expected is ['a', 'c', 'b', 'd', 'ALL'] expect(optionLabels).to.have.members(expected) // .to.have.members checks with any order }) })Resultado
Cuando falta una opción
Texto de opción truncado
Cuando el texto de su opción está truncado pero desea que coincida con el texto en el dispositivo,
"clarif..." -> "clarification"puede transformar los datos del dispositivo antes de compararlos.
Además, dado que hay 124 entradas, es mejor registrar solo los errores en lugar de la lista completa.
<select> <option>ALL</option> <option>clarif...</option> <option>a</option> <option>d</option> <option>b</option> </select> cy.get('option') .then($options => Cypress.$.map($options, (option => option.innerText))) .then(console.log) .then(optionLabels => { cy.fixture('my-labels.json').then(fixture => { const truncate = (text) => text.length > 6 ? text.slice(0,6) + '...' : text; const expected = fixture.label.concat(['ALL']) // add ALL .map(truncate) // convert fixture to short strings const notInDropdown = expected.filter(exp => !optionLabels.includes(exp)) const extraInDropdown = optionLabels.filter(label => !expected.includes(label)) if (notInDropdown.length) { throw `Not in dropdown: ${notInDropdown.join(' ')}` } if (extraInDropdown.length) { throw `Extra in dropdown: ${extraInDropdown.join(' ')}` } cy.log('Dropdown passes') }) }) })