Giới thiệu về Xử lý Tải lên và Tải xuống File trong Cypress
Tải lên và tải xuống file là những thao tác quan trọng trong kiểm thử end-to-end, đặc biệt trong các ứng dụng web phức tạp. Trong bài viết này, chúng ta sẽ tìm hiểu cách thực hiện những thao tác này với Cypress, mặc dù framework này không có hỗ trợ tích hợp cho các chức năng này. Tuy nhiên, bạn hoàn toàn có thể thực hiện bằng cách sử dụng các thư viện và lệnh mạnh mẽ từ Cypress.
Nội dung bài viết sẽ giúp bạn nắm được các kỹ năng sau:
- Cách tải lên file bằng Cypress.
- Xác thực việc tải lên file thành công.
- Cách tải xuống file và kiểm tra nội dung của nó trong Cypress.
Các yêu cầu cần thiết
Trước khi bắt đầu, bạn cần đảm bảo rằng bạn đã cài đặt và cấu hình Cypress. Phiên bản tối thiểu được khuyến nghị là Cypress v13.6.2 để tương thích với các kỹ thuật được trình bày trong bài viết này.
Hướng dẫn Tải lên File trong Cypress
Bước 1: Cài đặt Plugin Tải lên File
Để thực hiện tải lên file trong Cypress, bạn cần cài đặt gói cypress-file-upload bằng lệnh sau:
npm install --save-dev cypress-file-uploadTiếp theo, bạn cần import plugin vào file commands.js trong thư mục support của Cypress:
import 'cypress-file-upload';Bước 2: Cấu trúc Thư mục
Để thuận tiện cho việc kiểm thử, hãy đảm bảo rằng dự án của bạn có cấu trúc thư mục như sau:
cypress/
fixtures/
exampleFile.pdf // Tập tin kiểm thử để tải lên
e2e/
fileUploadTests.cy.js // File kiểm thử để tải lên và xác thựcBước 3: Thực hiện Tải lên File
Sau khi đã cài đặt plugin, bạn có thể sử dụng lệnh attachFile để tải lên file từ thư mục fixtures. Dưới đây là ví dụ về cách thực hiện:
describe('Kiểm thử Tải lên File trong Cypress', () => {
it('phải tải lên file thành công', () => {
// Truy cập trang có input tải lên file
cy.visit('/upload');
// Chọn phần tử input file và tải lên file
cy.get('input[type="file"]').attachFile('exampleFile.pdf');
// Xác thực rằng file đã được tải lên thành công
cy.get('.file-name').should('contain', 'exampleFile.pdf');
});
});Trong đoạn kiểm thử này:
- Chúng ta truy cập trang chứa input tải lên file.
- Sử dụng
attachFile()để tải lên file từ thư mụcfixtures. - Đảm bảo tên file đã được tải lên hiển thị trên trang kết quả.
Xác thực Việc Tải lên File
Việc xác thực file đã tải lên có thể đơn giản bằng cách kiểm tra xem tên file có hiển thị đúng trên trang hay không. Đối với các trường hợp phức tạp hơn (như kiểm tra nội dung hoặc kích thước file), dễ dàng hơn nếu bạn kiểm tra từ phía máy chủ hoặc sử dụng stubs.
Ví dụ: Xác thực Metadata File
describe('Kiểm thử Tải lên File và Xác thực Metadata', () => {
it('cần tải lên file và xác thực metadata', () => {
cy.visit('/upload');
cy.get('input[type="file"]').attachFile('exampleFile.pdf');
// Xác thực rằng metadata như kích thước được hiển thị đúng
cy.get('.file-size').should('contain', 'Size: 1MB');
});
});Tải xuống File trong Cypress
Cypress không hỗ trợ kiểm tra việc tải xuống file vì trình duyệt thực hiện thao tác này ngoài quyền kiểm soát của nó. Tuy nhiên, bạn có thể giải quyết bằng cách kiểm tra file đã tải xuống trong hệ thống file cục bộ của bạn.
Bước 1: Cài đặt Plugin Tải xuống File
Sử dụng plugin cypress-downloadfile để xác thực việc tải xuống file:
npm install --save-dev cypress-downloadfileSau đó, thêm plugin vào file commands.js của bạn:
require('cypress-downloadfile/lib/downloadFileCommand');Bước 2: Thực hiện Tải xuống File
Viết một bài kiểm thử tải xuống file và xác minh nội dung của nó:
describe('Kiểm thử Tải xuống File trong Cypress', () => {
it('phải tải xuống file và xác minh nội dung của nó', () => {
cy.visit('/download');
// Tải xuống file và lưu vào thư mục tải xuống
cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf');
// Xác thực rằng file tồn tại trong thư mục đã chỉ định
cy.readFile('cypress/downloads/sample.pdf').should('exist');
});
});Trong đoạn kiểm thử trên:
- Sử dụng
cy.downloadFile()để tải xuống file từ URL và lưu vào thư mụccypress/downloads. - Xác nhận 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
Nếu bạn muốn xác thực nội dung của file đã tải xuống, bạn có thể sử dụng cy.readFile() để kiểm tra nội dung.
describe('Xác thực Nội dung của File Tải xuống', () => {
it('phải tải xuống và kiểm tra nội dung của file văn bản', () => {
cy.visit('/download');
// Tải xuống file văn bản
cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt');
// Đọc file và xác thực nội dung
cy.readFile('cypress/downloads/sample.txt').then((fileContent) => {
expect(fileContent).to.contain('Đây là một file văn bản mẫu');
});
});
});Các Thực Hành Tốt nhất cho Tải lên và Tải xuống File trong Cypress
- Sử dụng Fixtures để Tải lên: Lưu trữ các file kiểm thử trong thư mục
fixturesđể tổ chức và dễ truy cập. - Dọn dẹp Thư mục Tải xuống: Trước khi chạy các bài kiểm thử mới, hãy dọn dẹp thư mục tải xuống để tránh xung đột với các file còn sót lại từ lần chạy trước.
- Xác minh Phản hồi từ Máy chủ: Đối với tải lên file, luôn kiểm tra phản hồi từ máy chủ để đảm bảo file được xử lý đúng.
- Sử dụng Thư mục Tạm thời cho Tải xuống: Lưu các file tải xuống trong thư mục tạm (như
cypress/downloads) để cấu trúc dự án sạch sẽ. - Mock việc Tải File lên (Tùy chọn): Nếu bạn cần hiệu suất cao hơn, hãy sử dụng stubs để tránh việc tải file lên thực tế.
Kết luận
Việc tải lên và tải xuống file là những thao tác quan trọng trong kiểm thử ứng dụng web. Mặc dù Cypress không có hỗ trợ tích hợp cho các thao tác này, các plugin như cypress-file-upload và cypress-downloadfile cung cấp những giải pháp dễ sử dụng. Trong bài viết này, bạn đã học được cách:
- Tải lên file bằng plugin
cypress-file-upload. - Xác thực bộ upload file thông qua tên và metadata.
- Tải xuống file với plugin
cypress-downloadfilevà xác thực sự tồn tại cùng nội dung.
Với những công cụ và kỹ thuật này, bạn sẽ tự tin hơn khi thực hiện kiểm thử các thao tác tải lên và tải xuống file trong các thử nghiệm end-to-end của Cypress!
source: viblo
