Playwright-JavaScript-Ausführung

Dieses Kapitel führt ein, wie JavaScript-Code in Playwright ausgeführt wird, einschließlich Ausführung im Seitenkontext, Parameterübergabe und initialer Skriptinjektion.

page.evaluate() Ausführung im Seitenkontext

page.evaluate()Führt Code in der JavaScript-Umgebung der Seite aus, mit Zugriff auf das DOM und globale Variablen der Seite.

Beispiel

test('Seitendaten abrufen', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // Seitentitel abrufen (im Seitenkontext ausgeführt)
  const title = await page.evaluate(() => {
    return document.title;
  });
  console.log('Seitentitel:', title);

  // Anzahl aller Links auf der Seite abrufen
  const linkCount = await page.evaluate(() => {
    return document.querySelectorAll('a').length;
  });
  console.log('Anzahl der Links:', linkCount);

  // Bildlaufposition der Seite abrufen
  const scrollY = await page.evaluate(() => {
    return window.scrollY;
  });
});

Parameter an evaluate übergeben

page.evaluate()Sein zweiter Parameter wird an die Funktion innerhalb der Seite übergeben.

Beispiel

test('Parameter an die Seite übergeben', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // Einen einzelnen Parameter übergeben
  const result1 = await page.evaluate((name) => {
    return `Hello, ${name}!`;
  }, 'BEISPIEL');

  // Ein Objekt als Parameter übergeben
  const userInfo = { name: 'example', role: 'admin' };
  const result2 = await page.evaluate((user) => {
    return `${user.name}Seine Rolle ist ${user.role}`;
  }, userInfo);

  // Mehrere Parameter übergeben (mit Destrukturierung)
  const result3 = await page.evaluate(
    ({ x, y }) => {
      return x + y;
    },
    { x: 10, y: 20 }
  );
  console.log('10 + 20 =', result3); // 30
});

Die übergebenen Parameter werden JSON-serialisiert und an den Seitenkontext übergeben; nicht serialisierbare Werte wie Funktionen und DOM-Elemente können nicht übergeben werden.

Der zurückgegebene Wert wird ebenfalls serialisiert.

locator.evaluate() Elementkontext-Ausführung

locator.evaluate()Code im Kontext des gefundenen Elements ausführen; der Parameter enthält eine Referenz auf den DOM-Knoten dieses Elements.

Beispiel

test('DOM-Attribute des Elements abrufen', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // textContent eines bestimmten Elements abrufen
  const text = await page
    .getByRole('heading', { name: 'EXAMPLE' })
    .evaluate(node => node.textContent);

  // Das style-Attribut des Elements abrufen
  const color = await page
    .getByRole('button', { name: 'Search' })
    .evaluate(node => getComputedStyle(node).backgroundColor);
});

locator.evaluateAll() Iterieren über alle übereinstimmenden Elemente

evaluateAll()Führt denselben Code für alle übereinstimmenden Elemente aus und gibt ein Array zurück.

Beispiel

test('Den Text aller Listenelemente abrufen', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // Den Text aller Menüeinträge abrufen
  const menuItems = await page
    .getByRole('navigation')
    .locator('a')
    .evaluateAll(links => links.map(link => link.textContent));

  console.log('Menüpunkte:', menuItems);
  // ['Startseite', 'Tutorial', 'Werkzeuge', ...]
});

page.addInitScript() Initiale Skripte injizieren

addInitScript()JavaScript-Code vor dem Laden der Seite injizieren, derbevor die Seitenskripte ausgeführt werdendie Browserumgebung verändern kann.

Beispiel

test('Initiales Skript injizieren', async ({ page }) => {
  // Die navigator-Eigenschaft vor dem Laden der Seite ändern
  await page.addInitScript(() => {
    // WebDriver-Erkennung überschreiben
    Object.defineProperty(navigator, 'webdriver', {
      get: () => false,
    });

    // Globale Variablen auf window mocken
    window.EXAMPLE_CONFIG = {
      env: 'test',
      version: '1.0.0',
    };
  });

  await page.goto('https://www.example.com/');

  // Überprüfen, dass die injizierten Variablen wirksam werden
  const config = await page.evaluate(() => window.EXAMPLE_CONFIG);
  console.log(config); // { env: 'test', version: '1.0.0' }
});

addInitScript()Häufige Anwendungsfälle:

AnwendungsfallBeschreibung
Browser-API mockenÜberschreibennavigator.webdriver、navigator.languagewarten
Benutzerdefinierte Konfiguration injizierenTestumgebungsvariablen setzen, Datenquellen mocken usw.
Funktionen deaktivierenService Worker deaktivieren, Logging deaktivieren usw.
PolyfillFunktionalität hinzufügen, von der die Seite abhängt, die aber in der Testumgebung fehlt.

Verwendung und Einschränkungen von ElementHandle

ElementHandle ist eine direkte Referenz auf ein DOM-Element und wurde in frühen Versionen von Playwright häufig verwendet.

In den meisten Szenarien sollten Sie jetztLocatoranstelle von ElementHandle verwenden.

Beispiel

// ElementHandle-Ansatz (alter Stil, nicht empfohlen)
const handle = await page.$('.my-element');
await handle.click();

// Locator-Ansatz (neuer Stil, empfohlen)
await page.locator('.my-element').click();

ElementHandle wird nur verwendet, wenn Sie etwas abrufen müssenboundingBox()oder bei der Durchführung komplexer DOM-Operationen.

Andere Erweiterungen