当前位置： 首页 > news >正文

Seleuinm之javascript语句执行

news 来源：原创 2025/5/25 8:50:47

今天来学习以下selenium怎么执行Js脚本的

在平时使用selenium的时候，有些操作我们需要借助js代码，才可以更加方便快捷；下面就让我们看一看怎么执行js代码

当然了，首先就是写一段js代码；这里就需要你有js相关的知识了；当然，没有也可以；现在AI这么方便，你可以让AI帮你写一段你想要用的js代码

selenium执行js代码，主要有两种方式

  • 同步执行execute_script()
  • 异步执行execute_async_script()

那么这两种方式有什么不一样的吗，它们的关键区别就是如何处理脚本的执行和完成；

同步执行execute_script()
  • 执行方式：这意味着 Selenium 会等待你提供的 JavaScript 代码完全执行完毕并返回结果（如果有）后，才会继续执行 Python 脚本中的下一行代码。
  • 使用场景：适用于执行不需要等待异步操作完成的 JavaScript 代码
    • 获取页面属性（如 document.title, element.textContent）
    • 简单地修改DOM元素属性
    • 触发元素的同步方法（如 element.click()）
    • 执行简单的计算逻辑
  • 返回值：可以返回JS代码执行的结果；结果会被转为Python相应类型；（字符串、数字、DOM对象转为web Element）；如果没有明确return语句，或者返回underfined；则会返回给Python给None
  • 回调：不需要显式通知selenium，js代码已经完成
异步执行execute_async_script()
  • 执行方式：当你的 JavaScript 代码包含需要一段时间才能完成的操作（例如使用 setTimeout、setInterval、Promise、XMLHttpRequest 等），你需要使用这个方法。Selenium 不会无限期地等待异步操作完成。你需要显式地在你的 JavaScript 代码中调用一个由 Selenium 注入的回调函数来通知 Selenium 脚本已经执行完毕。
  • 使用场景：适用于需要等待异步操作完成的 JavaScript 代码
    • 等待AJAX请求完成
    • 设置定时器后执行某些操作
    • 处理动画、过渡效果完成后的状态
    • 与使用Promise的代码进行交互
  • 返回值：execute_async_script() 也可以返回 JavaScript 代码通过回调函数传递的结果。需要将结果作为参数传递给 Selenium 注入的回调函数（通常通过 arguments[arguments.length - 1](result) 的方式调用）。如果在超时时间内没有调用回调函数，Selenium 会抛出一个 TimeoutException
  • 回调：必须在 JavaScript 代码中通过 arguments[arguments.length - 1]() 或 arguments[arguments.length - 1](result) 的方式显式调用回调函数，以通知 Selenium 异步操作已完成并可以继续执行 Python 代码。

那么什么时候使用同步、什么时候使用异步呢？

答案很简单，当你的代码是立即完成的，没有延迟、异步操作；就是同步

当代码需要一段时间才可以完成操作，并且selenium需要这些操作完成后再继续执行，那么就是异步

既然知道了怎么执行js代码；那么就让我们来几个例子实战演示一下把

首先准备工作先做好

class execute_script_js:
    def __init__(self, sevre_path):
        self.sevre_path = sevre_path
        self.service = Service(self.sevre_path)
        self.browser = webdriver.Chrome(service=self.service)
        
if __name__ == '__main__':
    serve_path = r'D:\Code_Study\driver\chromedriver-win64\chromedriver.exe'
    script_js = execute_script_js(serve_path)

同步执行execute_script()

获取页面标题
    # 获取title标题
    def execute_script_title(self, js_code):
        self.browser.get(r"https://www.baidu.com/")
        title = self.browser.execute_script(js_code)
        print(f"页面标题是{title}")
        
js_code = "return document.title;"
script_js.execute_script_title(js_code)
滚动到页面底部
    # 滚动到页面底部
    def execute_script_scroll(self, js_code):
        self.browser.get(           "https://www.selenium.dev/selenium/web/scrolling_tests/frame_with_nested_scrolling_frame_out_of_view.html")
        time.sleep(5)
        self.browser.execute_script(js_code)
	
js_code = "window.scrollTo(0, document.body.scrollHeight);"
script_js.execute_script_scroll(js_code)
点击页面上的一个按钮
# 点击页面上按钮
    def execute_script_button(self, js_code):
        self.browser.get(r"https://www.baidu.com/")
        self.browser.execute_script(js_code)


