Skip to content

DiffyWebsite/diffy-behat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Use diffy with behat

Usage

Here is an example how your behat integration could look like:

Feature: Diffy example
  Provide simple example how to use
  Diffy in Behat.

  @javascript
  Scenario: Create set of screenshots, send to Diffy and run comparison

    # Create screenshots from two pages and send them to Diffy
    Given I am on "/"
    Then I take screenshots for all breakpoints

    Given I am on "/wordpress"
    Then I take screenshots for all breakpoints

    Then Send screenshots to diffy with name "first test"

    # Create screenshots from two pages with different breakpoints and send them to Diffy
    Given I am on "/"
    When I resize window to "1200"
    Then I take screenshot

    Given I am on "/about-us"
    When I resize window to "600"
    Then I take screenshot
    Then Send screenshots to diffy with name "second test"

    # Create Diffy comparison between two sets of screenshots created in the previous steps of the test
    Then Create diffy comparison

Install dependencies

run composer install

Install docker

We are using docker for run selenium. If you already has own selenium installation just skip these steps.

Use this link to install docker:

https://docs.docker.com/engine/install/ubuntu/

Run selenium in docker

Run docker-compose -f docker/docker-compose.yml up

Configure behat settings

Edit ./behat.yml

Configure parametrs:

parameters:
      projectId: {diffyProjectID}
      apiKey: {diffyApiKey}
      screenshotsDir: screenshots
      breakpoints: [640, 1200]
      windowHeight: 2000

Where:

Parameter Description
projectId Project ID from Diffy
apiKey Api key from Diffy (You can get it on this page: https://app.diffy.website/#/keys)
screenshotsDir Path to temporary folder where will be stored screenshots
breakpoints Breakpoints array (they should be available in the Diffy project)
windowHeight Height of screenshots

Configure mink extension:

Behat\MinkExtension\Extension:
      base_url: https://diffy.website
      goutte: ~
      javascript_session: selenium2
      browser_name: chrome
      selenium2:
        wd_host: "http://localhost:4444/wd/hub"

Where:

Parameter Description
base_url Base URL of the tested site
browser_name chrome - by default in docker-compose.yml installed only chrome browser. But you can uncomment other browsers.
selenium2:wd_host If you are using own selenium installation, please specify here your selenium url.

Run behat test

Run php ./bin/behat

After the test is being completed, two screenshots one comparison will be created on Diffy.

Down docker with selenium

Run docker-compose -f docker/docker-compose.yml down

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published