Js处理滚动条和日期框

文章总览图

此思维导图中的语法要结合文章内容来看，切记不可死读书，要活学活用。

Js处理

1.常用的元素基本操作是什么？

四个基本操作。

1.send_keys()

2.click()

3.获取元素的文本内容。

4.获取元素的属性。

find_element_by_xpath()是我们的元素对象。

.text获取它的文本内容。

driver.find_element_by_xpath("").text

2.获取属性的值。

driver.find_element_by_xpath("").get_attribute(属性名称)

driver.find_element_by_xpath("").get_attribute("style")

JS有2种方式

1.通过Js处理滚动条

如果将元素拖动到可见区域之后，再去操作它，也就是处理这个滚动条。

滚动条不是html页面的元素，它是浏览器的元素。想获取浏览器的元素，就不能走常规套路啦，要通过javascript来执行。

不是所有的元素都一定要拖动到可见区域才能操作的。 例如百度搜索中，最后选择这个页面跳转：

例如底部的页面跳转：有的系统，虽然进来是这个地方，想操作页面底部的元素，可以操作，也不需要拖动滚动条，它会自动将它拖动到可见区域，然后去操作它。

有些时候它做不到，你又没有去滚动，这个时候报个不可见的错误。这个不可见的错误，不是说元素在你的页面没有显示出来，而是不是在我们的视觉效果以内，其实是没有在设备的可视区域之内。

这个不可见和等待元素可见不是一个概念。

找个中间都看不见的：

就找这个元素。

1)实现Js拖动的方式

固定的Js代码，Js当中有些函数是可以做这些事情的。

.execute_script这个东西来执行脚本，这是函数名称。

arguments[0]0代表第一个参数，1代表第二个参数，2代表第三个参数。

2)看源码可以看出：

driver.execute_script()这个脚本里有2个参数。

第一个参数是javascript脚本，你即将执行的js语句，第二个是参数可以传多个。

3)JavaScript脚本中用什么东西来接收外部传进来的参数呢？

js语句有时候是不是要接受外部的参数?

比如处理一个元素，就要传参给它，javascript也可以自己找元素。

所以元素定位，通过自动化代码定位的，然后传给这个脚本，让这个脚本去处理这个元素。

arguments就是传给这个语句的参数。

这个arguments，来接收外部传进来的参数。

4)外部传进来的参数可能传了一个两个三个。

如果一个参数，可以是：

argument[0]

如果是2个参数，可以是：

argument[0,1]

argument[0]代表元素。

5)找到的element对象传给argument[0]

6)方法.scrolllntoView()滚动到可见区域。

7)方法.scrolllntoView()和方法.scrolllntoView(false)的区别：

用电脑打开一个页面，在整个浏览器的网页内容可视区当中，有宽和高。

这个是浏览器可视区的高度。

例如元素在页面正中间，想将它滚动到可见区域，必须有向上滚和向下滚这2种做法。

如果你希望他向上滚。

一种，.scrolllntoView()默认跟页面顶部对齐：

一种，方法.scrolllntoView(false)默认与页面底部对齐：

8)为什么会有上下之分？

有的时候网页是有遮罩层:

这条区域线才是顶部:

9)一般用底部？

如果系统没有遮罩层，随便用，有遮罩层就只能用底部。

一般来说，会用顶部，默认的不传参，情非得已的情况下才会传参。

10)如何判定这个页面需要不需要这种滚动操作呢？

如果你的被测系统某一个页面当中，因为太长了出现了滚动条，怎么做呢？

第一次，先不滚动，元素在页面最底部，去执行这样的代码，如果它没有报错，那就不用滚动了，直接用就好。

如果看到了不可见的报错，前提必须确认其它方面都没有错，因为它不是在可视区才出现这个问题，那就再去加滚动。

滑轮往上拉，是和底部对齐。

滑轮往下拉，是和顶部对齐。

11)这个是和底部对齐的：

你们看，滑动条在最上面了，已经滑不动了，所以证明这个效果已经和底部对齐了。

12)代码

from selenium import webdriver
import time
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
#web自动化有8种定位方式在By这个类中，详情可以看源码。


#启动谷歌浏览器，开启与浏览器之间的会话。
driver=webdriver.Chrome(service_log_path="D://chromedriver_service.log")
# 最大化一下窗口
driver.maximize_window()

# 全局等待--隐性等待
# driver.implicitly_wait(30)

#访问网页
driver.get("http://www.baidu.com")#写全网址的路径。


driver.find_element_by_id("kw").send_keys("柠檬班")
driver.find_element_by_id("su").click()

#滚动条处理
# 1.找到要滚动到可视区域的元素
WebDriverWait(driver,20).until(EC.visibility_of_element_located((By.XPATH,'//a[contains(text(),"软件测试面试题-")]')))
ele=driver.find_element_by_xpath('//a[contains(text(),"软件测试面试题-")]')