button_text = "更多"
js_code = f"""
    const elements = document.querySelectorAll("a");
    for (let i = 0; i < elements.length; i++) {{
        if (elements[i].textContent.trim() === '{button_text}'){{
        	elements[i].click();
                break;
                }}
            }}
    """
script_js.execute_script_button(js_code)
修改页面元素属性
    # # 修改页面元素的属性
    def execute_script_attribute(self, js_code):
        self.browser.get(r"https://www.baidu.com/")
        self.browser.execute_script(js_code)

    # 检查元素属性是否修改
    def check_attribute(self):
        element = self.browser.find_element(By.ID, element_id)
        attribute_value = element.get_attribute(new_attribute)
        print(f"搜索输入框的新属性 '{new_attribute}' 的值是: {attribute_value}")
        
        
        
        
# 获取 id 为 kw 的元素（百度搜索输入框），并将其 placeholder 属性修改为 "Selenium Test Input"。
element_id = "kw"
new_attribute = "placeholder"
new_value = "Selenium Test Input"
js_code = f"""
    const element = document.getElementById('{element_id}');
    if (element){{
        element.setAttribute("{new_attribute}","{new_value}");
    }}
    """
script_js.execute_script_attribute(js_code)
script_js.check_attribute()
页面上添加一个用于测试的div元素
   # 再页面上添加一个用于测试的div元素
    def execute_script_add_div(self, js_code_div, js_code):
        self.browser.get(r"https://www.baidu.com/")
        # 同步执行
        self.browser.execute_script(js_code_div)
        # 异步执行
        self.browser.execute_async_script(js_code)

    # 检查div元素是否被添加上
    def check_add_div(self):
        try:
            element = self.browser.find_element(By.ID, element_id)
            print(f"元素的文本内容是: {element.text}")
        except Exception as e:
            print(f"找不到元素或者发生错误：{e}")
            
            
            

# 再页面上添加一个用于测试的div元素
js_code_div = f"""
    const div = document.createElement('div');
    div.id = "asyncDivBaidu";
    div.textContent = "这个是添加的div_Initial Text";
    div.style.border = '1px solid red';
    div.style.padding = '10px';
    document.body.appendChild(div);
  """
element_id = "asyncDivBaidu"
new_text = "Text changed after 2 seconds"
# 使用 setTimeout 延迟后修改页面元素文本
js_code = f"""
    const element = document.getElementById('{element_id}');
    const callback = arguments[arguments.length-1];
    setTimeout(() =>{{
        if (element){{
            element.textContent = '{new_text}';
            }}
            callback();// 必须调用 callback() 来通知 Selenium 脚本完成
    }},2000);
"""
script_js.execute_script_add_div(js_code_div, js_code)
time.sleep(5)
script_js.check_add_div()

异步执行execute_async_script()

准备工作，声明一个类，初始化的时候；生成webdriver对象

class execute_async_script_js:
    def __init__(self, sevre_path):
        self.sevre_path = sevre_path
        self.service = Service(self.sevre_path)
        self.browser = webdriver.Chrome(service=self.service)

    def close(self):
        time.sleep(5)
        self.browser.quit()
        
if __name__ == '__main__':
    serve_path = r'D:\Code_Study\driver\chromedriver-win64\chromedriver.exe'
    async_script_js = execute_async_script_js(serve_path)
延迟修改搜索框的placeholder属性
    # 延迟修改搜索框的placeholder属性
    def execute_async_script_modification(self, js_code):
        self.browser.get("https://www.baidu.com/")
        self.browser.execute_async_script(js_code)
        # 再js延迟期间，python脚本会等待；默认是30s
        print(f"等待 {delay_seconds} 秒后 placeholder 应该会改变...")
        time.sleep(delay_seconds + 1)  # 稍微等待长一点以确保变化发生
    # 检查是否修改
    def check_modification(self):
        element = self.browser.find_element(By.ID, element_id)
        attribute_value = element.get_attribute("placeholder")
        print(f"搜索输入框的palceholder属性为：{attribute_value}")

element_id = "kw"
new_placeholder  = "Delayed Input"
delay_seconds = 3
js_code = f"""
        const element = document.getElementById('{element_id}');
        const callback = arguments[arguments.length - 1];
        setTimeout(()=>{{
            if (element){{
                element.setAttribute('placeholder', '{new_placeholder}');
            }}
            callback();//通知selenium脚本完成
        }},{delay_seconds * 1000});
"""

