2017 © Pedro Peláez
 

library behat-relativity

Behat context for relative elements testing.

image

integratedexperts/behat-relativity

Behat context for relative elements testing.

  • Thursday, June 21, 2018
  • by alexdesignworks
  • Repository
  • 2 Watchers
  • 4 Stars
  • 8,883 Installations
  • PHP
  • 0 Dependents
  • 0 Suggesters
  • 1 Forks
  • 1 Open issues
  • 9 Versions
  • 28 % Grown

The README.md

behat-relativity

Behat context for relative elements testing, (*1)

CircleCI Latest Stable Version Total Downloads License, (*2)

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., (*3)

Example feature to test elements on the www.google.com, (*4)

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, (*5)

usage

Example behat.yml:, (*6)

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

The Versions