Selenium with Python 005 - 调用js操作页面元素
WebDriver提供了execute_script()方法来执行JavaScript方法，格式如 driver.execute_script(script,*args)
执行js一般有两种场景，一是在页面中直接执行js，二是在某个已经定位的元素上执行js
通过js操作页面元素
<!DOCTYPE html> <html lang="en"> <head> <title>webdriver 调用js操作元素</title> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <style> .modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-content { /*overflow-y: scroll; */ position: absolute; top: 0; bottom: 0; width: 100%; } .modal-body { overflow-y: scroll; position: absolute; top: 55px; bottom: 65px; width: 100%; } .modal-header .close { margin-right: 15px; } .modal-footer { position: absolute; width: 100%; bottom: 0; } </style> </head> <body> <h3 class="text-info">webdriver 调用js操作元素</h3> <div class="row-fluid well"> <a id="btn1">Button1</a> <a id="btn2" class="btn" onclick="alert('Button2 click trigger...');">Button2</a> </div> <div class="row-fluid well"> <input type="text" id="username"> </div> <!-- Button trigger modal --> <button type="button" id="btn_myModal" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal"> 模态框滚动条 </button> <div class="row-fluid well"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <!-- Modal --> <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <p> Text in a modal </p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close </button> <button type="button" class="btn btn-primary">Save changes </button> </div> </div> </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <html>
#!/usr/bin/env python # -*- coding: utf-8 -*- from selenium import webdriver import os import time driver = webdriver.Chrome() file_path = 'file:///' + os.path.abspath("demo.html") driver.get(file_path) time.sleep(2) #######在页面中直接执行js################# driver.execute_script('$("#btn1").fadeOut();') time.sleep(2) #######在某个已经定位的元素上执行js######## button = driver.find_element_by_class_name('btn') driver.execute_script('$(arguments[0]).click()', button) time.sleep(2) driver.switch_to.alert.accept() time.sleep(2) #################调用js代码############## js = "var q=document.getElementById('username');q.style.border='1px solid red';q.value='PTQA TEST' " driver.execute_script(js) time.sleep(2) js2 = "alert(666);" driver.execute_script(js2) time.sleep(2) driver.switch_to.alert.accept() time.sleep(2) ######Jquery控制浏览器内嵌div的滚动条 #### driver.find_element_by_id('btn_myModal').click() time.sleep(2) js3 = '$(".modal-body").scrollTop(10000)' driver.execute_script(js3) time.sleep(2) driver.find_element_by_css_selector('button.close').click() time.sleep(2) ##########Jquery控制浏览器的滚动条 ###### js4 = '$(document).scrollTop(1000)' driver.execute_script(js4) time.sleep(5) driver.close()
滚动到页面底部也可以这样
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