async_script_js.execute_async_script_modification(js_code)
async_script_js.check_modification()
async_script_js.close()
延迟后在页面上添加一个新的元素
new_element_id = "delayedElement"
delay_seconds = 2
js_code = f"""
const newDiv = document.createElement('div');
newDiv.id = '{new_element_id}';
newDiv.textContent = 'This element was added after {delay_seconds} seconds.';
const body = document.body;
const callback = arguments[arguments.length - 1];
setTimeout(()=>{{
    body.appendChild(newDiv);
    callback();
}},{delay_seconds * 1000});
    
"""
async_script_js.execute_async_script_add_div(js_code)
async_script_js.check_add_div()

    # 延迟后在页面上添加一个新的元素
    def execute_async_script_add_div(self, js_code):
        self.browser.get(r"https://www.baidu.com/")
        self.browser.execute_async_script(js_code)
        print(f"等待 {delay_seconds} 秒后应该会看到一个新的 div 元素...")
        time.sleep(delay_seconds + 1)

    # 检查元素是否添加成功
    def check_add_div(self):
        try:
            delayed_element = self.browser.find_element(By.ID, new_element_id)
            print(f"找到新添加的元素，文本内容是: {delayed_element.text}")
        except Exception as e:
            print(f"没有找到新添加的元素: {e}")
模拟请求
    # 模拟请求
    delay_seconds = 4
    mock_data = {"Message": "Data loaded successfully after delay"}
    js_code = f"""
    const callback = arguments[arguments.length - 1];
    setTimeout(()=>{{
        const result = JSON.stringify('{json.dumps(mock_data)}');
        callback(result);// 将结果传递给 callback
    }},{delay_seconds * 1000});
"""
    res = async_script_js.imitate_req(js_code)
    async_script_js.check_req(result_from_js=res)

    # 模拟请求
    def imitate_req(self, js_code):
        self.browser.get(r"https://www.baidu.com/")
        # 执行异步js并取得返回值
        result_from_js = self.browser.execute_async_script(js_code)
        print(f"等待{delay_seconds}s后获取js返回的数据。。。")
        time.sleep(delay_seconds + 1)
        return result_from_js

    def check_req(self,result_from_js):
        if result_from_js:
            data = json.loads(result_from_js.replace("'{","{").replace("}'","}"))
            print(f"JS返回的数据是{data}")
        else:
            print("JS没有返回数据")

可以看到，不管是同步、还是异步；最重要的是js代码的编写；如果你熟悉js代码；那么你将会事半功倍；

相关文章：

  • React Hooks: useRef，useCallback，useMemo用法详解
  • Python中内置的数据结构类型详析（内置数据容器）
  • 【Java集合】HashSet源码深度分析
  • [python]从whl文件名认识支持python版本和操作系统
  • 第二十二： go与k8s、docker相关编写dockerfile
  • 策略模式实现 Bean 注入时怎么知道具体注入的是哪个 Bean？
  • Java中的static都能用来修饰什么？
  • 【强化学习-蘑菇书-2】通过具体的例子来学习如何与 Gym 库进行交互——小车上山（MountainCar-v0）
  • idea开发工具多账号使用拉取代码报错问题
  • 探秘 HTML5 Geolocation：精准定位用户位置，拓展网页交互边界
  • Redis-数据类型
  • AF3 ProteinDataset类的get_anchor_ind方法解读
  • 基于生成对抗网络（GAN）的手写数字生成实践
  • 了解SpringAOP
  • 【React】React-toolkit
  • java设计模式-组合模式
  • 路由交换网络专题 | 第二章 | RIP | OSPF | 路由聚合 | 路由过滤 | 静默接口
  • Linux上位机开发实践（底板设计）
  • matlab与dsp28335联调
  • MySQL索引介绍
  • 做公司网站的企业/百度推广深圳分公司
  • 廉洁 网站建设/网站搜索排名查询
  • 内网怎么做网站服务器/实时热搜榜榜单
  • 买了域名和空间怎么做网站/太原搜索引擎优化
  • 市住房城乡建设管理委门户网站/西安搜建站科技网站
  • 怎样做淘宝客导购网站/如何在百度上添加店铺的位置