Opérations sur les fichiers avec Playwright
Bien que Playwright soit principalement utilisé pour l'automatisation de navigateur, il excelle dansle téléversement et le téléchargement de fichierset est suffisamment puissant pour gérer les scénarios courants d'interaction avec des fichiers côté front-end.
Téléversement de fichier
Dans les formulaires web, le téléversement de fichiers se fait généralement via<input type="file">. Playwright fournit des API dédiées pour gérer cela :
Méthode 1 : setInputFiles()
await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');
-
Description des paramètres：
- Sélecteur : comment localiser l'élément de saisie de fichier.
- Chemin de fichier : chemin relatif/absolu, prend en charge un fichier unique ou un tableau de plusieurs fichiers.
- Si vous passez
[], cela efface les fichiers sélectionnés.
Méthode 2 : directement via Locator
const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);
Méthode 3 : simuler le téléversement par glisser-déposer (pris en charge par certaines applications)
const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');
Téléchargement de fichier
Playwright peut capturer les événements de téléchargement du navigateur et obtenir le chemin d'enregistrement du fichier.
Utilisation de base : écouter les téléchargements
Exemple
const [download] = await Promise.all([
page.waitForEvent('download'), // attendre le début du téléchargement
page.click('a#downloadButton'), // déclencher le téléchargement
]);
// enregistrer le fichier dans le chemin spécifié
await download.saveAs('downloads/report.pdf');
// obtenir le chemin d'enregistrement par défaut (répertoire temporaire du système)
const path = await download.path();
console.log('Chemin de téléchargement :', path);
// obtenir les informations de téléchargement
console.log(await download.url()); // URL de téléchargement
console.log(await download.suggestedFilename()); // nom de fichier suggéré
page.waitForEvent('download'), // attendre le début du téléchargement
page.click('a#downloadButton'), // déclencher le téléchargement
]);
// enregistrer le fichier dans le chemin spécifié
await download.saveAs('downloads/report.pdf');
// obtenir le chemin d'enregistrement par défaut (répertoire temporaire du système)
const path = await download.path();
console.log('Chemin de téléchargement :', path);
// obtenir les informations de téléchargement
console.log(await download.url()); // URL de téléchargement
console.log(await download.suggestedFilename()); // nom de fichier suggéré
Fichiers de captures d'écran et d'enregistrement d'écran
Playwright lui-même génère également des fichiers (captures d'écran, vidéos, traces, etc.) :
await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4'); // 在配置中开启 video 记录才可用
Exemple complet d'opérations sur les fichiers
Exemple
import { test, expect } from '@playwright/test';
test('Exemple de téléversement et de téléchargement de fichiers', async ({ page }) => {
// téléverser le fichier
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');
// télécharger le fichier
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('Téléchargement terminé :', await download.suggestedFilename());
});
test('Exemple de téléversement et de téléchargement de fichiers', async ({ page }) => {
// téléverser le fichier
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');
// télécharger le fichier
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('Téléchargement terminé :', await download.suggestedFilename());
});
API d'opérations sur les fichiers
| API | Objectif | Paramètres/Description |
|---|---|---|
page.setInputFiles(selector, files) |
Téléverser un fichier | filesPeut être une chaîne de chemin, un tableau ouFilePayload |
locator.setInputFiles(files) |
Téléverser un fichier (méthode Locator) | |
page.waitForEvent('filechooser') |
Attendre la boîte de dialogue de sélection de fichier | RenvoieFileChooser |
fileChooser.setFiles(files) |
Définir les fichiers sélectionnés | |
page.waitForEvent('download') |
Écouter l'événement de téléchargement | RenvoieDownload |
download.saveAs(path) |
Enregistrer le fichier téléchargé | Emplacement de stockage personnalisé |
download.path() |
Obtenir le chemin de stockage par défaut du système | |
download.url() |
Obtenir l'URL de la requête de téléchargement | |
download.suggestedFilename() |
Obtenir le nom de fichier suggéré | |
page.screenshot({ path }) |
Capture d'écran de page | |
locator.screenshot({ path }) |
Capture d'écran d'élément | |
page.video()?.saveAs(path) |
Sauvegarder la vidéo enregistrée | Nécessite l'activation de la vidéo dans la configuration |