# 2.使用Js进行滚动操作
driver.execute_script("arguments[0].scrollIntoView(false);",ele)

2.通过Js处理日期框

你们看，日期这块不能输入的：

1)为什么出发日期这块不能输入？是因为这里的元素是只读readonly

日期输入框:一种是只读的，一种是允许输入的。

DOM对象是可以改变当前元素的各种东西的。将不可编辑属性改成可编辑的。如果是这种情况下，需要改变它的编辑状态。

如果日期输入框，本身就可以直接输入的，send_keys就可以了，不需要去日期框里面去选。

2)手工测试的时候是要去日期框里面去选的，自动化为什么不需要去选，不怕出问题嘛？

在做自动化的时候有些步骤，能够简单化就简单化。这只是个小细节，不是自动化测试用例真正关心的目的。按照弹框里面去选，是件很复杂的事情，比较难搞定，很有可能通过率非常低就是因为日期框的原因，所以没必要，而且这种细节，手工测试的时候都已经测过了。

如果你想额外验证下这个选项是不是正确的时候，单独手工测试下就行。

遇到这种比较复杂，又非常影响用例的通过率，对于这种细节，用简单的跳过它的方式就可以。

3)send_keys输入的内容是有原则的，它要求按照日期的格式输入。

比如你的日期格式是2020-01-23 ，那你就按照这个格式输入字符串啊。如果不按照日期的格式输入，例如随便输入“111111”，后面就无法查询了。

补充下：send_keys可以输入的内容：字符串或键盘内容。

处理不可编辑改成可编辑的，然后按照它这个格式输入日期。

可利用DOM对象，在Console这个地方调试一下，确认Js代码没有问题，然后用execute_script()来操作它。

先找到这个元素的id：

document代表当前整个文档。

去掉readonly这个属性，有2种方式：

方式一：

ele.readOnly=false

你看，就可以输入了，但是要查询的话，必须按日期格式输入。

设置指定的日期：

方式二：

移除readonly属性。

ele.removeAttribute("readonly")

你看，就可以输入了，但是要查询的话，必须按日期格式输入。

在Console当中调试通过后，我们开始写代码：

js='var ele=document.getElementById("train_date");ele.readOnly=false;ele.value="2020-03-12";'

driver.execute_script(js)

4)找到“查询”这个元素，点击。

查询成功！打开这个窗口：

5)execute_script这个函数就是用来执行js代码的，什么样的js代码都可以。

用driver.find_element()去找到这个元素，在页面上看到是有文本内容的，但是通过driver.find_element().send_keys()或者.text得不到内容。

有些输入框是可以输入，但是你用driver.find_element().send_keys()可能得不到结果。

补充下：send_keys() 输入操作。

js当中通过设置元素的value值来实现的。

这个地方有value属性，但是没有随着我输入的出发日期而变动：

理论上，在输入框中输入的内容，应该在html当中，Elements当中都应该看到对应得文本内容。但是并不是所有得情况都如此。

6)原因是开发直接设置它的value属性没有在页面中显示出来。

因为html页面没有innerText:

在value里面可以看到：

Elements这里没有显示value属性：

7)有的开发设置这个值，Elements中你看不到，确实又设置了。如果你想获取输入的值，只能通过js中ele.value

遇到上面这种情况并不多。如果用正常的自动化套路搞不定，就用js去试试。

注意：Js处理的，先在Console这个地方调试通过了，再去写代码。

3.上传操作

windows系统当中的文件管理窗口，这个是windows控件：

webdriver肯定用不了，可以利用Python的第三方库。

例如pywin32、pyautoit库可以进行上传文件。

上传窗口有哪些处理方式呢？

情况一：

上传按钮前面有一个输入框，允许输入本地文件地址。

send_keys+本地地址

情况二：

没有输入框，只有按钮操作。

autoit生成au3格式的脚本，只有autoit这个软件可以运行，转换成exe，让Python去调用exe文件执行。

pywin32只适用于windows，其它的都不行。pyautoit库可同通用苹果、linux、windows系统。

也需要识别控件元素。windows系统识别工具winSpy

spy++用来识别元素，pywin32库用来执行Python代码。

上传操作的代码是固定的，无论是ie、谷歌、火狐浏览器，都是windows系统，它的资源管理窗口不会变化的，都是用的windows系统的控件。

上传操作部分，未完待续~

补充

以下知识点来自同行的回答，特意感谢同行的帮助。

.text和text()有啥区别？

.text是获取一个element对象的文本属性。

driver.find_element_by_xpath("").text

text()最常见是用到xpath定位里面的元素定位。

//a[text()='求放过']

Js中innerText的用法：

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

获取元素的内容：element.innerText;

给元素设置内容：element.innerText = string;