Using Protractor to scroll down within a dialog container in order to click on an element

Seeking to interact with hidden elements using protractor within a Dialog Container (See Image of Dialog Container). Despite trying various options, I have not been successful so far. (tests in chrome)

My Configuration: I/status - selenium standalone version available: 3.141.59 [latest]

I/status - chromedriver versions available: 2.46, 77.0.3865.10, 80.0.3987.16 [latest]

I/status - geckodriver version available: v0.26.0 [latest]

I/status - IEDriverServer is not present

I/status - android-sdk is not present

I/status - appium is not present

First attempt involves utilizing browser actions to scroll down the dialog and locate the hidden elements:

    placeSistema = element(by.css('element(by.css('[placeholder = "Sistema"]'))

    this.clicaCampoSistema = async function () {
        await browser.actions().sendKeys(protractor.Key.PAGE_DOWN).perform();
        await placeSistem.click();
    }

Failed: sendKeysToActiveElement

Second attempt involves using mouseMove to click on the hidden element:

        placeSistema = element(by.css('element(by.css('[placeholder = "Sistema"]'))

        this.clicaCampoSistema = async function () {
        await browser.actions().mouseMove(placeSistema).click().perform();

    }

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

If anyone has any advice, it would be greatly appreciated! Thank you!

  • SOLUTION: Thanks to the community's assistance, I was able to solve my issue using this block of code:

await browser.executeScript("arguments[0].click()", placeSistema);

This solution worked perfectly!

javascriptseleniumjasmineprotractorselenium-chromedriver

Answer №1

If you haven't already, consider using scrollIntoView in conjunction with executeScript. This method can help bring the specified element into view on the screen.

systemPlaceholder = element(by.css('element(by.css('[placeholder = "Sistema"]'))

this.clickSystemField = async function () {
    await browser.executeScript('arguments[0].scrollIntoView(true)', systemPlaceholder.getWebElement());
    await systemPlaceholder.click();
}

Answer №2

When using protractor, the default behavior is to scroll the element into visibility before clicking on it. The process of using element.click() involves:

  1. Finding the element
  2. Scrolling to it and positioning the cursor at the center of the element
  3. Triggering a click action

Protractor can successfully locate elements as long as they are present in the DOM, and if there is a scrollbar, Protractor knows how to navigate it.

If the typical element.click() method does not work, an alternative approach is to use browser.actions()

await browser.actions().mouseMove(elem).perform();
await browser.sleep(1000); // This step may help resolve any issues
await browser.actions().click().perform();

Alternatively, you can combine the actions in a single command like this:

await browser.actions().mouseMove(elem).click().perform();

In some cases, separating the commands might be necessary due to animation-related problems I've encountered before.

If none of these solutions work, consider disabling w3c in the capabilities settings. The current Actions API used by protractor is not compatible with Selenium-webdriver 4.0 and Protractor 6.0.0. Additionally, there are known bugs with it in certain versions of chromedriver.

Answer №3

Check out this sample script:

   systemPlaceholder = element(by.css('element(by.css('[placeholder = "System"]'))
   browser.executeScript(() => {
   systemPlaceholder.scrollIntoView();
   }, el.getWebElement());
   systemPlaceholder.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

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

I have a list of users displayed in an HTML table that is dynamically created on page load. Each row includes an inline button with onclick="functionName(userId)" that triggers the following actions: When clicked, a Bootstrap modal popup is shown and the ...

javascriptjqueryajax

One effective way to obtain and compare text content within webpage elements is by utilizing the powerful combination of Selenium and Python programming

My Objective: To extract and analyze the messages received from individuals in online chat rooms like Omegle. I am attempting to compare these messages using if/elif statements. Here's my approach so far: #Attempting to retrieve the message from Om ...

pythonseleniumselenium-webdriverwebdriverselenium-chromedriver

How come I am unable to get Selenium to input a message on WhatsApp Web using Python 3.8 and Chrome browser?

My script utilizes Selenium to automate actions on a web page. Here is the code snippet: from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from seleni ...

pythonseleniumselenium-webdriverwhatsapp

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

javascripthtmlcss

Unable to smoothly animate object within OBJLoader

I'm a beginner in the world of Three JS and Tween JS, having recently picked it up for my project. However, I've encountered some frustration along the way. My main issue at the moment is trying to tween object1, amidst other objects like object2 ...

javascriptthree.jstween.js

Navigating a webpage and interacting with elements within a different class using the Page Object Model (POM) in

I am currently working on a project with both a landing page and a registration page. While I have successfully stored the web elements from the landing page using @FindBy annotations, I now need to access these elements on the registration page. What st ...

seleniumpom.xml

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

<div onClick={() => { updateValue1((x: number) => x + 1); updateValue2((x: number) => x + 3); }} > one? two? </div> const [value1, updateValue1] = useState(1); const [value2, updateValue2] = useState(1 ...

javascriptreactjsreact-hooksuse-effect

Despite the correct value being displayed in the console.log, the Textfield is not responding to the Reducer

I am currently working on a project to create a tool that can iterate through the pupils of a school class. In order to achieve this, I have implemented a text field in a react component that displays a value: <input className="form-control" onChange={ ...

javascriptreactjsreduxreact-reduxflux

Using Angular route resolve to handle the sessionStorage login status

I have successfully created a login system using Angular JS. Once the user logs in, a session storage variable is set and they are redirected to a dashboard page (which should only be accessible when logged in). $window.sessionStorage["isLoggedIn"] = true ...

javascriptangularjsroutesresolve

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

Recently, I took over a tabbed page that uses multiple queries to determine which tabs should be displayed. My goal is to add some PHP logic that will automatically set focus on a specific tab when the page finishes loading. I'm wondering if it&apos ...

javascriptjquery

Utilizing VueJS, Webpack, and the Power of Video

I'm running into an issue when attempting to use vue-cli with the webpack-simple template. Upon importing my video file: <video src="./assets/twp-logo-video.mp4" id="initial-logo" type="video/mp4"><!-- 700 x 700 --> </video> I en ...

javascriptwebpackvue.jsvuejs2

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Tips for accessing the bottom of a div element in Selenium using C#

I am currently working on scraping reviews from a specific location, let's say this link. The challenge I am facing is that I need to scroll down to the bottom of the div in order to load all the reviews before extracting them into the database. IJa ...

c#selenium

Ways to update the dataTable in ReactJS post clicking the save button on the modal

Just starting my second week of diving into React. Looking for some guidance on how to update the dataTable in reactJs after clicking the save button in the modal. This is the structure I'm working with: I have a ParameterMaintenance.jsx file that ...

javascriptreactjsbootstrap-5

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

javascriptjquerycssbootstrap-4slick.js

The parent's setState does not trigger the child's componentWillReceiveProps

Within my application, there is a parent component and a child component with props connected to the parent's state. When I call setState in the parent component, the componentWillReceiveProps function of the child component does not always get trigg ...

javascriptreactjsreact-nativestatereact-props

Trouble with Callback firing in Select2's 'Infinite Scroll with Remote Data' feature

After reviewing the tutorial on the Select2 project page, I am implementing a feature to load additional records as the user scrolls to the end of the results. <script> $(document).ready(function() { $('#style_full_name').select2({ ...

javascriptruby-on-railsajaxjquery-select2

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

javascriptandroidhtmlcordova

Harness the power of electrons with the simple push of a button - initiating program execution

Recently, I delved into Electron with the desire to create a small application for myself. This app would allow me to run different programs or games by simply clicking on a link. My goal is to have the program/game start automatically when I open the Ele ...

javascriptjquerynode.jsnpmelectron

Utilizing React Router Dom to display a specific component exclusively on certain routes

I am encountering an issue with my React application that uses React Router Dom version 6. I am attempting to display the Nav component only when the path does not match the root "/", but I am struggling to make it work properly. Below is the code snippet ...

javascriptreactjsreact-router-dom