您的位置：首页 > 编程语言 > Python开发

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

2017-09-01 14:13 701 查看
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);")
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航