Selenium执行javaScript

还有什么不可以 發表於 2022-8-18 15:18:00

<h2>简介</h2>
<div>
    1)selenium能够处理js,这使selenium拥有更为强大的能力,既然能够执行js,那么js能做的事情,selenium大部分也能做
    2)直接使用js操作页面,能解决很多click()不生效的问题
    3)页面滚动到底部,顶部
    4)处理富文本,时间控件的输入
 
</div>
<h3>1. selenium调用js</h3>
WebDriver有两个方法来执行JavaScript，分别是：
<div class="cnblogs_code">
<pre>execute_script（同步执行）
execute_async_script（异步执行）</pre>
</div>
execute_script(script, *args): 执行js
return：可以返回js的返回结果
execute_script：arguments传参
<div class="cnblogs_code">
<pre>driver.execute_script("return document.getElementById('kw').value")
driver.execute_script("return document.title;") # 返回网页标题</pre>
</div>
 
<h3>2.js 提供的定位方法</h3>
文档级别操作
<div class="cnblogs_code">
<pre>document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS</pre>
</div>
元素级别操作
可以先使用WebDriver获取想要操作的元素，然后使用JavaScript执行操作。
<div class="cnblogs_code">
<pre>input_ele = driver.find_element(By.ID, "su")
driver.execute_script("arguments.click();", input_ele)</pre>
</div>
<div class="cnblogs_code">
<pre>def test_baidu2(self):
self.driver.get("http://www.baidu.com")
input_ele = self.driver.find_element_by_id("kw")
self.driver.execute_script("arguments.value = 'test';", input_ele)
time.sleep(2)
baidu_ele = self.driver.find_element_by_id("su")
self.driver.execute_script("arguments.click();", baidu_ele)
time.sleep(2)</pre>
</div>
可以在语句中使用多个 JavaScript动作
<div class="cnblogs_code">
<pre>username = driver.find_element_by_xpath("//*[@id='username']")
password = driver.find_element_by_xpath("//*[@id='password']")
driver.execute_script("arguments.value = 'admin';arguments.value = 'admin';", username, password)</pre>
</div>
 
<h3>3.js的滑动页面</h3>
<div class="cnblogs_code">
<pre>如:百度搜索后一直滑动到最底部,点击下一页

js:document.documentElement.scrollTop=10000   将页面滑动至底部，给一个非常大的值就可以

    document.documentElement.scrollTop=0     给一个非常小的值就可以滑动到顶部

    document.getElementById("su")    可以通过这种方式获取元素

    window.scrollTo(0,document.body.clientHeight)     滑动到可视窗口的最底部

selenium:滑动到target 为可见状态:

        target =self.driver.find_element_by_id("help") 或 target =driver.execute_script("return document.getElementById('help')")

        self.driver.execute_script("arguments.scrollIntoView();", target)</pre>
</div>
<div class="cnblogs_code">
<pre>class TestJS(Base):
def test_js_scroll(self):
 self.driver.get('https://www.baidu.com')
 self.driver.find_element_by_id('kw').send_keys('selenium')
 # self.driver.find_element_by_id('su').click() #点击百度一下
 element = self.driver.execute_script('return document.getElementById("su")') #点击百度一下
 element.click() # 点击百度一下
 self.driver.execute_script('document.documentElement.scrollTop=5000') # 滚动到最底部
 time.sleep(2)
 self.driver.find_element_by_xpath('//*[@id="page"]/div/a/span').click()
 time.sleep(3)
 for code in [
 'return document.title', 'return JSON.stringify(performance.timing)'
 ] :
 print(self.driver.execute_script(code)) # 打印标题和内容</pre>
</div>
 
<h3>4.js处理时间控件</h3>
思路:1.要取消日期的readonly属性;
        2.给value赋值;
        3.写js代码来实现如上2点,在用webdriver对js进行处理;
    示例:
 <img src="https://img2022.cnblogs.com/blog/1373456/202208/1373456-20220818145908775-757217313.png" alt="" loading="lazy">
