Protractor - ScrollDown in a Dialog Container to Click in a element

Question

i'm trying to interact with some hidden elements with protractor in a Dialog Container ( Image of Dialog Container ), so i tryed so many options but I did not succeed in any. (tests in chrome)

My setup: I/status - selenium standalone version available: 3.141.59 [last]

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

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

I/status - IEDriverServer is not present

I/status - android-sdk is not present

I/status - appium is not present

1st attempt use browser actions to pagedown the dialog and find 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

2st attempt use mouseMove to click on 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.

Anyone has a advice? Thank you so much!!!

SOLUTION: With the help of the community i used this block of code to solve my question

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

This worked very well!

Your dialog is not native browser dialog, but customized DIV dialog. You can't rely on the `click()` or 'mouseMove()' to make it visible. You need to use `executeScript()` to run a javascript snippet, If i can find it from my previous project, I will post it. — yong, Apr 14 '20 at 23:40
@Nascimento, Did you try DublinDev answer to use scrollIntoView(). His answer is what I want to say. — yong, Apr 16 '20 at 06:16
I found the solution! await `browser.executeScript("arguments[0].click()", placeSistema);` This worked very well, thank you so much for your help! @yong — Daniel Nascimento, Apr 16 '20 at 11:56

DublinDev · Answer 1 · 2020-04-16T06:19:57.040

1

Have you tried using scrollIntoView with the executeScript? This should scroll that element into the viewport

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

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

edited Apr 16 '20 at 06:19

answered Apr 15 '20 at 18:56

DublinDev

2,318
2
8
31

Thanks for your answer @DublinDev but, it didnt work. i got the message " Failed: element not interactable" – Daniel Nascimento Apr 16 '20 at 11:48
I found the solution! await `browser.executeScript("arguments[0].click()", placeSistema);` This worked very well, thank you so much for your help! @DublinDev – Daniel Nascimento Apr 16 '20 at 11:56

score 0 · Answer 2 · answered Apr 14 '20 at 23:16

0

By default protractor scrolls the element into visibility. Using element.click() will:

Locate the element
Scroll to it and move the cursor to the center of the element
Execute a click

As long as the element are in the DOM, protractor will be able to locate them and as long as there is scrollbar, protractor will know how to use it.

If the usual element.click() does not work you can try using browser.actions()

await browser.actions().mouseMove(elem).perform();
await browser.sleep(1000); // Shouldn't be necessary, but it might help
await browser.actions().click().perform();

or just

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

I've had issues having the 2 commands together before, caused by animations, so I prefer splitting it into 2 different commands.

If none of this works, you can try disabling w3c in the capabilities as the current Actions Api that protractor uses is not support in Selenium-webdriver 4.0 and Protractor 6.0.0 and there are still some bugs with it in current chromedriver versions.

answered Apr 14 '20 at 23:16

L. Aleksiev

46
2

Hi @L. Aleksiev, I have tryied the option1 and option2 but i have the same error. The protractor dosen't scroll down to find the camp. I don't know how to do that: "disable w3c in capabilities", do you have any link with a explanation? – Daniel Nascimento Apr 15 '20 at 11:18
I was thinking to use sendKeys TAB to find the element what i need...but i tryed so many ways to use the Keys and i didn't have success. – Daniel Nascimento Apr 15 '20 at 11:29
@DanielNascimento in your protractor config, add w3c: false inside of your browser capabilities. https://stackoverflow.com/a/57100270/8420947 – L. Aleksiev Apr 15 '20 at 13:43
I found the solution! await `browser.executeScript("arguments[0].click()", placeSistema);` This worked very well, thank you so much for your help! @L. Aleksiev – Daniel Nascimento Apr 16 '20 at 11:57

score 0 · Answer 3 · answered Apr 16 '20 at 14:55

0

Try following script:

   placeSistema = element(by.css('element(by.css('[placeholder = "Sistema"]'))
   browser.executeScript(() => {
   placeSistema .scrollIntoView();
   }, el.getWebElement());
   placeSistema.click()

answered Apr 16 '20 at 14:55

Raj Kumar

758
6
12

Protractor - ScrollDown in a Dialog Container to Click in a element

3 Answers3