[Selenium][Notes]Day6:8️⃣执行Javascript脚本

Background:

JavaScript是运行在客户端（浏览器）和服务器端的脚本语言，允许将静态网页转换为交互式网页。可以通过 Python Selenium WebDriver 执行 JavaScript 语句，在Web页面中进行js交互。那么js能做的事，Selenium应该大部分也能做。WebDriver是模拟终端用户的交互，所以就不能点击不可见的元素，有时可见元素也不能点击。在这些情况下，我们就可以通过WebDriver 执行JavaScript来点击或者执行页面元素。

1. 同步执行execute_script()

方法解释：是同步方法，用它执行js代码会阻塞主线程执行，直到js代码执行完毕。使用execute_script()执行JavaScript 代码，有两种方法实现元素操作:

方法1:文档级别操作

• 直接使用JavaScript实现元素定位和动作执行，主要方法有：

document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS

方法2:元素级别操作

• 获取返回值

# 可以返回JavaScript的执行结果

self.driver.execute_script("return document.getElementById('kw').value")
js = 'return document.title'
self.driver.execute_script(js) # 返回网页标题
print(title)

• 滑动操作

# 滑动到浏览器底部
document.documentElement.scrollTop=10000
window.scrollTo(0, document.body.scrollHeight)

# 滑动到浏览器顶部
document.documentElement.scrollTop=0
window.scrollTo(document.body.scrollHeight,0)

• 更改元素属性

大部分时间控件都是 readonly属性，需要手动去选择对应的时间。自动化测试中，可以使用JavaScript代码取消readonly属性

# 打开测试页面,修改出发日期,断言日期是否修改成功

def test_datettime(self):
  self.driver.get("https://www.12306.cn/index/")
  # 取消readonly属性
  self.driver.execute_script("dat=document.getElementById('train_date'); dat.removeAttribute('readonly')")
  self.driver.execute_script("document.getElementById('train_date').value='2020-10-01'")
  time.sleep(3)
  now_time = self.driver.execute_script("return document.getElementById('train_date').value")
  assert '2020-10-01' == now_time
  sleep(2)
  self.driver.quit()

2. 异步执行execute_async_script()

方法解释：是异步方法，它不会阻塞主线程执行

实例Code:

from selenium import webdriver
from time import sleep

class TestCase(object):
    def __init__(self):
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.get('http://www.baidu.com')

    def test1(self):
        # 打开一个alert
        self.driver.execute_script("alert('test')")
        sleep(2)
        self.driver.switch_to.alert.accept()
    def test2(self):
        # 返回tab的title
        js = 'return document.title'
        title = self.driver.execute_script(js)
        print(title)

    def test3(self):
        # 拿到元素，设置2px的边框，红色
        js = 'var q = document.getElementById("kw"); q.style.border=2px solid'
        self.driver.execute_script(js)
        sleep(2)

    def test4(self):
        self.driver.find_element_by_id('kw').send_keys('Github')
        self.driver.find_element_by_id('su').click()
        sleep(4)
        # 滚动到最下面
        js1 = "window.scrollTo(100,300)"
        js2 = 'window.scrollTo(0, document.body.scrollHeight)'
        self.driver.execute_script(js1)
        sleep(2)
        self.driver.execute_script(js2)
        sleep(2)
        self.driver.quit()

    def test_datettime(self):
        self.driver.get("https://www.12306.cn/index/")
        # 取消readonly属性
        self.driver.execute_script("dat=document.getElementById('train_date'); dat.removeAttribute('readonly')")
        self.driver.execute_script("document.getElementById('train_date').value='2020-10-01'")
        time.sleep(3)
        now_time = self.driver.execute_script("return document.getElementById('train_date').value")
        assert '2020-10-01' == now_time
        sleep(2)
        self.driver.quit()

if __name__ == '__main__':
    case = TestCase()
    # case.test1()
    # case.test2()
    # case.test3()
    # case.test4()
    case.test_datettime()