Remplir un champ de formulaire caché avec Symfony Panther (php-webdriver)

Panther utilise php-webdriver pour contrôler le navigateur. Il ne peut interagir qu'avec les éléments visibles de la page affichée. Si on souhaite par exemple remplir un champ caché d'un formulaire, la librairie va retourner l'exception suivante : Facebook\WebDriver\Exception\InvalidElementStateException: invalid element state: Element is not currently interactable and may not be manipulated. Nous allons voir dans cette article comment résoudre ce problème.

Solution

Dans Panther, il existe la méthode executeScript() qui permet d'exécuter du JavaScript.

L'astuce est d'utiliser cette méthode pour exécuter du JavaScript qui va rendre visible le champ du formulaire. Ce dernier est habituellement caché à l'utilisateur mais pour tester fonctionnellement notre code, ce n'est pas grave de l'afficher. Une fois visible, on peut interagir avec lui comme les autres champs du formulaire.

Exemple

Dans un formulaire mon_form, on a un champ message qui est caché par du style CSS. Son id est mon-form-message.

On exécute du JavaScript pour supprimer son style. Il devient alors visible pour Panther.

Il suffit ensuite de tester le formulaire de manière classique :

public function testMonForm()
{
    $crawler = $this->client->request('GET', '/ma-page-à-tester');

    $this->client->executeScript('document.getElementById(\'mon-form-message\').style=\'\'');

    $form = $crawler->selectButton('Envoyer')->form([
        'mon_form[nom]' => 'Un nom',
        'mon_form[prenom]' => 'Un prénom',
        'mon_form[email]' => 'np@gmail.com',
        'mon_form[message]' => 'un message',
    ]);
    $crawler = $this->client->submit($form);

    $this->assertTrue(1 == $crawler->filter('.alert-danger')->count());
}

Il n'y aura plus d'exception en provenance de php-webdriver.

Version

Cet article a été testé avec :

Panther : 0.3