Import and replay Chrome recorded navigation sessions as JSON in Panther

[erseco]

It would be valuable to implement a feature that allows recording browsing sessions in Chrome, exporting them as a JSON file, and then replaying these sessions with Panther. This feature would simplify the process of converting real user interactions into automated tests.

Motivation
A command or API to load a JSON file of recorded actions (page navigations, clicks, form inputs, etc.) and translate them into Panther commands would help developers quickly generate test cases from actual user sessions. It could reduce the manual effort required to write tests and allow for easier reproduction of issues.

Proposed Implementation

1. Recording Session in Chrome:
   Allow users to export their Chrome DevTools recorded session as a JSON file with a structure similar to this:

   [
     {
       "type": "navigate",
       "url": "http://example.com"
     },
     {
       "type": "click",
       "selector": "#login-button"
     },
     {
       "type": "fill",
       "selector": "#username",
       "value": "user@example.com"
     }
   ]

2. Replaying the Session in Panther:
   Add a command (e.g., panther:replay-session) or a helper class that reads the JSON file and maps each recorded action to Panther API methods. Below are some code examples demonstrating how this could work:

   Example A: Standalone Script

   <?php
   
   use Symfony\Component\Panther\Client;
   
   // Load JSON session file
   $sessionFile = __DIR__ . '/session.json';
   $actions = json_decode(file_get_contents($sessionFile), true);
   
   // Create a Panther client instance
   $client = Client::createChromeClient();
   
   // Process each action in the recorded session
   foreach ($actions as $action) {
       switch ($action['type']) {
           case 'navigate':
               // Navigate to the given URL
               $client->request('GET', $action['url']);
               break;
           case 'click':
               // Click the element identified by the selector
               $client->getCrawler()->filter($action['selector'])->click();
               break;
           case 'fill':
               // Enter text into the input field identified by the selector
               $client->getCrawler()->filter($action['selector'])->sendKeys($action['value']);
               break;
           default:
               // Optionally log unsupported action types
               echo sprintf("Unsupported action type: %s\n", $action['type']);
               break;
       }
   }

   Example B: Symfony Console Command

   <?php
   
   namespace App\Command;
   
   use Symfony\Component\Console\Command\Command;
   use Symfony\Component\Console\Input\InputArgument;
   use Symfony\Component\Console\Input\InputInterface;
   use Symfony\Component\Console\Output\OutputInterface;
   use Symfony\Component\Panther\Client;
   
   /**
    * Command to replay a Chrome recorded session.
    */
   class ReplaySessionCommand extends Command
   {
       protected static $defaultName = 'panther:replay-session';
   
       protected function configure()
       {
           $this
               ->setDescription('Replay a Chrome recorded session from a JSON file.')
               ->addArgument('session', InputArgument::REQUIRED, 'Path to the JSON session file');
       }
   
       protected function execute(InputInterface $input, OutputInterface $output)
       {
           $sessionPath = $input->getArgument('session');
           $actions = json_decode(file_get_contents($sessionPath), true);
   
           $client = Client::createChromeClient();
   
           foreach ($actions as $action) {
               switch ($action['type']) {
                   case 'navigate':
                       $client->request('GET', $action['url']);
                       break;
                   case 'click':
                       $client->getCrawler()->filter($action['selector'])->click();
                       break;
                   case 'fill':
                       $client->getCrawler()->filter($action['selector'])->sendKeys($action['value']);
                       break;
                   default:
                       $output->writeln(sprintf('Unsupported action type: %s', $action['type']));
                       break;
               }
           }
   
           $output->writeln('Session replayed successfully.');
   
           return Command::SUCCESS;
       }
   }

Benefits

• Simplifies automated test generation by converting user sessions to executable tests.
• Reduces the time spent on manually writing tests.
• Provides a reproducible method to simulate user interactions for debugging.

I am willing to contribute to this feature if there is interest from the maintainers.