Selenium with Python 005 - 调用js操作页面元素

时间:2023-03-09 08:13:32
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">&times;</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);")

Selenium with Python 005 - 调用js操作页面元素

***微信扫一扫,关注“python测试开发圈”,了解更多测试教程!***