Getting white space in bottom using automated scrolling

Hello,
The web ui page I am testing has recently been upgraded to angular version 8.2.2 from version 6. In the latest angular version 8, when the automation script scrolls down on the page, it introduces a white space on the bottom of the page. (screenshot attached) Even a little bit of scroll down adds this space. However, when I manually scroll down on the page, I don’t see any white space and everything looks fine. Any idea on why only this happens only with automated script and not on manual scrolling ? I hope katalon supports all angular versions. I’m using the normal keyword for scrolling - WebUI.scrollToElement. Looking forward for a response soon.

Thanks,
Gurleen

If you look at the source code for WebUI.scrollToElement() you will see that it uses the standard web API element.scrollIntoView().

image
Source code

If you’re convinced that the change in behavior only occurred when you changed from Angular 6 to 8.2.2 then you have found a bug in Angular, OR that Angular 8.2.2 reveals a problem in your web page that Angular 6 did not reveal. Either way, Katalon is not at fault.

Thank you for the quick response. I agree there’s no issue with Katalon here. However, I’m curious to know why would the white space come up only when automated script does a scroll. I’m not able to reproduce this issue with manual scrolling. Even, if I open the page using Katalon, and then stop the script and do the scroll manually, then also it’s fine. Only when the scroll is done by automation is having this issue, which is making it difficult for my team to troubleshoot this. Any thoughts or idea on why or when such cases happen ?

Does it happen in all browsers?

I checked chrome and edge. it happens in both.

@gurleen.kaur

In order to understand your problem we need to reproduce your problem in a browser on our local PC.

Is the URL of your Application-Under-Test a public one on the Internet? If it is, please share it.

Otherwise, please save the page as a MIME HTML file and share the saved file here.

How to save the page as a MHTML file ?

  1. start Chrome browser manually
  2. navigate to the URL of your target web page
  3. do Right click somewhere on the page, you will see a drop down menu where you can choose “Save as”
  4. “Save as” calls up a dialog where you can select a menu “save as, Webpage, Single file” .
  5. select the menu,
  6. choose “.mht” as the filename extension, and do save it.
  7. you will get a file saved.

That’s a MHTML file.

If you could share the MHTML file, we will be able to reproduce your target HTML live on our PC without immediate internet connection to its URL. We will be able to hack for more research.

Modern browsers, not only Chrome, is aware that it is being controlled by some automated software, not by human. The following screenshot proves that awareness.

I remember that Chrome started displaying “being controlled by automated software” as of mid 2018 when the W3C WebDriver specification got approved and all browsers conformed to it. See

It is also suggested that user agents make an effort to visually distinguish a user agent session that is under control of WebDriver from those used for normal browsing sessions. This can be done through a browser chrome element such as a “door hanger”, colorful decoration of the OS window, or some widget element that is prevalent in the window so that it easy to identify automation windows.

I suppose that, since that change, browsers allow users’ JavaScript to refer to the “automation enabled” status if it wants to.

Angularjs Ver 1.6.x was popular in 2017 and early 2018. I guess, Angular 1.6.x didn’t know the automation-enabled status, but newer version of Angular like v1.8.x must be aware of the “automation-enable” status. But I am not sure what’s going on for you as I can not reproduce your case on my PC.


By the way, the following discussion may be interesting for you.

You can turn off “enable-automation” flag in Chrome by setting an option. This may stop the undesirable whitespaces in your page.

Hi, Thanks for the detailed response. The URL is not public, i saved the mhtml file, but the attachments on this forum doesn’t allow me to a file with extension .mht
Any other way I can send that file to you ?
image

Tried this - turn off “enable-automation” flag. doesn’t help. I still see white spaces in bottom

uploading in zip file

I could open the MHTML and see the page opened. But it behaves strange. I can not, even manually, scroll the page down at all. I do not see why. I looked at the HTML source of your page, found it is very much sophisticated (complex, complicated, …). I guess, the javascript in the page is AJAX-driven, requires a live continuous connection to the backend server, so that the page frozen in a MHTML does not act properly.

I am afraid I would not be able to dig into your problem with a dead MHTML.

@gurleen.kaur

Could you show us how the HTML source of the unwanted whitespaces at the bottom of the page looks like?

I guess, that would be some HTML markups without visible text. For example:

<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>
<span>&nbps;</span><span>&nbps;</span><span>&nbps;</span>

If you look at the HTML face of the unwanted whitespaces, you may get an aha! what they are.