Giới thiệu về xử lý file trong Cypress
Xử lý việc tải lên và tải xuống file là những tình huống phổ biến trong kiểm thử end-to-end. Trong bài viết này, chúng ta sẽ khám phá cách xử lý cả việc tải lên và tải xuống file bằng Cypress. Mặc dù Cypress thiếu hỗ trợ tích hợp cho các thao tác này, bạn vẫn có thể đạt được chức năng này bằng cách tận dụng một vài thư viện và bộ lệnh mạnh mẽ của Cypress.
Đến cuối hướng dẫn này, bạn sẽ biết cách:
- Tải file lên bằng Cypress.
- Xác thực việc tải file lên thành công.
- Tải file xuống và xác thực nội dung của chúng trong Cypress.
Điều kiện tiên quyết
Để làm theo các ví dụ, hãy đảm bảo bạn đã cài đặt và thiết lập Cypress. Nếu bạn đang sử dụng Cypress v13.6.2, nó tương thích với các phương pháp được trình bày trong bài viết này.
Tải tập tin lên Cypress
Để tải file lên trong Cypress, chúng ta sẽ sử dụng plugin cypress-file-upload, cung cấp một cách dễ dàng để mô phỏng các hành động tải file lên trong quá trình kiểm thử của bạn.
Bước 1: Cài đặt Plugin cypress-file-upload
Để xử lý việc tải file lên trong Cypress, trước tiên bạn cần cài đặt gói cypress-file-upload.
npm install --save-dev cypress-file-upload
Tiếp theo, hãy import nó vào file commands.js của bạn bên trong thư mục support của Cypress:
import 'cypress-file-upload';
Bước 2: Cấu trúc thư mục
Đảm bảo dự án của bạn có cấu trúc thư mục sau để lưu trữ các file kiểm thử và tải chúng lên trong quá trình kiểm thử:
cypress/ fixtures/ exampleFile.pdf // Test file for uploading e2e/ fileUploadTests.cy.js // Test file to upload and validate
Bước 3: Tải lên một File
Sau khi bạn đã cài đặt plugin, bạn có thể sử dụng lệnh attachFile để tải lên một file từ thư mục fixtures.
Dưới đây là cách bạn có thể tải lên một file:
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'); });
});
Trong đoạn kiểm thử này:
- Chúng ta truy cập trang nơi tồn tại input file.
- Chúng ta sử dụng attachFile() để mô phỏng việc tải file lên từ thư mục fixtures.
- Việc khẳng định kiểm tra xem tên file đã tải lên có xuất hiện chính xác trên trang hay không.
Xác thực việc tải File lên
Việc xác thực tải file lên có thể đơn giản như kiểm tra xem tên file hoặc đường dẫn có xuất hiện trên trang web sau khi tải lên hay không. Tuy nhiên, đối với các trường hợp phức tạp (ví dụ: xác minh nội dung hoặc kích thước file), bạn có thể cần kiểm tra phía máy chủ hoặc stubs.
Ví dụ: Xác thực việc tải File lên với dữ liệu bổ sung
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'); });
});
Tải File xuống trong Cypress
Cypress không cung cấp hỗ trợ gốc để xác minh việc tải file xuống (vì trình duyệt tải file xuống ngoài quyền kiểm soát của Cypress), nhưng chúng ta có thể giải quyết vấn đề này bằng cách kiểm tra trực tiếp file đã tải xuống trong hệ thống file cục bộ.
Bước 1: Cài đặt cypress-downloadfile
Để xác thực việc tải file xuống trong Cypress, chúng ta có thể sử dụng plugin cypress-downloadfile.
Cài đặt nó thông qua npm:
npm install --save-dev cypress-downloadfile
Tiếp theo, thêm plugin vào file commands.js của bạn:
require('cypress-downloadfile/lib/downloadFileCommand');
Bước 2: Tải xuống và xác thực File
Bây giờ bạn có thể viết một bài kiểm thử tải xuống một file và xác minh nội dung của nó.
Ví dụ: Tải xuống một File
describe('File Download Test in Cypress', () => { it('should download a file and validate its content', () => { cy.visit('/download'); // Download the file and save it to a custom downloads folder cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf'); // Validate that the file exists in the specified location cy.readFile('cypress/downloads/sample.pdf').should('exist'); });
});
Trong bài kiểm thử này:
- Chúng ta sử dụng cy.downloadFile() để tải xuống một file từ một URL và lưu trữ nó trong thư mục cypress/downloads.
- Sau khi tải xuống, chúng ta xác thực rằng file tồn tại bằng cách sử dụng cy.readFile().
Bước 3: Xác thực nội dung File
Bạn có thể muốn xác minh nội dung của file đã tải xuống để đảm bảo việc tải xuống thành công. Đối với các file dựa trên văn bản (ví dụ: .txt, .csv), cy.readFile() của Cypress có thể được sử dụng để khẳng định nội dung của file.
Ví dụ: Xác thực nội dung File đã tải xuống
describe('Validate Downloaded File Content', () => { it('should download and check the content of a text file', () => { cy.visit('/download'); // Download the text file cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt'); // Read the file and assert its content cy.readFile('cypress/downloads/sample.txt').then((fileContent) => { expect(fileContent).to.contain('This is a sample text file'); }); });
});
Bài kiểm thử này tải xuống một file .txt và kiểm tra xem nó có chứa văn bản mong đợi hay không.
Best practices cho việc Tải lên và Tải xuống file trong Cypress
- Sử dụng Fixtures để Tải lên: Luôn lưu trữ các file để tải lên trong thư mục fixtures để giữ cho dữ liệu kiểm thử của bạn được tổ chức và dễ truy cập.
- Dọn dẹp Thư mục Tải xuống: Trước khi bắt đầu các bài kiểm thử mới, hãy dọn dẹp thư mục downloads để tránh các sự cố với các file còn sót lại từ các lần chạy kiểm thử trước đó.
- Xác minh Phản hồi của Máy chủ: Đối với việc tải file lên, luôn xác minh phản hồi phía máy chủ ngoài các khẳng định giao diện người dùng để đảm bảo file được xử lý đúng cách.
- Sử dụng Thư mục Tạm thời để Tải xuống: Lưu trữ các file đã tải xuống trong các thư mục tạm thời (cypress/downloads) để tránh làm lộn xộn cấu trúc dự án của bạn.
- Mock việc Tải File lên (Tùy chọn): Trong các trường hợp bạn muốn mock việc tải file lên vì lý do hiệu suất, hãy sử dụng stubs để bỏ qua việc tải file lên thực sự.
Kết luận
Việc tải file lên và tải xuống là các thao tác quan trọng trong kiểm thử ứng dụng web, và mặc dù Cypress không hỗ trợ native các thao tác này, các plugin cypress-file-upload và cypress-downloadfile cung cấp các giải pháp thay thế dễ sử dụng. Trong hướng dẫn này, chúng ta đã khám phá cách:
- Tải file lên bằng plugin cypress-file-upload của Cypress.
- Xác thực việc tải file lên bằng cách kiểm tra tên file và siêu dữ liệu.
- Tải file xuống bằng plugin cypress-downloadfile và xác thực sự tồn tại và nội dung của các file đã tải xuống.
Với những công cụ và kỹ thuật này, bạn có thể tự tin xử lý việc tải file lên và tải xuống trong các bài kiểm thử end-to-end của Cypress!