How to bring elements to view automatically in Protractor or selenium

Question

I have a webpage to be tested which has a button at the footer of the page. When i click it, there should be an error message shown near to it.

I was successful in automating this scenario but the issues that , page view does not scroll automatically to page footer. So, on test failures the screenshot i get does not have footer region of the page and thus cannot tell why the test failed.

I have tackled this issue by scrollingto the button element using javascript:

await browser.executeScript('arguments[0].scrollIntoView()', element);

But moving to each element in my test suite through a custom script does not look advisable.

Is there a better way to automatically scroll to the element with which the webdriver api is interacting?

For instance , if i click the button then the browser scrolls automatically to page footer and if i again click the title of page, then the browser scrolls back to top?

Answer 1

This is what the Actions class is for, there is a "moveToElement()" function in each implementation. This is more or less how it will look like in Protractor:

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

This link explains the usage

Answer 2

If I understand the question correctly, you only need to manually move to the element on test failure. In normal circumstances, the driver is automatically moving to any element it needs to interact with?

I would suggest using error handling to execute the "scrollIntoView" code that is in your question.

The Protractor FAQs show how you implement error handling:

How can I catch errors such as ElementNotFound?

WebDriver throws errors when commands cannot be completed - e.g. not being able to click on an element which is obscured by another element. If you need to retry these actions, try using webdriverjs-retry. If you would just like to catch the error, do so like this

elm.click().then(function() { /* passing case */}, function(err) { /* error handling here */})

Answer 3

Write a wrapper custom click function which includes scrollIntoView+click

Anything that you want to add/verify/assert/perform as default actions over library actions cover in to an wrapper function and call that function everywhere instead of directly calling library functions.This is the general advised way to do it because:

1. It adds the default behavior over actions from one place.

2. It is easy to maintain/update if required from one place (DRY).

3. You may also add additional custom error handling as required centrally for reporting/other purposes.

Answer 4

Yes, you can use the "scrollIntoView" method for the element to bring it into view. The code for that in JavaScript would look like:

element.scrollIntoView();

In Protractor or Selenium, you can use the executeScript method to run this JavaScript code. Here's an example in Protractor:

browser.executeScript("arguments[0].scrollIntoView();", element.getWebElement());

In Selenium, it would be similar:

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView();", element);

Make sure to add a wait for the element to be present before you try to scroll into view.