behat-relativity

Behat context for relative elements testing

What is this?

This extension allows to test visual elements positioning on the page relatively to each other. Such tests are dead-simple to write, but they can capture potential issues when developing features on existing project.

Example feature to test elements on the www.google.com

Feature: Google example test

  Show how Behat Relativity can be used to test pages using google.com as an example.

  Background:
    Given I define components:
      | top navigation    | #gb                     |
      | logo              | #hplogo                 |
      | search            | #lst-ib                 |
      | search button     | .jsb input[name="btnK"] |
      | lucky button      | .jsb input[name="btnI"] |
      | bottom navigation | .fbar                   |


  @javascript
  Scenario: Anonymous user visits google.com
    Given I am on "https://www.google.com"
    Then I see top navigation above logo, search, search button, lucky button and bottom navigation
    And I see logo above search, search button, lucky button and bottom navigation
    And I see search above search button, lucky button and bottom navigation
    And I see search button and lucky button above bottom navigation
    And I see search button to the left of lucky button

Installation

composer require --dev integratedexperts/behat-relativity

usage

Example behat.yml:

default:
  suites:
    default:
      contexts:
        - IntegratedExperts\BehatRelativityExtension\Context\RelativityContext
        - FeatureContext
    
  extensions:
    IntegratedExperts\BehatRelativityExtension:
      breakpoints:
        mobile:
          width: 320
          height: 480
        tablet:
          width: 768
          height: 1024
        desktop:
          width: 992
          height: 1024
          default: true
        desktop_large:
          width: 1200
          height: 900
      # Vertical offset - document will be scrolled to the element with this offset.
      # Useful when fixed elements may cover part of pages making it impossible to click on components.
      offset: 60
      # List of site-wide components.
      components:
        'page': "#page"
        'main': "#main"
        'top': "#top"
        'bottom': "#bottom"

Local development

Preparing local environment

Install Vagrant and VirtualBox and Composer.
Install all dependencies: composer install
Provision local VM: vagrant up

Running tests

vagrant ssh
scripts/selenium-install.sh
scripts/selenium-start.sh
composer test

Cleanup an environment

composer cleanup

bladeaweb/behat-relativity