Record scenario screenshots for every step

[xurizaemon]

As a means to share step workflows with testers, I knocked together this extremely crude addition to ScreenshotContext this morning. It captures a screenshot of each step of a tagged scenario (probably erring on the side of too many screenshots, really), and means a tester can see the output frame by frame.

From here it would not be far to output a video artefact.

  use FeatureTrait, ScenarioTrait;

  /**
   * Record every step with a screenshot, if tagged with 'screenshot-vcr'.
   *
   * @AfterStep
   */
  public function recordStepScreenshots($event)
  {
    $tagName = 'screenshot-vcr';
    /** @var \Behat\Behat\Hook\Scope\BeforeStepScope $event */
    if (!$this->getScenario()->hasTag($tagName) && !$this->getFeature()->hasTag($tagName)) {
      return;
    }
    $driver = $this->getSession()->getDriver();
    $stepText = $event->getStep()->getText();
    $stepLine = $event->getFeature()->getFile() . '-' . $event->getStep()->getLine();
    $fileName = $this->makeFileName('html', preg_replace('/[^a-zA-Z0-9-]+/', '-', $stepLine . '-' . $stepText));
    try {
      $data = $driver->getContent();
    } catch (DriverException $exception) {
      // Do not do anything if the driver does not have any content - most
      // likely the page has not been loaded yet.
      return;
    }
    $this->saveScreenshotData($fileName, $data);
    try {
      $data = $driver->getScreenshot();
      // Preserve filename, but change the extension - this is to group
      // content and screenshot files together by name.
      $fileName = substr($fileName, 0, -1 * strlen('html')).'png';
      $this->saveScreenshotData($fileName, $data);
    } catch (UnsupportedDriverActionException $exception) {
      // Nothing to do here - drivers without support for screenshots
      // simply do not have them created.
    }
  }

Any thoughts on the approach @AlexSkrypnyk ? I'd love to contribute this in a way that makes sense alongside the rest of the project, or perhaps you know of existing solutions I'm not aware of.

Happy to turn into a PR if you want, but I don't feel it's at that level of quality yet 😁

(I mistakenly opened this at drevops/behat-steps#69 initially 🙄)

[xurizaemon]

An improved version would probably capture screenshot only after certain steps - eg after a page load / URL change, and before click/press/etc actions, and could then animate the captures together. Having a fixed screen size will help the animation, I think my captures so far with this were dynamically resized.

[AlexSkrypnyk]

@xurizaemon
I had a plan to support animated screenshots capturing :)))

Thank you for coming up with this solution.

I would assume that animation could be controlled from 2 places:

1. In behat.yml config - could have a flag that when set to true - animates every step of a feature with @javascript tag.
2. Scenario or feature-based tag @screenshot:animated to activate this ad-hoc

The implementation itself will be along the lines of what you suggested, but would need to use a converter to animated Gif.

I will be able to work on this only in a couple of months time.

Please feel free to submit a PR (even if it does not do animation yet and just captures screenshots for every step).

As for filtering-out which steps to capture - it is possible to have a filtered list of existing step definitions (click/press etc), but this still need to be enabled with a tag like @screenshot:animated-actions.

[AlexSkrypnyk]

@xurizaemon
I think this still will be useful.

Maybe we can allow to chose how the output is dumped - in a dedicated animation dir as a gif or as multiple files.

I'm not sure about gif being useful during debug because frames will be animated and would not allow to stop to assess. But it may be useful in CI to have a quick "report" of what the test did.