Guide on how to utilize Protractor for end-to-end testing to access the scroll bar within the div

I am currently working on an end-to-end script, but I am running into trouble accessing an element when a div overflows and the scrollbar within the div is activated.

Specifically, within the form, I need to access the scroll down feature inside the div of the request travel form.

https://i.sstatic.net/6Z5Bb.png

I attempted to use the following script:

 browser.executeScript("window.scrollTo(0,10000);").then(callback);

However, this code accessed the scrollbar of the browser itself, rather than the specific div I intended to scroll down.

Any guidance or suggestions would be greatly appreciated.

Thank you!

typescriptseleniumprotractor

Answer №1

I encountered a similar problem with my application. Unfortunately, there is no built-in way to scroll inside a scrollbar directly, but I was able to achieve it using JavaScript executor.

Method 1:-
You can select the element up to which you want to scroll.
For example: (replace with your actual identifier)

browser.executeScript('arguments[0].scrollIntoView(true)', <yourelement>.getWebElement());

Method 2:-
Find the identifier of the element to which the scrollbar is attached and use the following code.

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

Let me know if you are still experiencing difficulties.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to creating varying component sizes using ReactJS and Styled Components

Is it possible to add variation to my button based on the prop 'size' being set to either 'small' or 'medium'? interface Props { size?: 'medium' | 'small'; } How can I adjust the size of the component us ...

javascriptreactjstypescriptstyled-components

Issue with nodemailer not sending emails when included in the protractor configuration file within the afterLaunch() function

Issue with nodemailer not sending email when placed in afterLaunch() block of Protractor config. It works fine when placed in beforeLaunch() or onPrepare() blocks. The goal is to send an HTML email after completing the Protractor test run. The framework g ...

npmjasmineprotractornodemailer

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

javascriptreactjstypescript

Utilizing CSS Selectors for Web Scraping with Selenium

Currently, I am working on a college project that involves scraping data from Linkedin. In order to locate the skills & endorsements, recommendations, and accomplishments section, I have implemented the following code: skills = driver.find_elements_by_css_ ...

seleniumselenium-webdriverweb-scrapingcss-selectors

`Error importing react-markdown in Next.js 11.1 with TypeScript``

Having trouble with importing react-markdown in my next.js SSG project. When running npm run dev, I encounter an error that prevents me from proceeding to test in next export. I understand that react-markdown is an esm package, but I'm not sure how t ...

typescriptnext.jses6-modulesreact-markdown

Locating Items in an Array using Angular 5 and Forming a New Array with the Located Objects

Looking for a way to extract objects from an array that have the type "noActiveServiceDashboard" and "extraAmountDashboard". I want to create a new array with only these two entries in the same format. I've attempted using .find() or .filter() method ...

typescriptangular5

Finding the element ID of a tapped object in Android: Techniques and Tips

Currently, I am working on a research project that involves Android automation. My task is to automate the steps recorded when a user taps on the screen. I have spent the past two days searching for a suitable method to identify the element tapped on the ...

androidseleniumautomationadbappium

Encountering an IllegalStateException while attempting to launch the Internet Explorer browser in Selenium has prevented successful browser initialization

Encountered an error while running the main thread: java.lang.IllegalStateException - The path to the driver executable must be set by the webdriver.ie.driver system property; for more information, visit https://github.com/SeleniumHQ/selenium/wiki/Internet ...

javainternet-explorerselenium

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

The name property of event.currentTarget is now being returned as currentTarget

I am facing an issue with my handleChange function in typescript. When I try to retrieve the name attribute from a text field and log it, it returns 'currentTarget' instead of the assigned name. Additionally, the value is showing up as undefined. ...

reactjstypescriptmaterial-uijsx

Python seems to be having difficulty with the send.keys(Keys.ENTER) function

from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.action_chains import ActionChains import time browser=webdriver.Chrome('C:/Users/Dell/Downloads/chromedriver') browser.get('https: ...

pythonseleniumselenium-webdriver

An error occurs with webpack during postinstall when trying to load TypeScript

I have created a custom package that includes a postinstall webpack script as specified in my package.json file: "scripts": { ... "postinstall": "webpack" } The webpack configuration looks like this: const path = require('path'); ...

typescriptnpmwebpackpackage

Using Selenium and Python to display options from a select dropdown

Below is the HTML code I am currently working with: <select name="countries" class_id="countries"> <option value="-1">--SELECT COUNTRY--</option> <option value="459">New Zealand</option> <option value="100"> ...

pythonselenium

Having trouble with data types error in TypeScript while using Next.js?

I am encountering an issue with identifying the data type of the URL that I will be fetching from a REST API. To address this, I have developed a custom hook for usability in my project where I am using Next.js along with TypeScript. Below is the code sni ...

reactjstypescriptnext.jsreact-hooks

Interacting with icons using TouchableOpacity and onPress functionality

I am attempting to implement onPress functionality for icons using TouchableOpacity. However, when I click on the icon, nothing happens and there are no console logs displayed. I have also tried enclosing the icon within an additional View, but that appro ...

javascriptreactjstypescriptreact-nativenative-base

HTML template failing to retrieve data from Angular dataSource

My goal is to import data from an Excel file into my angular application. I have successfully retrieved the data from the Excel file, parsed it to extract the necessary columns, and stored it in an array within my service.ts file. I call the service from ...

angulartypescript

Exported Members or Node Modules are not available

Starting out with Angular 2 / Typescript and following the 5 Minute Quickstart guide located here. I've come across a common issue, but with a slight twist. I'm running into several "No Exported Member" problems. For example: In app.module.ts: ...

angularjsnode.jsangulartypescripttypescript-typings

"Obtaining the price of a product based on its various sizes using Selenium with

I need to extract product details from this website. The product has three different sizes, and the price changes based on the selected size from the dropdown menu. Currently, my scraper is only able to fetch the default price of $35 for 1kg upon initial ...

pythonselenium

Spotlight a newly generated element produced by the*ngFor directive within Angular 2

In my application, I have a collection of words that are displayed or hidden using *ngFor based on their 'hidden' property. You can view the example on Plunker. The issue arises when the word list becomes extensive, making it challenging to ide ...

cssangulartypescriptngfor

Encountering a 500 Internal Server Error while making a call to a RESTful (GET) Web

Currently, I have a setup where my web server is housed inside a virtual machine, with the client located outside of it. On the server side, I am utilizing .NET Framework 4.6.1 for development. Below is the architecture of my WEB API controller on the se ...

c#asp.net-mvcentity-frameworkresttypescript