Dinoer

Das Element liegt in einem iframe, und ein einfacher Selektor erreicht es nicht

Ein Zahlungs-Widget, ein eingebetteter Editor, ein Formular eines Drittanbieters. Der Rahmen ist eine Sicherheitsgrenze des Browsers, und zwei Aktionen überqueren sie.

Das Symptom. Die Seite lässt sich normal lesen: Ein Formular ist da, ein Zahlungs-Widget, ein eingebetteter Editor, ein Buchungsmodul eines Drittanbieters. Ein einfaches cliquer oder remplir mit einem CSS-Selektor findet darin nichts, und auch der Barrierefreiheitsbaum endet am Rahmen: Er zeigt - iframe und nichts darunter.

Warum es dort endet

Ein iframe ist ein eigenes Dokument. Stammt es von einer anderen Herkunft, verbietet der Browser der Seite und jedem Skript darin, hineinzugreifen. Diese Grenze hindert eine Website daran, den Inhalt eines eingebetteten Zahlungsrahmens zu lesen. Keine Option hebt sie für die Skripte der Seite auf.

Zwei Aktionen überqueren sie

Playwright steuert den Browser von außerhalb der Seite; die Same-Origin-Regel, die für die Skripte der Seite gilt, bindet es daher nicht. Dinoer stellt das als zwei Aktionen bereit:

{"type": "cliquer_iframe", "iframe_selecteur": "iframe#payment",
 "selecteur": "button.confirm"}

{"type": "remplir_iframe", "iframe_selecteur": "iframe#payment",
 "selecteur": "input[name=cvv]",
 "valeur": "depuis_secrets", "secret_cle": "cvv"}

remplir_iframe akzeptiert depuis_secrets und depuis_secrets_totp wie remplir: Zugangsdaten in einem Rahmen werden weiterhin im Browser-Prozess aufgelöst, nie ins Szenario geschrieben.

cliquer_iframe akzeptiert force: true: Die Prüfungen, die Playwright vor einem Klick durchführt, gelten im Rahmen wie außerhalb.

Ein iframe in einem iframe

iframe_selecteur zielt auf einen Rahmen der Seite. Verschachtelte Rahmen verlangen einen Abstieg Ebene für Ebene, der Reihe nach:

{"type": "cliquer_iframe",
 "iframe_chemin": ["iframe#wrapper", "iframe#payment"],
 "selecteur": "button.confirm"}

Eine geordnete Liste, ein CSS-Selektor pro Ebene. Die beiden Formen schließen sich aus: Nehmen Sie die eine oder die andere, nicht beide.

Die Grenze

Der Barrierefreiheitsbaum zeigt das Innere eines Rahmens nicht. Den inneren CSS-Selektor müssen Sie selbst beschaffen.

Woher: Hat das iframe dieselbe Herkunft wie die Seite, kann ein evaluer ihn über document.querySelector('iframe').contentDocument lesen. Stammt es von einer anderen Herkunft, gibt die Seite ihn nicht preis: Lesen Sie die Dokumentation des Drittanbieters, oder öffnen Sie die Adresse des Rahmens direkt und lesen Sie sie dort mit --a11y.

Kurz gesagt

  • Ein iframe fremder Herkunft ist für die Skripte der Seite eine feste Grenze des Browsers.
  • cliquer_iframe / remplir_iframe mit iframe_selecteur für eine Ebene.
  • iframe_chemin, eine geordnete Liste, für verschachtelte Rahmen.
  • Zugangsdaten, TOTP eingeschlossen, werden in Rahmen aufgelöst wie außerhalb.
  • Sie liefern den inneren Selektor; Dinoer überquert die Grenze.