¿Cómo probar entradas de archivos con Cypress?

Te sugerimos que revises esta solución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

it('Testing picture uploading', () => 
    cy.fixture('testPicture.png').then(fileContent => 
        cy.get('input[type="file"]').attachFile(
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        );
    );
);

Use el paquete de carga de archivos Cypress: https://www.npmjs.com/package/cypress-file-upload

Nota: testPicture.png debe estar en la carpeta de dispositivos de cypress

Con este enfoque/truco puedes hacerlo: https://github.com/javieraviles/cypress-upload-file-post-form

Se basa en diferentes respuestas del hilo mencionado anteriormente https://github.com/cypress-io/cypress/issues/170

Primer escenario (upload_file_to_form_spec.js):

Quiero probar una interfaz de usuario donde se debe seleccionar/cargar un archivo antes de enviar el formulario. Incluya el siguiente código en su archivo “commands.js” dentro de la carpeta de soporte de cypress, para que el comando cy.upload_file() pueda usarse desde cualquier prueba:

Cypress.Commands.add('upload_file', (fileName, fileType, selector) => 
    cy.get(selector).then(subject => 
        cy.fixture(fileName, 'hex').then((fileHex) => 

            const fileBytes = hexStringToByte(fileHex);
            const testFile = new File([fileBytes], fileName, 
                type: fileType
            );
            const dataTransfer = new DataTransfer()
            const el = subject[0]

            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
        )
    )
)

// UTILS
function hexStringToByte(str) 
    if (!str) 
        return new Uint8Array();
    

    var a = [];
    for (var i = 0, len = str.length; i < len; i += 2) 
        a.push(parseInt(str.substr(i, 2), 16));
    

    return new Uint8Array(a);

Luego, en caso de que desee cargar un archivo de Excel, complete otras entradas y envíe el formulario, la prueba sería algo como esto:

describe('Testing the excel form', function () 
    it ('Uploading the right file imports data from the excel successfully', function() 

    const testUrl = 'http://localhost:3000/excel_form';
    const fileName = 'your_file_name.xlsx';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const fileInput = 'input[type=file]';

    cy.visit(testUrl);
    cy.upload_file(fileName, fileType, fileInput);
    cy.get('#other_form_input2').type('input_content2');
    .
    .
    .
    cy.get('button').contains('Submit').click();

    cy.get('.result-dialog').should('contain', 'X elements from the excel where successfully imported');
)

)

La prueba de elementos de entrada de archivos aún no es compatible con Cypress. La única forma de probar las entradas de archivo es:

1. Emita eventos nativos (que Cypress tiene en su hoja de ruta).
2. Comprenda cómo su aplicación maneja las cargas de archivos con File API y luego apáguelo. Es posible pero no lo suficientemente genérico como para dar algún consejo específico.

Consulte este problema abierto para obtener más detalles.

Reseñas y valoraciones de la guía

Finalizando este artículo puedes encontrar los comentarios de otros creadores, tú igualmente eres capaz dejar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador