SUPARNA SOMAN
Reputation: 2683
How to scroll a portion of my window using protractor-jasmine
I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>
Upvotes: 1
Views: 1851
Answers (3)
PQ Co
Reputation: 517
I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.
Upvotes: 1
SUPARNA SOMAN
Reputation: 2683
var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();
Upvotes: 0
Surendra Jnawali
Reputation: 3240
Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});
Upvotes: 1
Related Questions
- how to scroll the page in AngularJS application using Protractor
- Protractor: Scroll down
- how to access scroll bar inside the div using protractor for e2e
- Scroll down to an element with protractor
- Scrolling on a div element with protractor
- How to scroll top of browser window from middle or bottom of browser window using javascript in protractor
- Protractor send a scroll command to an element (div etc)
- Protractor scroll into view not working
- How to perform scroll down/up using protractor E2E testing
- Scroll down and up using protractor