Dinoer

L'élément est dans une iframe et un sélecteur simple ne l'atteint pas

Un module de paiement, un éditeur intégré, un formulaire tiers. Le bord du cadre est une frontière de sécurité du navigateur, et deux actions la franchissent.

Le symptôme. La page se lit normalement : un formulaire est là, un module de paiement, un éditeur intégré, un module de réservation tiers. Un cliquer ou un remplir simple avec un sélecteur CSS n’y trouve rien, et l’arbre d’accessibilité s’arrête lui aussi au cadre : il affiche - iframe et rien en dessous.

Pourquoi cela s’arrête là

Une iframe est un document à part. Quand elle vient d’une autre origine, le navigateur interdit à la page, et à tout script qui s’y exécute, d’y pénétrer. C’est cette frontière qui empêche un site de lire le contenu d’un cadre de paiement qu’il intègre. Aucune option ne la lève pour les scripts de la page.

Deux actions la franchissent

Playwright pilote le navigateur depuis l’extérieur de la page : la règle de même origine qui s’impose aux scripts de la page ne s’impose pas à lui. Dinoer le met à disposition sous forme de deux actions :

{"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 accepte depuis_secrets et depuis_secrets_totp comme remplir : un identifiant dans un cadre est toujours résolu dans le processus du navigateur, jamais écrit dans le scénario.

cliquer_iframe accepte force: true : les vérifications que fait Playwright avant un clic s’appliquent dans le cadre comme en dehors.

Une iframe dans une iframe

iframe_selecteur vise un cadre de la page. Les cadres imbriqués demandent une descente niveau par niveau, dans l’ordre :

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

Une liste ordonnée, un sélecteur CSS par niveau. Les deux formes s’excluent : utilisez l’une ou l’autre, pas les deux.

La limite

L’arbre d’accessibilité ne montre pas l’intérieur d’un cadre. Le sélecteur CSS intérieur, c’est à vous de le trouver.

Où le trouver : si l’iframe a la même origine que la page, un evaluer peut le lire par document.querySelector('iframe').contentDocument. Si elle vient d’une autre origine, la page ne vous le donnera pas : lisez la documentation du tiers, ou ouvrez directement l’adresse du cadre et lisez-la avec --a11y.

En bref

  • Une iframe d’une autre origine est une frontière ferme du navigateur pour les scripts de la page.
  • cliquer_iframe / remplir_iframe avec iframe_selecteur pour un niveau.
  • iframe_chemin, une liste ordonnée, pour les cadres imbriqués.
  • Les identifiants, TOTP compris, se résolvent dans les cadres comme en dehors.
  • Vous fournissez le sélecteur intérieur ; Dinoer franchit la frontière.