Selenium2+python automation 17-JS handles scroll bars

foreword

    Selenium is not a panacea, and sometimes the operation on the page cannot be achieved, at this time, it needs to be done with the help of JS.

Common scenarios:

When the elements on the page exceed one screen, if you want to operate the elements at the bottom of the screen, you cannot directly locate them, and the elements will be reported as invisible.

At this time, you need to use the scroll bar to drag the screen, so that the operated element is displayed on the current screen.

Scroll bars cannot be positioned directly with the positioning tool. There is no direct way to control the scroll bar in selenium,

At this time, we can only use J. Fortunately, selenium provides a method to operate js:

execute_script(), which can directly execute js scripts.

 

1. Introduction to JavaScript

1. JavaScript is the most popular scripting language in the world, because all the web pages you browse on your computer, mobile phone, tablet,

As well as countless HTML5-based mobile apps, the interaction logic is driven by JavaScript. general speaking,

JavaScript is an interpreted programming language that runs in the browser.

So the question is, why do we need to learn JavaScript?
2. Some special operations cannot be done directly by selenium2+python. JS happens to be the strong point in this area, so it is a very

Good addition. If you are not familiar with js, you can find tutorials on the Internet and simply understand them.

http://www.w3school.com.cn/js/index.asp4

 

2. Control the height of the scroll bar

1. Scroll back to the top:

js="var q=document.getElementById('id').scrollTop=0"
driver.execute_script(js) 
2. The scroll bar is pulled to the bottom

js="var q=document.documentElement.scrollTop=10000"
driver.execute_script(js)

3. Here you can modify the value of scrollTop to locate the position of the scroll bar on the right, 0 is the top, and 10000 is the bottom.

Copyright, WeChat public account: yoyoketang

3. Horizontal scroll bar
1. Sometimes the browser page needs to be scrolled left and right (usually after the screen is maximized, it is rare to scroll left and right).
2. Control the horizontal and vertical scroll bars on the left scrollTo(x, y) js = "window.scrollTo(100,400);"

driver.execute_script(js)

3. The first parameter x is the horizontal distance, and the second parameter y is the vertical distance

 

4. Chrome browser

1. The above method is possible on Firefox, but with Chrome browser, it is found that it does not work.
Google Chrome is so willful and disobedient, so the following methods are used to solve the problem of Google Chrome scroll bars.

2. Chrome browser solution:

js = "var q=document.body.scrollTop=0"
driver.execute_script(js)

 

Five, element focus
1. Although the above method can solve the position problem of dragging the scroll bar, but sometimes it is impossible to determine the element I need to operate

In what position, it is possible that the page opened each time is different, and the position of the element is also different. What should I do?

2. At this time, we can first let the page jump directly to the position where the element appears, and then we can operate. It also needs to be implemented with the help of JS. 
3. Element Focus:

target = driver.find_element_by_xxxx()
driver.execute_script("arguments[0].scrollIntoView();", target)

 

6. Get the browser name: driver.name

1. In order to solve the problem that different browsers have different operation methods, you can write a function for compatibility.

2. First use driver.name to get the browser name, and then use the if statement to make a judgment

 

7. Compatibility
1. Compatible with Google and firefox/IE

 

Eight, scrollTo function

A friend downstairs said that there is no compatibility problem with this scrollTo function, and the editor borrowed flowers to offer Buddha.

--scrollHeight Get the scroll height of the object. 
--scrollLeft Sets or gets the distance between the left edge of the object and the extreme left of the currently visible content in the window. 
--scrollTop Sets or gets the distance between the top of the object and the top of the visible content in the window. 
--scrollWidth Get the scroll width of the object.

 

There is no compatibility problem with the scrollTo function, you can use this function directly #Scroll to the

bottom
js = "window.scrollTo(0,document.body.scrollHeight)" 
driver.execute_script(js) #Scroll

to the top
js = "window. scrollTo(0,0)" 
driver.execute_script(js)

九、参考代码如下：
# coding:utf-8
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
print driver.name
## 回到顶部
#def scroll_top():
#     if driver.name == "chrome":
#        js = "var q=document.body.scrollTop=0"
#     else:
#         js = "var q=document.documentElement.scrollTop=0"
#     return driver.execute_script(js)
# 拉到底部
#def scroll_foot():
#    if driver.name == "chrome":
#         js = "var q=document.body.scrollTop=10000"
#     else:
#         js = "var q=document.documentElement.scrollTop=10000"
#     return driver.execute_script(js)

#Scroll to the bottom
js = "window.scrollTo(0,document.body.scrollHeight)" 
driver.execute_script(js) #Scroll

to the top
js = "window.scrollTo(0,0)" 
driver.execute_script(js)

# 聚焦元素
target = driver.find_element_by_xxxx()
driver.execute_script("arguments[0].scrollIntoView();", target)

The JS function is still very powerful. It can also handle the problem of rich text and embedded scroll bars. I will sort it out next time when I have time.