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

口碑最好的旅游网站建站开发

wzjs 2025/7/23 20:00:06

口碑最好的旅游网站,建站开发,电子商务网站建设成果ppy,淘客手机网站模板今天来学习以下selenium怎么执行Js脚本的在平时使用selenium的时候，有些操作我们需要借助js代码，才可以更加方便快捷；下面就让我们看一看怎么执行js代码当然了，首先就是写一段js代码；这里就需要你有js相关的知识了…

今天来学习以下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_pathself.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_pathself.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脚本会等待；默认是30sprint(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 = 4mock_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_jsdef 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没有返回数据")