Operaciones de archivos de Playwright
Aunque Playwright se centra principalmente en la automatización de navegadores, ensubida y descarga de archivostambién es muy potente, pudiendo manejar fácilmente los escenarios comunes de interacción con archivos en el frontend.
Subida de archivos
En los formularios web, la subida de archivos normalmente se realiza a través de<input type="file">se completa. Playwright proporciona una API dedicada para manejar esto:
Método 1: setInputFiles()
await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');
-
Descripción de parámetros：
- Selector: método de localización del cuadro de selección de archivos.
- Ruta del archivo: ruta relativa/absoluta, admite un solo archivo o una matriz de varios archivos.
- Si se pasa
[], indica que se borran los archivos seleccionados.
Método 2: directamente a través de Locator
const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);
Método 3: simular arrastrar y soltar para subir (soportado por algunas aplicaciones)
const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');
Descarga de archivos
Playwright puede capturar los eventos de descarga del navegador y obtener la ruta de guardado del archivo.
Uso básico: escuchar la descarga
Ejemplo
const [download] = await Promise.all([
page.waitForEvent('download'), // Esperar a que comience la descarga
page.click('a#downloadButton'), // Activar la descarga
]);
// Guardar el archivo en la ruta especificada
await download.saveAs('downloads/report.pdf');
// Obtener la ruta de guardado predeterminada (directorio temporal del sistema)
const path = await download.path();
console.log('Ruta de descarga:', path);
// Obtener información de la descarga
console.log(await download.url()); // Enlace de descarga
console.log(await download.suggestedFilename()); // Nombre de archivo recomendado
page.waitForEvent('download'), // Esperar a que comience la descarga
page.click('a#downloadButton'), // Activar la descarga
]);
// Guardar el archivo en la ruta especificada
await download.saveAs('downloads/report.pdf');
// Obtener la ruta de guardado predeterminada (directorio temporal del sistema)
const path = await download.path();
console.log('Ruta de descarga:', path);
// Obtener información de la descarga
console.log(await download.url()); // Enlace de descarga
console.log(await download.suggestedFilename()); // Nombre de archivo recomendado
Capturas de pantalla y archivos de grabación de pantalla
Playwright también genera archivos por sí mismo (capturas de pantalla, vídeos, trace, etc.):
await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4'); // 在配置中开启 video 记录才可用
Ejemplo completo de operaciones de archivos
Ejemplo
import { test, expect } from '@playwright/test';
test('Ejemplo de subida y descarga de archivos', async ({ page }) => {
// Subir archivo
await page.goto('https://the-internet.herokuapp.com/upload');
const uploadInput = page.locator('input[type=file]');
await uploadInput.setInputFiles('tests/fixtures/avatar.png');
await page.click('#file-submit');
await expect(page.locator('#uploaded-files')).toHaveText('avatar.png');
// Descargar archivo
await page.goto('https://the-internet.herokuapp.com/download');
const [download] = await Promise.all([
page.waitForEvent('download'),
page.click('a[href="some-file.txt"]'),
]);
await download.saveAs('downloads/some-file.txt');
console.log('Descarga completada:', await download.suggestedFilename());
});
test('Ejemplo de subida y descarga de archivos', async ({ page }) => {
// Subir archivo
await page.goto('https://the-internet.herokuapp.com/upload');
const uploadInput = page.locator('input[type=file]');
await uploadInput.setInputFiles('tests/fixtures/avatar.png');
await page.click('#file-submit');
await expect(page.locator('#uploaded-files')).toHaveText('avatar.png');
// Descargar archivo
await page.goto('https://the-internet.herokuapp.com/download');
const [download] = await Promise.all([
page.waitForEvent('download'),
page.click('a[href="some-file.txt"]'),
]);
await download.saveAs('downloads/some-file.txt');
console.log('Descarga completada:', await download.suggestedFilename());
});
API de operaciones de archivos
| API | Función | Parámetros / Descripción |
|---|---|---|
page.setInputFiles(selector, files) |
Subir archivo | filesPuede ser una ruta de cadena, una matriz oFilePayload |
locator.setInputFiles(files) |
Subir archivo (método Locator) | |
page.waitForEvent('filechooser') |
Esperar el cuadro de diálogo de selección de archivos | DevuelveFileChooser |
fileChooser.setFiles(files) |
Establecer los archivos seleccionados | |
page.waitForEvent('download') |
Escuchar el evento de descarga | DevuelveDownload |
download.saveAs(path) |
Guardar el archivo descargado | Ubicación de almacenamiento personalizada |
download.path() |
Obtener la ruta de almacenamiento predeterminada del sistema | |
download.url() |
Obtener la URL de la solicitud de descarga | |
download.suggestedFilename() |
Obtener el nombre de archivo recomendado | |
page.screenshot({ path }) |
Captura de pantalla de la página | |
locator.screenshot({ path }) |
Captura de pantalla del elemento | |
page.video()?.saveAs(path) |
Guardar vídeo grabado | Requiere configuración para habilitar video |