十 js滚动条操作，页面元素不可见区域$元素隐藏解决

在web自动化中往往元素不在可见区域，这时候我们就需要用js操作，是滚动条滚动到元素

方法一 js滚动

源生js scrollIntoView() 实现，参False元素与底部对齐

步骤：

1. 等待元素存在

2. 找到这个元素 target

3.用js 滚动到可见区域
元素与顶部对齐
driver.execute_script("arguments[0].scrollIntoView();", target) 滚到到元素可见 ，

driver.execute_script("arguments[0].scrollIntoView(false);", target) 元素与底部对齐

方法二 设置焦点

driver.execute_script("arguments[0].focus;", target)

如果定位到一个元素需要隐藏可以如下这么做
driver.execute_script('$(arguments[0]).fadeOut()',target)

scrollTo(x, y) 和 scrollBy(x, y)的区别

• driver.execute_script("scroll(0,300)") # 不管元素现在处于什么位置，拉倒距离顶部 300距离.
• driver.execute_script("scrollTo(0,300)") # 不管元素现在处于什么位置，拉倒距离顶部 300距离
• driver.execute_script("scrollBy(0,300)") # 在元素现在的位置，向下在拉300距离。比如现在100，拉到400.

滚动到底部

js = "scrollTo(0,document.body.scrollHeight)"
driver.execute_script(js)

滚动到顶部

js = "scrollTo(0,0)"
driver.execute_script(js)

image.png

image.png

Selenium处理元素隐藏

在HTML中，由于页面美化和用户交互的需求，元素隐藏的使用非常常见，比如下拉菜单、内容折叠、对话框以及上传文件框等。

隐藏常见有以下几种表现形式

• hidden：占据空间，无法点击
• style="display: none" ：最常见，不占据空间，无法点击
• style="visibility: hidden"：占据空间，无法点击
• style="overflow: hidden"：占据空间，无法点击
• style="opacity: 0"：占据空间，无法点击
• style="position: absolute; top: -999em"：不占据空间，无法点击
• style="position: relative; top: -999em; "：占据空间，无法点击
• style="position: absolute; visibility: hidden; "：不占据空间，无法点击
• style="height: 0; overflow: hidden; "：不占据空间，无法点击
• style="opacity: 0; filter:Alpha(opacity=0); "：占据空间，可以点击
• style="position: absolute; opacity: 0; filter:Alpha(opacity=0); "：不占据空间，可以点击
• style="zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);"：IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击
• style="position: absolute;zoom: 0.001;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);" ：不占据空间，无法点击

多数情况下，隐藏元素时不可以直接操作的。如果想操作隐藏元素，如果不能通过使用正常的页面步骤触发其显示，则可以通过执行JavaScript脚本，通过移除掉元素的hidden或style属性来使得元素显示并可以进行操作。

比如www.51job.com首页有个全文鼠标放上去下面的公司才会出来。

image.png

鼠标放上去class的值为on,我们就可以通过js修改class的，之后我们直接就定位公司点击

image.png

image.png

https://imgtu.com/的例子

image.png

真实的上传框并不是“开始上传”按钮。而是隐藏在页面的左上角。我们通过在Elements面板Ctrl+F搜索input[type=file]，可以找到实际的上传框。这里有两处，一处是上传图片，一处是通过相机拍照上传，我们选择第一个上传框。该上传框通过一个样式类hidden-visibility为元素添加了sytle属性visibility: hidden属性，来达到隐藏的目的。因此，我们只需要移除掉该元素的style属性即可，然后使用send_keys完成图片上传。代码如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get('https://imgchr.com/')

elm = driver.find_element('id', 'anywhere-upload-input')
js = 'arguments[0].removeAttribute("style");'
driver.execute_script(js, elm)
sleep(0.5)
elm.send_keys('/Users/superhin/Downloads/beida.jpeg')

sleep(3)
driver.quit()