Skip to content

Instantly share code, notes, and snippets.

@MKorostoff
Created April 16, 2015 22:01
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MKorostoff/c94824a467ffa53f4fa9 to your computer and use it in GitHub Desktop.
Save MKorostoff/c94824a467ffa53f4fa9 to your computer and use it in GitHub Desktop.
Scroll into view with behat
/**
* @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");
}
}
@al77ex1
Copy link

al77ex1 commented Apr 3, 2019

@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');
    }
  }
}

@brooke-heaton
Copy link

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