Hola, estoy trabajando con Cypress para pruebas de interfaz de usuario. Según el usuario, tenemos un botón adicional en la página.
¿Hay alguna forma en que Cypress pueda buscar un botón y ejecutar los comandos si el botón está presente y omitir el comando si el botón no está presente, evitando así el error de elemento no encontrado?
<div class="btn btn-success" id="editButton">Edit</div>El código de Cypress es
if (!cy.get('div[id=editButton]')) { this.skip(); } else { cy.get('div[id=editButton]').click(); }Y, sin embargo, Cypress arroja un error de elemento no encontrado.
En lugar de usar el comando cypress, debe usar un comando JQuery para esto. Y en eso hay que comprobar el largo. Si es 0, entonces el elemento no existe.
if (Cypress.$('div[id=editButton]').length == 0) { this.skip() } else { cy.get('div[id=editButton]').click() }Yo iría con la siguiente opción.
cy.get('div[id="editButton"]') .then (($element) => { if($element.length) cy.get('div[id=editButton]').click() })Tal vez use una variación de la prueba de texto dinámico
cy.get('body').then(($body) => { const button = $body.find('div[id=editButton]') if (button.length) { // yup found it cy.get('div[id=editButton]').click() } // don't need this.skip() }) Consulte las advertencias en esa página sobre las pruebas condicionales. Si su $body.find('div[id=editButton]') falla porque el botón aún no apareció, deberá agregar más aserciones a la prueba.
Otro enfoque es probar diferentes clases de usuarios. Esto hace que su conjunto de pruebas sea más completo
Por ejemplo,
it('tests the admin user', () => { cy.login('admin') cy.get('div[id=editButton]').click() ... callCommonUserTests() }) it('tests the read-only user', () => { cy.login('read-only') // cy.get('div[id=editButton]').click() // edit button not available ... callCommonUserTests() })Ahora el conjunto de pruebas es mucho más simple y menos propenso a problemas de sincronización.
Puede consolidar código común para todos los usuarios en funciones o comandos personalizados.
Para usar jQuery con Cypress.$ puedes probar la existencia sin fallar la prueba
it('tests the edit button', () => { if (Cypress.$('#editButton').length) { cy.get('div[id=editButton]').click() // rest of test } })O
it('tests the edit button', () => { if (!Cypress.$('#editButton').length) { this.skip() // exit the test here } cy.get('div[id=editButton]').click() // rest of test })Puede verificar si el botón Edit está en la página sin fallar la prueba
cy.get('div.btn').then($buttons => { if ($buttons.text().includes('Edit')) { cy.get('div[id=editButton]').click() }) })