Playwright-Frame und neue Fenster
Dieses Kapitel führt in den Umgang mit iframes, Dialogen, neuen Tabs und dem Playwright-Ereignissystem ein.
iframe-Operationen
Playwright verwendetframeLocator()um Elemente innerhalb von iframes zu lokalisieren und zu manipulieren.
page.frameLocator() zum Lokalisieren von iframes
Beispiel
test('Elemente im iframe bedienen', async ({ page }) => {
await page.goto('https://www.example.com/iframe-demo');
// Das iframe lokalisieren, dann das Element darin lokalisieren
const iframe = page.frameLocator('#my-iframe');
// Das Element im iframe bedienen
await iframe.getByRole('button', { name: 'Submit' }).click();
await iframe.getByLabel('Username').fill('example_user');
// Innerhalb des iframes prüfen
await expect(iframe.getByText('Operation successful')).toBeVisible();
});
await page.goto('https://www.example.com/iframe-demo');
// Das iframe lokalisieren, dann das Element darin lokalisieren
const iframe = page.frameLocator('#my-iframe');
// Das Element im iframe bedienen
await iframe.getByRole('button', { name: 'Submit' }).click();
await iframe.getByLabel('Username').fill('example_user');
// Innerhalb des iframes prüfen
await expect(iframe.getByText('Operation successful')).toBeVisible();
});
Alle Frames abrufen
Beispiel
// Alle Frames auf der Seite abrufen (einschließlich des Hauptframes und der iframes)
const frames = page.frames();
console.log('Die Seite hat ', frames.length, ' Frames');
frames.forEach(frame => {
console.log('Frame:', frame.name(), frame.url());
});
const frames = page.frames();
console.log('Die Seite hat ', frames.length, ' Frames');
frames.forEach(frame => {
console.log('Frame:', frame.name(), frame.url());
});
Verschachtelte Iframes
PlaywrightframeLocator()unterstützt verkettete Aufrufe und ermöglicht tiefen Zugriff auf verschachtelte Iframes.
Beispiel
// Verschachteltes Iframe: äußeres → inneres → Element
const innerButton = page
.frameLocator('#outer-frame')
.frameLocator('#inner-frame')
.getByRole('button', { name: 'Confirm' });
await innerButton.click();
const innerButton = page
.frameLocator('#outer-frame')
.frameLocator('#inner-frame')
.getByRole('button', { name: 'Confirm' });
await innerButton.click();
Umgang mit Dialogen
Playwright hat eine Standardstrategie für die Behandlung von nativen Browser-Dialogen (alert, confirm, prompt).
Standardverhalten
Playwright schließt standardmäßigautomatischalle Dialoge:
| Dialogtyp | Standardverhalten |
|---|---|
alert() | Automatisch verwerfen (schließen) |
confirm() | Automatisch akzeptieren (gibt true zurück) |
prompt() | Automatisch akzeptieren (gibt leeren String zurück) |
Benutzerdefinierte Dialogbehandlung
Verwendungpage.on('dialog')Sie können die Dialogbehandlung abfangen und anpassen.
Beispiel
test('Benutzerdefinierte Dialogbehandlung', async ({ page }) => {
// Einen Listener registrieren, bevor der Dialog ausgelöst wird
page.on('dialog', async dialog => {
console.log('Dialogtyp:', dialog.type());
console.log('Dialognachricht:', dialog.message());
if (dialog.type() === 'confirm') {
// Den Bestätigungsdialog abbrechen
await dialog.dismiss();
} else if (dialog.type() === 'prompt') {
// Benutzerdefinierten Inhalt eingeben
await dialog.accept('Von EXAMPLE eingegebener Inhalt');
} else {
// Für andere Typen einfach akzeptieren
await dialog.accept();
}
});
// Die Operation, die den Dialog auslöst
await page.getByRole('button', { name: 'Delete' }).click();
});
// Einen Listener registrieren, bevor der Dialog ausgelöst wird
page.on('dialog', async dialog => {
console.log('Dialogtyp:', dialog.type());
console.log('Dialognachricht:', dialog.message());
if (dialog.type() === 'confirm') {
// Den Bestätigungsdialog abbrechen
await dialog.dismiss();
} else if (dialog.type() === 'prompt') {
// Benutzerdefinierten Inhalt eingeben
await dialog.accept('Von EXAMPLE eingegebener Inhalt');
} else {
// Für andere Typen einfach akzeptieren
await dialog.accept();
}
});
// Die Operation, die den Dialog auslöst
await page.getByRole('button', { name: 'Delete' }).click();
});
Methoden des Dialog-Objekts
| Methode | Beschreibung |
|---|---|
dialog.accept(promptText?) | Dialog akzeptieren (kann Eingabetext für Prompt übergeben) |
dialog.dismiss() | Dialog verwerfen |
dialog.message() | Dialognachricht abrufen |
dialog.type() | Dialogtyp abrufen:'alert' | 'confirm' | 'prompt' | 'beforeunload' |
Neue Fenster und neue Tabs
Wenn das Klicken auf einen Link oder Button einen neuen Tab öffnet, bietet Playwright mehrere Möglichkeiten, die neue Seite zu erhalten.
page.waitForEvent('popup') um auf Popup zu warten
Beispiel
test('Neuen Tab behandeln', async ({ page }) => {
// Vorbereiten, vor dem Klicken auf das Ereignis der neuen Seite zu warten
const popupPromise = page.waitForEvent('popup');
// Auf den Link klicken, der ein neues Fenster öffnet
await page.getByRole('link', { name: 'Open new window' }).click();
// Die neu geöffnete Seite abrufen
const popup = await popupPromise;
// Auf der neuen Seite arbeiten
await expect(popup).toHaveTitle(/EXAMPLE/);
await popup.getByRole('button', { name: 'OK' }).click();
// Die neue Seite schließen
await popup.close();
});
// Vorbereiten, vor dem Klicken auf das Ereignis der neuen Seite zu warten
const popupPromise = page.waitForEvent('popup');
// Auf den Link klicken, der ein neues Fenster öffnet
await page.getByRole('link', { name: 'Open new window' }).click();
// Die neu geöffnete Seite abrufen
const popup = await popupPromise;
// Auf der neuen Seite arbeiten
await expect(popup).toHaveTitle(/EXAMPLE/);
await popup.getByRole('button', { name: 'OK' }).click();
// Die neue Seite schließen
await popup.close();
});
context.on('page') zum Lauschen auf neue Seiten
Beispiel
test('Auf alle neuen Seiten im Context lauschen', async ({ context, page }) => {
// Auf die Erstellung neuer Seiten im gesamten Context lauschen
context.on('page', async newPage => {
console.log('Eine neue Seite wurde geöffnet:', newPage.url());
// Warten, bis die neue Seite fertig geladen ist
await newPage.waitForLoadState();
// Auf der neuen Seite arbeiten
});
await page.goto('https://www.example.com/');
// Nachfolgende Vorgänge, die neue Fenster öffnen, lösen automatisch den obigen Listener aus
});
// Auf die Erstellung neuer Seiten im gesamten Context lauschen
context.on('page', async newPage => {
console.log('Eine neue Seite wurde geöffnet:', newPage.url());
// Warten, bis die neue Seite fertig geladen ist
await newPage.waitForLoadState();
// Auf der neuen Seite arbeiten
});
await page.goto('https://www.example.com/');
// Nachfolgende Vorgänge, die neue Fenster öffnen, lösen automatisch den obigen Listener aus
});
Playwright-Ereignissystem
Die Page- und Context-Objekte von Playwright sind Event-Emitter, und man kann verschiedene Ereignisse abhören.
Häufige Page-Ereignisse
| Ereignis | Auslösezeitpunkt |
|---|---|
request | Wenn die Seite eine Netzwerkanfrage initiiert |
response | Wenn eine Netzwerkantwort empfangen wird |
dialog | Wenn ein Alert-/Confirm-/Prompt-Dialog erscheint |
download | Wenn ein Dateidownload beginnt |
popup | Wenn eine neue Seite (Popup/neuer Tab) geöffnet wird |
console | Wenn die Seite eine Konsolenmeldung ausgibt |
pageerror | Wenn auf der Seite ein nicht abgefangener JavaScript-Fehler auftritt |
load | Wenn die Seite fertig geladen ist |
close | Wenn die Seite geschlossen wird |
Methoden zur Ereignisüberwachung
Beispiel
// Kontinuierlich lauschen
page.on('request', request => {
console.log('Request:', request.method(), request.url());
});
// Einmalig lauschen (wird nach einmaligem Auslösen automatisch entfernt)
page.once('dialog', dialog => {
dialog.accept();
});
// Listener entfernen
const handler = (request) => { /* ... */ };
page.on('request', handler);
page.off('request', handler);
page.on('request', request => {
console.log('Request:', request.method(), request.url());
});
// Einmalig lauschen (wird nach einmaligem Auslösen automatisch entfernt)
page.once('dialog', dialog => {
dialog.accept();
});
// Listener entfernen
const handler = (request) => { /* ... */ };
page.on('request', handler);
page.off('request', handler);