Drupal Behat Snapshot Testing

This package is a Behat extension that implements an additional "Drupal\BehatSnapshots\Context\SnapshotContext" Context to make it possible to test frontend with a snapshot testing approach.
We suggest considering using this testing approach when it's needed to control some static page's look.

Idea

The idea of this approach is quite simple. Here is an algorithm of the snapshot testing approach in a few steps:

• Ensure that the application page is manually tested an application and is ready to be screenshotted(snapshot).
• Run the script(test) to generate the expected page screenshots automatically.
  • The tool should be able to scroll the page in both directions if needed.
• Save the actual and expected results in the repository(project filesystem).
  • The tool provides the console commands to save it.
• Change the system and re-run the test.
• Compare actual(new) page screenshots with expected ones.
  • Service that implements image comparison logic implements Drupal\BehatSnapshots\Contract\ImageComparatorInterface contract, which declares that the areImagesEqual method should accept 2 image paths - excepted & actual and return TRUE|FALSE as a comparison result.
• If we detect, that some images are different, we show an error and propose to replace the expected snapshot with an actual one.

Automated testing provides the possibility to generate and update page screenshot folders automatically, with no need to create screenshots manually.
All you need is to declare the list of pages and settings for the testing in the `.feature` file.

Testing .feature scenario example

Please take a look at the ./features/snapshot.feature example .feature file.
The table that contains a list of pages also contains optional settings that could be applied. In the package README.md you can find the description of the table columns.

Behat tests. SnapshotContext usage instructions

1. Assuming you already have Behat installed via Composer.

Take a look into the Behat initial installation instructions on the Drupal project if required here.

2. Install the Behat contexts using composer. Apply changes to the composer.json and run `composer update drupal/drupal-behat-snapshots`.

    "repositories": {
        ...
        "drupal/drupal-behat-snapshots": {
            "type": "git",
            "url": "https://git.drupalcode.org/project/drupal_behat_snapshots.git"
        }
    },

   "require-dev": {
      ...
     "drupal/drupal-behat-snapshots": "^1.0.0"
   }

3. Add the new contexts to your Behat configuration, e.g.:

default:
  suites:
    default:
      contexts:
        # do not forget to comment out MinkContext, because we extend it do not want to have duplications.
        #-Drupal\DrupalExtension\Context\MinkContext
        - Drupal\BehatSnapshots\Context\SnapshotContext

4. Copy the default feature file (representing the out-of-the-box configuration) to your `features` directory. See the example below.

mkdir -p tests/behat/features/drupal-behat-snapshots
cp vendor/drupal/drupal-behat-snapshots/features/*.feature tests/behat/features/drupal-behat-snapshots/
cp vendor/drupal/drupal-behat-snapshots/behat.yml.dist behat.yml

5. Change the specification according to the requirements, and update the features to match using the generated Gherkin.

6. Run Behat! If the tests pass, your application matches the specifications. If not, change one or the other according to your needs.

7. Execute the test.

bin/behat --config=behat.yml --colors --verbose --stop-on-failure ./tests/behat/features/drupal-behat-snapshots/snapshot.feature

8. Follow the usage instructions.