<div class="cnblogs_code">
<pre class="line-numberslanguage-python"><code class="pythonlanguage-python"> def test_js_datetime(self):
 self.driver.get("https://www.12306.cn/index/")
 # 将出发元素赋值
 time_element = "document.getElementById('train_date')"
 # 打印修改前的日期
 print(self.driver.execute_script(f"return {time_element}.value"))
 # 移除元素的readonly属性
 self.driver.execute_script(f"{time_element}.removeAttribute('readonly')")
 # 修改元素的值
 self.driver.execute_script(f"{time_element}.value='2020-12-30'")
 sleep(2)
 # 打印修改的日期
 print(self.driver.execute_script(f"return {time_element}.value"))</code></pre>
</div>
 
<h3>5.获取页面标题</h3>
js:  document.title 
<div class="cnblogs_code">
<pre>driver.execute_script("return document.title"))</pre>
</div>
 
<h3>6.弹出alert弹窗</h3>
<div class="cnblogs_code">
<pre>#js: window.alert("hello selenium”)
driver.execute_script("window.alert('hello selenium')")</pre>
</div>
 
<h3>7. 获取当前页面的加载速度等数据 </h3>
<div class="cnblogs_code">
<pre>#js:JSON.stringify(performance.timing)
driver.execute_script("return JSON.stringify(performance.timing)")</pre>
</div>
 
<h3> 8.其他</h3>
<div>
<div>
<ul>
<li><code>driver.execute_script("arguments.click();", element)</code>，点击操作</li>
<li><code>driver.execute_script("arguments.scrollIntoView();", element)</code>，移动到目标元素，类似于滑动查找</li>
</ul>
 
<h3>9.在页面的textarea文本框中输入内容</h3>
HTML代码如下：
<div class="cnblogs_code">
<pre><textarea value="" name="ta1"></textarea></pre>
</div>
虽然可以通过name定位到元素，但是不能通过send_keys()输入内容，这种情况下就可以借助javascript代码输入内容
代码如下：
<div class="cnblogs_code">
<pre>#定义输入的内容
input_text = "selenium"
#将输入的内容与js拼接
js = "document.querySelector('textarea').value='"+ input_text + "';"
print(js)
driver.execute_script(js)</pre>
</div>
</div>
</div>
<h2>实操：通过JavaScript实现页面滚动，JavaScript操作滚动条：</h2>
<div class="cnblogs_code">
<pre>from selenium import webdriver
from time import sleep

class casetest(object):
def __init__(self):
 self.driver = webdriver.Chrome()
 self.driver.get('http://wwww.baidu.com')

def test_execute1(self):
 self.driver.execute_script("alert('test')") # 同步执行
 sleep(2)
 self.driver.switch_to.alert.accept()

def test_execute2(self):
 js ='return document.title'
 title = self.driver.execute_script(js)# 取到百度的title
 print(title)

def test_execute3(self):
 js ='var q=document.getElementById("kw");q.style.border="2px solid red"'
 self.driver.execute_script(js)# 把百度搜索边框变为红色
 sleep(2)

def test_execute4(self):
 # 滚动条滚动
 self.driver.find_element_by_id('kw').send_keys('留白')
 self.driver.find_element_by_id('su').click()
 sleep(2)
 # 滚动到底部
 js = 'window.scrollTo(0,document.body.scrollHeight)'
 self.driver.execute_script(js)
 sleep(2)

if __name__ == '__main__':
case = casetest()
# case.test_execute1()
# case.test_execute2()
# case.test_execute3()
 case.test_execute4()

case.driver.quit()</pre>
</div>
  
来源：https://www.cnblogs.com/yunlong-study/p/16597987.html

頁: [1]

琼殿技术论坛's Archiver

Selenium执行javaScript