We Keep Coding

How to scroll an element to exactly the middle of a screen using Selenium with Python

I'm automating a webpage using Robot Framework, Selenium and python. There are several clicks on different elements of the page, and I want to first scroll the element exactly to the middle of the screen, and then click on it.
I have already used this:
self.seleniumlibrary.scroll_element_into_view(element)
but it doesn't seem to do anything or at least scroll the element to the middle of the screen. Is there a JavaScript code I can use? I know that I can get the width and the height of the screen like this:
height, weight = self.seleniumlibrary.get_window_size()
but then what? I checked other questions/answered, but none of them were using Python.

There are several steps you can take:
Try to maximize the browser screen with the command
maximize browser window
Do a web page scroll
execute javascript window.scrollTo(0,2500)
0 = start condition for scrolling page
2500 = how far to scroll the webpage
or you can do :
scroll element into view (element/xpath)
hope can help you

Web Element "Grows" After Being Scrolled into View

I recently posted a question on SO where I observed a different element height and width being returned by Chrome Inspector tool vs. Selenium WebDriver when calling element.getSize().getWidth() and element.getSize().getHeight(). With Chrome Inspector I get dimensions of w = 979, h = 1961. With Selenium I get dimensions of 979 and 1461 respectively.
Code I'm using to retrieve element:
String URL = "https://www.amazon.com/dp/B07G9RZD14";
driver.navigate().to(URL);
String XPath = ".//*[#id='aplus']/div";
WebElement element = driver.findElement(By.xpath(XPath));
I've repeated this experiment several times and each time I got the same result. Some have suggested that I was changing the size of the browser however this is not the case. I always performed my test in maximized mode from start to finish.
I did experiment further and it turn out that if I inspect the element with Chrome Inspector immediately after the page loads (without scrolling down to element so it is put into view) the dimensions returned matches the dimensions returned by Selenium (1461). It is only after I scroll element into view that the element height "grows" to 1961.
When I inspect the HTML in the above URL I see a script executing an "expander" function.
I have three question.
1) How does this function work? (Looks like it's using Javascript)
2) Is it possible to get the real dimensions of the said element (1961) without scrolling element into view? Or it would be required to scroll into view element with this kind of function attached?
3) If it is required to scroll such elements into view, is it possible for us to know which elements have this function and need to be scrolled into view or I would have to scroll all elements into view as a precaution?
Thanks

Amazon product pages are quite complex, and include a lot of lazy-loaded images and other elements. It's likely that your element is growing in size because new content is being rendered lazily as you scroll down the page.
To answer your question, you will certainly need to scroll down the entire page and allow all elements to finish rendering if you want completely accurate dimensions.

Why sometime scrollTop/scrollLeft not writable?

I'm using dhtmlx Gantt Chart UI component which have task list and graphical chart. Task list and graphical chart are contained in two separate div element which synchronized for parallel scrolling. By scrolling the chart area, task list is automatically scrolled resulting the task row position matches the Gantt line position.
Inspecting the component source code, I found the sync is implemented by the following code :
this.oData.onscroll = function() {
self.panelTime.scrollLeft = this.scrollLeft;
self.panelNames.scrollTop = this.scrollTop;
};
All HTML markup in the UI control are generated dynamically by JavaScript. All is working well except it takes too long time to render 800-ish task list.
To improve rendering time, I decide to built my own server side rendering module to generate the HTML markup identical with that originally generated client side. This markup is fetched from client side using ordinary jquery $.get() and injected to page using $(el).html(). Then I put the necessary event handler as the original client side version.
The problem now is parallel scrolling doesn't work. I could capture the scroll event on the chart area, but I couldn't set the scrollTop property of the task list area. I test in firebug to manually force the scrollTop property, but the value didn't change. It seems that scrollTop property is read-only.
Is there any explanation for this ?

You can't scroll down below the bottom (or past the right) of the element's contents. If the element has overflow: visible (the default), or is at least as large as its contents, then both scroll properties will be stuck at 0. Similarly, even if there is something hidden to scroll into view, then you won't be able to scroll past the end; if you set the scrollTop or scrollLeft to a larger value than makes sense, it will decrease to the largest value that makes sense.
My guess is in your case you're trying to scroll the div before its content is loaded, and it's refusing to scroll because there isn't anything to scroll into view.

How do I get the visual size of visible DOM elements on a web page

I am trying to write an algorithm that tries to segment a webpage into its components such as footer, header, main content area based on the spacial organization of the page.
What I plan on doing is to:
First render the page using a web browser (say Firefox).
Then inspect the DOM model produced by the browser
From the DOM model I'd like to get the following:
a. Size of the element (height, width) (I'd like the actual size - not just what is in the style says)
b. Placement of the element on the web page
c. Z-index of the element.
For the purposes of this question -- I'd appreciate help with: 3.a and 3.b
Thanks.

offsetWidth\offsetHeight is what you want for getting element dimensions:
https://developer.mozilla.org/en/DOM/element.offsetWidth
offsetTop\offsetRight is likely what you want to find location of objects:
http://www.quirksmode.org/js/findpos.html

It depends on the browser. This table shows the methods across browsers:
http://www.csscripting.com/css-multi-column/dom-width-height.php
But if you're just using Firefox than you use Firefox handling code / Javascript. You could also look into the source code of Firebug and see how it calculates width / height / z-index.

I think what you want is: offsetWidth, offsetHeight, offsetTop, and offsetLeft.

Morphing content based on window part focus

What I'm trying to achieve is basically have a code that will morph (move around the page) based on the part of the window which is currently viewed.
Scenario:
actual page height : 2000px
actual screen height( pc, laptop whatever ) : 800px
1 image of 600px
3 div's or virtual boxes ( just to prove what I want to do )
Workflow
When you open the page, you'd see the first part of the page with the image loaded in the first div.
What I want and need to achieve is when scrolling the page, and the focus would be on the second div (or the image simply gets out of focus - you can't see it no more),
the image would move (disappear from the first box) and appear in the second one, which is currently visible.
The idea might seem pretty easy but I'm not JavaScript savvy.
Ideally, the answer should include a way to load a JavaScript instead of that image.

The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read Jquery / Javascript find first visible element after scroll