Playwright Fortgeschrittene Seitenoperationen

In diesem Kapitel stellen wir erweiterte Seitenoperationen von Playwright vor, die näher an realen Testanforderungen sind undWartemechanismen, Formularverarbeitung, Popup-Dialogeund weitere erweiterte Funktionen abdecken.

Wartemechanismus

Einer der größten Vorteile von Playwright istintelligentes Warten (Auto-Waiting): Die meisten Operationen (wie z. B.click, fill) wartet automatisch darauf, dass das Element sichtbar und bedienbar ist. In komplexen Szenarien müssen Sie das Warten jedoch weiterhin manuell steuern.

1. Implizites Warten (Auto-Warten)

Playwrights integrierter Wartemechanismus:

• Element ist sichtbar
• Klickbar / Interaktiv
• Seite vollständig geladen

2. Explizites Warten

Wartemethoden explizit aufrufen, z. B. auf einen Selektor, Text oder eine Anfrage warten.

HäufigstateWerte:

• 'attached'→ Element erscheint im DOM
• 'visible'→ Element ist auf der Seite sichtbar
• 'hidden'→ Element ist ausgeblendet
• 'detached'→ Element wurde entfernt

3. Warten, bis ein Element erscheint / verschwindet

// 等待元素出现
await page.waitForSelector('#loading', { state: 'visible' });

// 等待元素消失
await page.waitForSelector('#loading', { state: 'hidden' });

4. Warten, bis eine Netzwerkanfrage abgeschlossen ist

Warten, bis eine bestimmte Anfrage abgeschlossen ist; wird häufig für AJAX-Anfragen oder API-Aufrufe verwendet.

// 等待指定 URL 的请求完成
await page.waitForResponse(response => 
  response.url().includes('/api/login') && response.status() === 200
);

5. Benutzerdefinierte Wartebedingungen

Durchpage.waitForFunctionBenutzerdefinierte Wartelogik ausführen.

// 等待页面上计数器达到 10
await page.waitForFunction(() => {
  return document.querySelector('#count').innerText === '10';
});

Formularverarbeitung

Formulare sind das häufigste Interaktionsszenario beim Testen. Playwright bietet eine umfangreiche API, um Formularsteuerelemente zu bedienen.

1. Operationen mit Eingabefeldern

await page.fill('#username', 'admin');  // 清空并输入
await page.type('#search', 'Playwright', { delay: 100 }); // 模拟逐字输入

2. Auswahl im Dropdown-Menü

// 通过 value
await page.selectOption('#country', 'china');

// 通过标签文本
await page.selectOption('#country', { label: 'United States' });

// 通过 index
await page.selectOption('#country', { index: 2 });

3. Kontrollkästchen und Radio-Buttons

// 勾选复选框
await page.check('#agree');

// 取消勾选
await page.uncheck('#subscribe');

// 点击单选框
await page.check('input[type="radio"][value="male"]');

4. Datei-Upload

// 直接上传文件
await page.setInputFiles('#upload', 'example.png');

// 上传多个文件
await page.setInputFiles('#upload', ['a.png', 'b.png']);

// 清空文件
await page.setInputFiles('#upload', []);

5. Formularübermittlung

Es gibt zwei Möglichkeiten, ein Formular abzusenden:

• Klicken Sie auf die Schaltfläche „Absenden“
• Formularübermittlungsereignis direkt auslösen

await page.click('button[type="submit"]');
// 或者
await page.press('#form input[name="email"]', 'Enter');

Popups und Dialoge

Playwright kannbrowsereigene Popups(alert, confirm, prompt) sowie benutzerdefinierte Modale erfassen und behandeln.

1. Umgang mit Alert

page.once('dialog', async dialog => {
  console.log(dialog.message()); // 打印弹窗内容
  await dialog.accept(); // 点击 "确定"
});

await page.click('#show-alert');

2. Umgang mit Confirm

page.once('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.dismiss(); // 点击 "取消"
});

await page.click('#show-confirm');

3. Umgang mit Prompt

page.once('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept('Playwright'); // 输入内容并确认
});

await page.click('#show-prompt');

4. Benutzerdefiniertes Modal

Benutzerdefinierte Modals (wie Bootstrap / Ant Design) sind eigentlich gewöhnliche DOM-Elemente, und Sie können direktLokalisierung + Interaktionverwenden, um sie zu schließen oder Eingaben vorzunehmen.

await page.click('#open-modal');
await page.fill('.modal input[name="name"]', 'Test User');
await page.click('.modal button.confirm');

Praktischer Fall — Automatisierungstests für Registrierungsformulare

Das folgende Beispiel wird umfassendWartemechanismen, Formularoperationen, Dateiupload, Dialogbehandlung verwenden。

Wirkung nach der Ausführung:

• Formular automatisch ausfüllen, Land auswählen, Avatar hochladen
• Popups automatisch behandeln
• Nach dem Absenden einen Screenshot aufnehmen und die Willkommensnachricht überprüfen

Vollständige API

Das Folgende ist eine Zusammenstellung vonSeitennavigation, Warten, Formularen, Interaktion, Popupsgängigen APIs: