integratedexperts / behat-relativity
Behat context for relative elements testing.
Installs: 39 210
Dependents: 1
Suggesters: 0
Security: 0
Stars: 5
Watchers: 4
Forks: 1
Open Issues: 1
Requires
- behat/behat: >=3.3.1
- behat/mink: ~1.5
- behat/mink-browserkit-driver: ^1.3
- behat/mink-extension: ~v2.2
- behat/mink-goutte-driver: *
- behat/mink-selenium2-driver: *
- symfony/config: ~3.2
Requires (Dev)
- beet/box: ^0.5.1
- escapestudios/symfony2-coding-standard: ~2.0
- integratedexperts/behat-phpserver: >=0.1.1
- integratedexperts/behat-screenshot: >=0.6.1
- squizlabs/php_codesniffer: 2.*
This package is auto-updated.
Last update: 2021-01-26 02:48:12 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 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
- Install Vagrant and VirtualBox and Composer.
- Install all dependencies:
composer install
- Provision local VM:
vagrant up
Running tests
vagrant ssh
scripts/selenium-install.sh
scripts/selenium-start.sh
composer test
Cleanup an environment
composer cleanup