How can I write a Behat step that will capture a screenshot or HTML page?

Question

Ideally also opening the screenshot automatically in an image viewer.

Answer 1

Edit: Thanks to bishop for the tip on opening the apps. Still not sure how to do it Windows, though.

/**
 * This works for Selenium and other real browsers that support screenshots.
 *
 * @Then /^show me a screenshot$/
 */
public function show_me_a_screenshot() {

    $image_data = $this->getSession()->getDriver()->getScreenshot();
    $file_and_path = '/tmp/behat_screenshot.jpg';
    file_put_contents($file_and_path, $image_data);

    if (PHP_OS === "Darwin" && PHP_SAPI === "cli") {
        exec('open -a "Preview.app" ' . $file_and_path);
    }

}

/**
 * This works for the Goutte driver and I assume other HTML-only ones.
 *
 * @Then /^show me the HTML page$/
 */
public function show_me_the_html_page_in_the_browser() {

    $html_data = $this->getSession()->getDriver()->getContent();
    $file_and_path = '/tmp/behat_page.html';
    file_put_contents($file_and_path, $html_data);

    if (PHP_OS === "Darwin" && PHP_SAPI === "cli") {
        exec('open -a "Safari.app" ' . $file_and_path);
    };
}

Answer 2

You can use this package here https://github.com/forceedge01/behat-fail-aid. This will give you screenshot on fail and much more. It injects all details to the existing exception message so it will be perfectly placed below a fail like the usual behat fail message. Best of all, you won't have to write and maintain any code, plus it works with javascript and non javascript drivers! Here is what the output looks like:

All you have to do is install the package via composer

$ composer require genesis/behat-fail-aid --dev

And add the context to your behat.yml file

behat.yml

default:
  suites:
    default:
      contexts:
        - FailAid\Context\FailureContext
  extensions:
    FailAid\Extension: ~

There is bunch of other stuff you can do with this package, but this should solve your problems, Happy testing!