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 buttonInstallation
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
- Install Docker.
- If using M1:
cp default.docker-compose.override.yml docker-compose.override.yml - Start environment:
docker-compose up -d --build. - Install dependencies:
docker-compose exec phpserver composer install --ansi --no-suggest.
Lint code
docker-compose exec phpserver vendor/bin/phpcsRun tests
docker-compose exec phpserver vendor/bin/behatEnable Xdebug
XDEBUG_ENABLE=true docker-compose up -d phpserverTo disable, run
docker-compose up -d phpserver
