Created
April 16, 2015 22:01
-
-
Save MKorostoff/c94824a467ffa53f4fa9 to your computer and use it in GitHub Desktop.
Scroll into view with behat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @When I scroll :elementId into view | |
*/ | |
public function scrollIntoView($elementId) { | |
$function = <<<JS | |
(function(){ | |
var elem = document.getElementById("$elementId"); | |
elem.scrollIntoView(false); | |
})() | |
JS; | |
try { | |
$this->getSession()->executeScript($function); | |
} | |
catch(Exception $e) { | |
throw new \Exception("ScrollIntoView failed"); | |
} | |
} |
Hello MKorostoff,
Is it possible to do the same, but by element's text?
There are not may IDs in the project I have to test unfortunately, so I modified it as follow:
/**
* @When I scroll :selector into view
*
* @param string $selector Allowed selectors: #id, .className, //xpath
*
* @throws \Exception
*/
public function scrollIntoView($selector)
{
$locator = substr($selector, 0, 1);
switch ($locator) {
case '/' : // XPath selector
$function = <<<JS
(function(){
var elem = document.evaluate($selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
elem.scrollIntoView(false);
})()
JS;
break;
case '#' : // ID selector
$selector = substr($selector, 1);
$function = <<<JS
(function(){
var elem = document.getElementById("$selector");
elem.scrollIntoView(false);
})()
JS;
break;
case '.' : // Class selector
$selector = substr($selector, 1);
$function = <<<JS
(function(){
var elem = document.getElementsByClassName("$selector");
elem[0].scrollIntoView(false);
})()
JS;
break;
default:
throw new \Exception(__METHOD__ . ' Couldn\'t find selector: ' . $selector . ' - Allowed selectors: #id, .className, //xpath');
break;
}
try {
$this->getSession()->executeScript($function);
} catch (Exception $e) {
throw new \Exception(__METHOD__ . ' failed');
}
}
@nickrealdini I added another "Query" selector.
/**
* @When I scroll :selector into view
*
* @param string $selector Allowed selectors: #id, .className, //xpath
* @throws \Exception
*/
public function scrollIntoView($selector)
{
$locator = substr($selector, 0, 1);
switch ($locator) {
case '$' : // Query selector
$selector = substr($selector, 1);
$function = <<<JS
(function(){
var elem = document.querySelector("$selector");
elem.scrollIntoView(false);
})()
JS;
break;
case '/' : // XPath selector
$function = <<<JS
(function(){
var elem = document.evaluate("$selector", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
elem.scrollIntoView(false);
})()
JS;
break;
case '#' : // ID selector
$selector = substr($selector, 1);
$function = <<<JS
(function(){
var elem = document.getElementById("$selector");
elem.scrollIntoView(false);
})()
JS;
break;
case '.' : // Class selector
$selector = substr($selector, 1);
$function = <<<JS
(function(){
var elem = document.getElementsByClassName("$selector");
elem[0].scrollIntoView(false);
})()
JS;
break;
default:
throw new \Exception(__METHOD__ . ' Couldn\'t find selector: ' . $selector . ' - Allowed selectors: #id, .className, //xpath');
break;
}
try {
$this->getSession()->executeScript($function);
} catch (Exception $e) {
throw new \Exception(__METHOD__ . ' failed');
}
}
}
Hello MKorostoff,
Is it possible to do the same, but by element's text?
This would be nice as well - for instance scrolling to an anchor tag with linked text.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Getting this error
ele is undefined
, when we execute the scenarioI scroll "some-id" into view
from behat.