Cara Mengesahkan Muat Naik dan Muat Turun di Cypress

pengenalan

Mengendalikan muat naik dan muat turun fail adalah senario biasa dalam ujian hujung ke hujung. Dalam siaran ini, kami akan meneroka cara mengendalikan kedua-dua muat naik fail dan muat turun menggunakan Cypress. Walaupun Cypress tidak mempunyai sokongan terbina dalam untuk operasi ini, anda boleh mencapai fungsi ini dengan memanfaatkan beberapa perpustakaan dan set perintah Cypress yang mantap.

Menjelang akhir panduan ini, anda akan tahu cara:

• Muat naik fail menggunakan Cypress.
• Sahkan muat naik fail yang berjaya.
• Muat turun fail dan sahkan kandungannya di Cypress.

Prasyarat

Untuk mengikuti contoh, pastikan anda telah memasang dan menyediakan Cypress. Jika anda menggunakan Cypress v13.6.2, ia serasi dengan pendekatan yang ditunjukkan dalam siaran ini.

Muat Naik Fail dalam Cypress

Untuk memuat naik fail dalam Cypress, kami akan menggunakan pemalam cypress-file-upload, yang menyediakan cara mudah untuk mensimulasikan tindakan muat naik fail semasa ujian anda.
Langkah 1: Pasang Pemalam muat naik fail cypress
Untuk mengendalikan muat naik fail dalam Cypress, anda perlu memasang pakej muat naik fail cypress terlebih dahulu.

npm install --save-dev cypress-file-upload

Seterusnya, importnya dalam fail commands.js anda di dalam folder sokongan Cypress:

import 'cypress-file-upload';

Langkah 2: Struktur Folder
Pastikan projek anda mempunyai struktur folder berikut untuk menyimpan fail ujian dan memuat naiknya semasa ujian:

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

Langkah 3: Memuat Naik Fail
Setelah anda memasang pemalam, anda boleh menggunakan arahan attachFile untuk memuat naik fail daripada folder lekapan.

Begini cara anda boleh memuat naik fail:

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

Dalam ujian ini:

• Kami melawat halaman di mana input fail wujud.
• Kami menggunakan attachFile() untuk mensimulasikan muat naik fail daripada folder lekapan.
• Penegasan menyemak sama ada nama fail yang dimuat naik muncul dengan betul pada halaman.

Mengesahkan Muat Naik Fail

Mengesahkan muat naik fail boleh semudah menyemak sama ada nama atau laluan fail muncul pada halaman web selepas muat naik. Walau bagaimanapun, untuk senario yang rumit (cth., mengesahkan kandungan atau saiz fail), anda mungkin memerlukan semakan atau stub sebelah pelayan.

Contoh: Sahkan Muat Naik Fail dengan Data Tambahan

describe('File Upload and Validation', () => {
  it('should upload a file and validate metadata', () => {
    cy.visit('/upload');

    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Assert that the file metadata like size is displayed correctly
    cy.get('.file-size').should('contain', 'Size: 1MB');
  });
});

Muat Turun Fail dalam Cypress
Cypress tidak menyediakan sokongan asli untuk mengesahkan muat turun fail (memandangkan penyemak imbas memuat turun fail di luar kawalan Cypress), tetapi kami boleh mengatasinya dengan menyemak terus fail yang dimuat turun dalam sistem fail setempat.

Langkah 1: Memasang cypress-downloadfile
Untuk mengesahkan muat turun fail dalam Cypress, kami boleh menggunakan pemalam cypress-downloadfile.

Pasang melalui npm:

npm install --save-dev cypress-file-upload

Seterusnya, tambahkan pemalam pada fail commands.js anda:

import 'cypress-file-upload';

Langkah 2: Memuat Turun dan Mengesahkan Fail
Anda kini boleh menulis ujian yang memuat turun fail dan mengesahkan kandungannya.

Contoh: Memuat Turun Fail

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

Dalam ujian ini:

• Kami menggunakan cy.downloadFile() untuk memuat turun fail daripada URL dan menyimpannya dalam folder cypress/downloads.
• Selepas muat turun, kami mengesahkan bahawa fail itu wujud menggunakan cy.readFile().

Langkah 3: Mengesahkan Kandungan Fail
Anda mungkin ingin mengesahkan kandungan fail yang dimuat turun untuk memastikan muat turun berjaya. Untuk fail berasaskan teks (cth., .txt, .csv), cy.readFile() Cypress boleh digunakan untuk menegaskan kandungan fail.

Contoh: Sahkan Kandungan Fail Yang Dimuat Turun

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

Ujian ini memuat turun fail .txt dan menyemak sama ada ia mengandungi teks yang dijangkakan.

Amalan Terbaik untuk Muat Naik dan Muat Turun Fail di Cypress

1. Gunakan Lekapan untuk Muat Naik: Sentiasa simpan fail untuk dimuat naik dalam folder lekapan untuk memastikan data ujian anda teratur dan boleh diakses.
2. Bersihkan Folder Muat Turun: Sebelum memulakan ujian baharu, bersihkan folder muat turun untuk mengelakkan isu dengan baki fail daripada ujian sebelumnya.
3. Sahkan Respons Pelayan: Untuk muat naik fail, sentiasa sahkan respons sebelah pelayan sebagai tambahan kepada penegasan UI untuk memastikan fail diproses dengan betul.
4. Gunakan Direktori Sementara untuk Muat Turun: Simpan fail yang dimuat turun dalam direktori sementara (cypress/muat turun) untuk mengelakkan kekacauan struktur projek anda.
5. Muat Naik Fail Olok-olok (Pilihan): Dalam senario di mana anda ingin mengejek muat naik fail atas sebab prestasi, gunakan stub untuk memintas muat naik fail sebenar.

Kesimpulan

Muat naik dan muat turun fail ialah operasi kritikal dalam ujian aplikasi web, dan walaupun Cypress tidak menyokong operasi ini secara asli, pemalam cypress-file-upload dan cypress-downloadfile menyediakan penyelesaian yang mudah digunakan.

Dalam panduan ini, kami meneroka cara untuk:

• Muat naik fail menggunakan pemalam Cypress-file-upload.
• Sahkan muat naik fail dengan menyemak nama fail dan metadata.
• Muat turun fail menggunakan pemalam cypress-downloadfile dan sahkan kewujudan dan kandungan fail yang dimuat turun.

Dengan alatan dan teknik ini, anda boleh mengendalikan muat naik dan muat turun fail dalam ujian hujung ke hujung Cypress anda dengan yakin!

Atas ialah kandungan terperinci Cara Mengesahkan Muat Naik dan Muat Turun di Cypress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!