Issue: Protractor executeScript scroll not functioning properly

A situation has arisen while testing my Ionic app.

On a particular page, the button that needs to be clicked is located outside the window boundaries. As a result, the code snippet below produces an error:

element.all(by.css('.item.item-complex')).get(9).click();

The error message reads:

ElementNotVisibleError: element not visible

To address this issue, my approach is to scroll down the page in order to bring the button into view before attempting to simulate a click on it. Here is the code snippet I am using:

browser.executeScript('window.scrollTo(0, 200);').then(function() {
    element.all(by.css('.item.item-complex')).get(9).click();
    expect(browser.getTitle()).toEqual('Vegeta The Prince');
});

Despite adopting this strategy, the scrolling action does not seem to be taking place as intended. I am seeking assistance in resolving this issue.

For context, I am utilizing Google Chrome for this task.

Answer №1

Whenever I face challenges similar to this, I use the scroll into view technique:

var item = element.all(by.css('.item.item-complex')).get(9);
browser.executeScript("arguments[0].scrollIntoView();", item.getWebElement());

item.click();

Answer №2

After some troubleshooting, I managed to resolve the issue by utilizing the following line of code:

window.scrollTo(a, b)

Here's the code snippet I used:

var element = element.all(by.css('.item.item-complex')).get(9);

element.getLocation()
    .then(function (location) {
        return browser.executeScript('window.scrollTo(' + location.a + ', ' + location.b + ');')
    })
    .then(function () {
        return element.click();
    })
})

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

What is the best way to add this dependency to an AngularJS application?

I am struggling to properly implement the injection of this dependency: https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/2.0.0-beta.10/src/angularjs-dropdown-multiselect.js within my project. This is the current dependency injection s ...

Disable automatic browser scroll reset on inline onclick event

Currently, I am utilizing prototype to create an ajax request through an inline onclick on a link. The function is designed to display an element on the page and everything functions properly. However, there is an issue where the browser scroll bar reset ...

Is it possible to identify a legitimate JSONP response?

My goal is to exchange data with a web service on a separate server that lacks CORS support. I am required to utilize JSONP for this purpose. The service mandates authentication, and when the user is in an SSO environment, they are seamlessly passed throug ...

What is the best way to retrieve app.state in a Remix project when running a Cypress test?

One way Cypress can expose an app's state to the test runner is by using the following approach in React: class MyComponent extends React.Component { constructor (props) { super(props) // only expose the app during E2E tests if (window.C ...

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

Clicking on the mail icon will open the mail with the associated mail id

https://i.sstatic.net/6TLpN.pngWhen the mail icon is clicked, the mail will open with this email address. I am currently working on a project where clicking the mail icon will redirect to the mail signup page with the corresponding email address. In the ...

The ng-repeat for nested JSON is failing to iterate properly

I'm having trouble retrieving the value 1 as shown below: var obj = { {"name":"name"}, {"contents":[{'one':1,'two':2}]} }; function MyController($scope) { $scope.items = obj; $scope.contents = obj.contents; } {{c ...

How can you create a dynamic bounce effect for text with jquery animate()?

I've been experimenting with Jquery to achieve a bounce effect, here's what I have so far: Html: <div id ="animation">bounce</div> Jquery: $("#animation").animate({ marginTop: "80px" }, 1500 ) .animate({ marginBotto ...

Retrieve an HTML document from a specified URL using JavaScript AJAX methods

var $ = require('jquery'); $.ajax({ type:"GET", dataType: 'html', url: 'http://www.google.com/', success: function(res){ console.log(res); } }); The error displaying in the console is: XMLHttpRequest cannot lo ...

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

Seeking assistance with changing the pages

Looking for assistance with troubleshooting my function. All variables are accounted for. var swith = document.getElementById("sub"); var one = document.getElementById("rule"); var two = document.getElementById("cool"); var three = document.getElementByI ...

Obtain the total sum from the array of objects that are nested within

In the array of objects below, each object contains a nested object called count. I am looking to calculate the total sum of Closed, Verify, and Analyze For example, the total for Closed is 23, Verify is 3, and Analyze is 20 "byPerson": [ ...

Can you explain the purpose of the equals sign in ngRepeat?

Can you explain the significance of the equals sign in the ng-repeat attribute value? <li ng-repeat="person in people = (people | orderBy: firstname)"> rather than using: <li ng-repeat="person in people | orderBy: firstname"> I coul ...

How to efficiently manage drop-down menus on a website using VBA specifically designed for Internet Explorer

I am a beginner in VBA and coding, seeking assistance from the community. The purpose of this VBA code is to automate the following steps: Open Internet Explorer Enter user ID and password to login Select the current date Select a specific option (X1) fr ...

How to build a unique ajax call function using a single object parameter in jQuery and JavaScript

Can someone provide a code example for the following requirements: A custom JavaScript function that takes a single object as its argument Utilizes jQuery's ajax method to make an AJAX call The object argument must specify all possible values that c ...

What is the best way to execute a code once another has successfully completed its run?

Within milliseconds, I am required to update a JSON file with new data and then fetch that updated information. However, after posting the data into the JSON file, it appears that when attempting to retrieve it, the old data is returned instead of the newl ...

PhoneGap fails to fire the ondeviceready event within 5 seconds

Currently, I am in the process of debugging my PhoneGap app using Weinre and facing some persistent errors... The 'deviceready' event has not fired even after 5 seconds. Channels are not firing: onPluginsReady, onCordovaReady, onCordovaConnecti ...

The function signature '() => void' cannot be assigned to a variable of type 'string'

Encountering an issue in Typescript where I am attempting to comprehend the declaration of src={close} inside ItemProps{}. The error message received reads: Type '() => void' is not assignable to type 'string'. Regrettably, I am ...

Even though all criteria are met, I still cannot assign a value to the property following the application of the filter method

const selectSeatEventCallback = ( price, flightNum, segmentKey ) => { var postData = { ...state.post }; postData.IsSeatChosen = true; postData.AirPassengerList.filter( (passenger) => ...

Error loading Azure Active Directory web form: Server returned a 401 status code for the requested resource

I recently made changes to my web site (incorporating a web form and entity framework) to use AAD connection, following the guidance in this insightful blog post. However, I am encountering an issue where scripts and css files are not loading properly. Th ...