量角器：向下滚动

Posted 2023-03-24

【中文标题】量角器：向下滚动

【英文标题】：Protractor: Scroll down

【发布时间】：2014-06-27 14:54:13

【问题描述】：

我的页面上有一个按钮，当用户向下滚动时该按钮可见。因此，量角器测试给我一个错误：

UnknownError：未知错误：元素在点 (94, 188) 处不可点击。

我尝试使用：

browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');

当我在量角器 elementexplorer.js 中测试它时它起作用了，但在我的常规测试中它什么也没做。有没有其他办法解决这个问题？

【参考方案1】：

您需要等待承诺得到解决。以下示例来自open issue

browser.executeScript('window.scrollTo(0,0);').then(function () 
    page.saveButton.click();
)

更新： 这是一个老问题（2014 年 5 月），但它仍然吸引了一些访问者。 澄清一下：window.scrollTo(0, 0) 滚动到当前页面的左上角。

如果你想滚动到页面底部，你可以调用

window.scrollTo(0, document.body.scrollHeight)

正如@jsuser 在this answer 中提到的那样

更现代的方法是使用

browser.actions().mouseMove(element).perform();

在this answer@MartinBlaustein 上投票

【讨论】：

我遇到了同样的问题，上面的代码在 Firefox 中有效，但在 chrome 中无效。任何帮助表示赞赏？？？

@EnugulaS 试试browser.executeScript('arguments[0].click()', yourWebElem);

我是疯子还是页面左上角的0,0？我相信如果你想向下滚动，你需要将 y 参数调整为 >0。

正确（而不是疯狂）。看一看：w3schools.com/jsref/met_win_scrollto.asp

【参考方案2】：

我想补充上一个答案，希望能提供更多解释。

这段代码，在“executeScript”的调用中：

'window.scrollTo(0,0);'

向上滚动窗口，到窗口坐标 0,0...基本上到最顶部 如果您知道需要前往的具体区域，只需更改坐标即可。

如果你知道你想在窗口的最底部，这是我的目标。您可以在 'y' 坐标中放置一个非常大的数字，就像我在这里所做的那样：

browser.executeScript('window.scrollTo(0,10000);').then(function () 
    expect(<some control>.<some state>).toBe(<some outcome>);
)

【参考方案3】：

如果其他人遇到像我一样的麻烦：

我试图滚动到页面底部以在无限滚动场景中加载我的下一组数据。我尝试了 window.scrollTo 的不同变体以及 arguments[0].click() 都没有成功。

最后我意识到，要让页面滚动，我必须通过单击窗口中的任何元素来将焦点放在“窗口”上。然后 window.scrollTo(0, document.body.scrollHeight) 工作就像一个魅力！

示例代码：

element(by.className('<any element on page>')).click();
browser.executeScript('window.scrollTo(0,document.body.scrollHeight)').then(function()
//whatever you need to check for here
);

【参考方案4】：

我发现创建一个 util helper 并在页面对象（或测试文件本身）中使用它会有所帮助。这似乎对我很有效：

utils.js

module.exports = 
  scrollIntoView: function(el) 
    browser.executeScript(function(el) 
      el.scrollIntoView();
    , el.getWebElement());
  

在某处的页面对象内...

var scrollIntoView = require('../utils').scrollIntoView;

module.exports = 
  clickBackBtn: function() 
    var el = element(by.buttonText('Go back'));
    scrollIntoView(el);
    el.click();
    return;
  

在测试本身...

it('should allow the user to go back to the profile page', function() 
  PageObject.clickBackBtn();
  expect(browser.getCurrentUrl()).toContain('/user/profile');
);

【参考方案5】：

我找到了一个更简单的方法。如果你想滚动到一个元素，你可以使用

    browser.actions().mouseMove(element).perform();

之后浏览器将聚焦该元素。

【讨论】：

我喜欢这种方法，谢谢！我一直使用 scrollTo() 选项，但是当我不得不在模态对话框的 slimScroll 上执行此操作时，滚动会影响背景，而不是模态中的焦点 slimScroll。如果屏幕布局发生变化，我也不再需要在测试中更改 Y 位置。 :)

:) 很高兴它有帮助

我也更喜欢这种方法，但它被 chrome protractortest.org/#/… 破坏了

【参考方案6】：

这个问题的答案在顶部被标记为正确。但是在升级最新的chrome v54之后。下面的代码可能是最好的解决方案。

browser.actions().mouseMove(element).perform();

【讨论】：

这几乎只是this existing answer的重复。

@Pang 但制表符不同?

【参考方案7】：

其他方式，你可以试试这个：

this.setScrollPage = function (element) 

    function execScroll() 
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    

    browser.wait(execScroll, 5000);

;

【参考方案8】：

如果您只想导航到长页面的顶部或底部，您可以简单地使用“HOME”键转到顶部，或使用“END”键转到底部。

例如：

browser.actions().sendKeys(protractor.Key.HOME).perform();

或

browser.actions().sendKeys(protractor.Key.END).perform();

【参考方案9】：

最简单的方法是滚动到预期的元素并单击它。请在当前量角器版本中使用以下经过测试和验证的代码。

it('scroll to element', function() 
           browser.driver.get('https://www.seleniumeasy.com/');
            var btnSubscribe= element(by.id('mc-embedded-subscribe'));
            browser.executeScript("arguments[0].scrollIntoView();", btnSubscribe);
             browser.sleep(7500);
             btnSubscribe.click();
          );

【参考方案10】：

使用

await browser.executeScript(`arguments[0].scrollIntoView(block: "center");`, $element.getWebElement());

如果你想让元素滚动到窗口的中心

【参考方案11】：

我已经遵循了上述所有方法，可以得出以下结论：3 件事肯定有效：

// if you want to move on top of the browser page
browser.actions().sendKeys(protractor.Key.HOME).perform();

// if you want to move on Bottom of the browser page
browser.actions().sendKeys(protractor.Key.END).perform();

如果滚动功能是在浏览器内部而不是在整个页面上实现的，那么请确保单击网格上要滚动的任意位置，然后使用上面的代码。

//Please for other methods to scroll can check "https://www.guru99.com/scroll-up-down-selenium-webdriver.html"
// Best way I would suggest is to use this way as here Element means the XPath 
let Element = element(by.xpath(optionid));
await browser.executeScript("arguments[0].scrollIntoView();", Element.getWebElement());