integratedexperts / behat-relativity
Behat context for relative elements testing.
Fund package maintenance!
Patreon
Installs: 48 406
Dependents: 0
Suggesters: 0
Security: 0
Stars: 5
Watchers: 4
Forks: 2
Open Issues: 1
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
This package is auto-updated.
Last update: 2023-03-11 21:46:19 UTC
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
- 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/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