Playwright Dateioperationen
Obwohl Playwright hauptsächlich für die Browser-Automatisierung verwendet wird, zeichnet es sich durchDatei-Upload und -Downloadaus und ist leistungsfähig genug, um gängige Szenarien für Dateiinteraktionen im Frontend zu bewältigen.
Datei-Upload
In Webformularen erfolgt der Datei-Upload normalerweise über<input type="file">. Playwright bietet dedizierte APIs, um dies zu handhaben:
Methode 1: setInputFiles()
await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');
-
Parameterbeschreibung：
- Selektor: wie man das Datei-Input-Element lokalisiert.
- Dateipfad: relativer/absoluter Pfad, unterstützt eine einzelne Datei oder ein Array aus mehreren Dateien.
- Wenn Sie
[], werden die ausgewählten Dateien gelöscht.
Methode 2: Direkt über Locator
const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);
Methode 3: Drag-and-Drop-Upload simulieren (von einigen Anwendungen unterstützt)
const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');
Dateidownload
Playwright kann Browser-Download-Ereignisse erfassen und den Speicherpfad der Datei abrufen.
Grundlegende Verwendung: auf Downloads lauschen
Beispiel
const [download] = await Promise.all([
page.waitForEvent('download'), // warten, bis der Download startet
page.click('a#downloadButton'), // Download auslösen
]);
// Datei im angegebenen Pfad speichern
await download.saveAs('downloads/report.pdf');
// Standard-Speicherpfad abrufen (temporäres Systemverzeichnis)
const path = await download.path();
console.log('Download-Pfad:', path);
// Download-Informationen abrufen
console.log(await download.url()); // Download-URL
console.log(await download.suggestedFilename()); // vorgeschlagener Dateiname
page.waitForEvent('download'), // warten, bis der Download startet
page.click('a#downloadButton'), // Download auslösen
]);
// Datei im angegebenen Pfad speichern
await download.saveAs('downloads/report.pdf');
// Standard-Speicherpfad abrufen (temporäres Systemverzeichnis)
const path = await download.path();
console.log('Download-Pfad:', path);
// Download-Informationen abrufen
console.log(await download.url()); // Download-URL
console.log(await download.suggestedFilename()); // vorgeschlagener Dateiname
Screenshots und Bildschirmaufzeichnungsdateien
Playwright selbst erzeugt auch Dateien (Screenshots, Videos, Traces usw.):
await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4'); // 在配置中开启 video 记录才可用
Vollständiges Beispiel für Dateioperationen
Beispiel
import { test, expect } from '@playwright/test';
test('Beispiel für Datei-Upload und Download', async ({ page }) => {
// Datei hochladen
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');
// Datei herunterladen
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('Download complete:', await download.suggestedFilename());
});
test('Beispiel für Datei-Upload und Download', async ({ page }) => {
// Datei hochladen
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');
// Datei herunterladen
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('Download complete:', await download.suggestedFilename());
});
Dateioperationen-API
| API | Zweck | Parameter/Beschreibung |
|---|---|---|
page.setInputFiles(selector, files) |
Datei hochladen | filesKann ein Pfad-String, ein Array oderFilePayload |
locator.setInputFiles(files) |
Datei hochladen (Locator-Methode) | |
page.waitForEvent('filechooser') |
Auf Dateiauswahldialog warten | Gibt zurückFileChooser |
fileChooser.setFiles(files) |
Die ausgewählten Dateien festlegen | |
page.waitForEvent('download') |
Auf Download-Ereignis lauschen | Gibt zurückDownload |
download.saveAs(path) |
Heruntergeladene Datei speichern | Benutzerdefinierter Speicherort |
download.path() |
Systemstandard-Speicherpfad abrufen | |
download.url() |
URL der Download-Anfrage abrufen | |
download.suggestedFilename() |
Vorgeschlagenen Dateinamen abrufen | |
page.screenshot({ path }) |
Seiten-Screenshot | |
locator.screenshot({ path }) |
Element-Screenshot | |
page.video()?.saveAs(path) |
Aufgezeichnetes Video speichern | Erfordert Aktivierung von Video in der Konfiguration |