drevops/behat-relativity

This package is abandoned and no longer maintained. No replacement package was suggested.

Behat context for relative elements testing.

0.4.0 2023-03-11 20:44 UTC

Requires

• behat/behat: ^3
• behat/mink: ^1
• behat/mink-browserkit-driver: ^1.3
• behat/mink-extension: ^2
• behat/mink-goutte-driver: ^1
• behat/mink-selenium2-driver: ^1
• symfony/config: ^3.0 || ^4.0 || ^5.0

Requires (Dev)

• dealerdirect/phpcodesniffer-composer-installer: ^0.7
• drevops/behat-phpserver: ^1
• drevops/behat-screenshot: ^1
• escapestudios/symfony2-coding-standard: ^3
• squizlabs/php_codesniffer: ^3

GPL-2.0-or-later

• Alex Skrypnyk
• Alexander Sharkov

README

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 drevops/behat-relativity

usage

Example behat.yml:

default:
  suites:
    default:
      contexts:
        - DrevOps\BehatRelativityExtension\Context\RelativityContext
        - FeatureContext

  extensions:
    DrevOps\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"

Maintenance

Local development setup

1. Install Docker.
2. If using M1: cp default.docker-compose.override.yml docker-compose.override.yml
3. Start environment: docker-compose up -d --build.
4. Install dependencies: docker-compose exec phpserver composer install --ansi --no-suggest.

Lint code

docker-compose exec phpserver vendor/bin/phpcs

Run tests

docker-compose exec phpserver vendor/bin/behat

Enable Xdebug

XDEBUG_ENABLE=true docker-compose up -d phpserver

To disable, run

docker-compose up -d phpserver