Skip to content
Behat context for relative elements testing
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts
src/IntegratedExperts/BehatRelativityExtension
tests/behat
.gitignore
README.md
behat.yml
circle.yml
composer.json
phpcs.xml.dist

README.md

behat-relativity

Behat context for relative elements testing

CircleCI Latest Stable Version Total Downloads License

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

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

Running tests

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

Cleanup an environment

composer cleanup
You can’t perform that action at this time.