Python —— UI自动化之使用JavaScript进行元素点亮、修改、点击元素

1、JavaScript点亮元素

在控制台通过JavaScript语言中对元素点亮效果如下:

将这个语句和UI自动化结合,代码如下:

python 复制代码
locator = (By.ID,"kw")   # 是元组类型
web_element = WebDriverWait(driver,5,0.5).until(EC.visibility_of_element_located(locator))
driver.execute_script("arguments[0].style.backgroundColor='yellow'",web_element)

进阶代码:

python 复制代码
# 写一个函数
def wait_element_visibility(locator):
    web_element = WebDriverWait(driver,5,0.5).until(EC.visibility_of_element_located(locator))
    driver.execute_script("arguments[0].style.backgroundColor='yellow'",web_element)
    return web_element


'''知识一:对元素进行高亮展示'''
driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")
driver.maximize_window()
# 调用函数
element1 = wait_element_visibility((By.ID,"kw"))

2、JavaScript修改元素

1、JavaScript设置和移除元素概述

修改元素主要体现在设置和移除元素中,如下:

设置属性:setAttribute
移除属性:removeAttribute
使用 JavaScript设置元素举例说明:

使用JavaScript移除元素举例说明:


更多可以参考: setattribute方法详解_笔记大全_设计学院

2、Python中执行设置元素
python 复制代码
def wait_element_visibility(locator):
    web_element = WebDriverWait(driver,5,0.5).until(EC.visibility_of_element_located(locator))
    driver.execute_script("arguments[0].style.backgroundColor='yellow'",web_element)
    return web_element



'''知识一:对元素进行高亮展示'''
driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")
driver.maximize_window()
element1 = wait_element_visibility((By.ID,"kw"))

'''知识二:对元素进行移除'''
# driver.execute_script('arguments[0].removeAttribute("maxlength")',element1)
# sleep(2)
'''知识三:对元素进行设置,成功了'''
driver.execute_script("argument[0].setAttribute('maxlength','600')",element1)
3、Python中执行移除元素

使用场景:通过JavaScript去掉元素的属性 readonly(只读属性),因为去掉它之后,才可以修改输入框的值

python 复制代码
driver.get("http://www.lvmama.com/")
driver.maximize_window()
wait_element_clickable((By.XPATH,"//li[contains(text(),'度假酒店')]")).click()
element = wait_element_visibility((By.XPATH,'//div[contains(@class,"nova-ui-date-range-start")]/input'))
# 执行Javascript脚本,移除只读元素
driver.execute_script("arguments[0].removeAttribute('readonly')",element)

# 使用键盘操作清理数据
sleep(2)
element.send_keys(Keys.CONTROL,"a")   # 键盘操作-全选
element.send_keys(Keys.BACK_SPACE)    # 键盘操作-清空 
element.send_keys("2023-11-11")       # 写入元素

3、JavaScript点击元素

1、概述

使用场景:使用selenium的click()方法去点击一些按钮时,会出现:Element is not clickable at point, Other element would receive the click 提示,为了解决这个问题,可以使用JavaScript的点击解决,语法如下:

python 复制代码
element = driver.find_element(By.XPATH,'//button[contains(@class,"el-button--
primary")]')
driver.execute_script('arguments[0].click()',element)
2、Python实现点击元素
python 复制代码
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('https://www.XXXXXXXXXXX.com/#/login')
wait_element_visibility((By.XPATH,'//input[@placeholder="请输入邮箱/手机号/账号"]')).send_keys('13323234545')
wait_element_visibility((By.XPATH,'//input[@placeholder="请输入密码"]')).send_keys('13323234545')
# 执行以下的语句,会提示:selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button data-v-b32d22ba="" type="button" class="el-button el-button--primary el-button--medium" style="width: 100%; background-color: yellow;">...</button> is not clickable at point (991, 385). Other element would receive the click: <div data-v-b32d22ba="" class="login-tab">...</div>
#   (Session info: chrome=118.0.5993.71)
#元素点击中断异常,目标元素点击事件被上层元素消费掉,所以目标元素不能点击了
# wait_element_clickable((By.CLASS_NAME,'el-button--primary')).click()

# 使用JavaScript的点击方法进行解决
element= wait_element_clickable((By.CLASS_NAME,'el-button--primary'))
driver.execute_script("arguments[0].click()",element)  # 成功

JavaScript总结

1、页面的滚动/内嵌滚动条滚动

document.documentElement.scrollTop = 200

先要去找到内嵌滚动条元素,再去进行滚动

2、修改元素的属性(删掉/改变元素的属性)

removeAttribute()

setAttribute()

点击操作总结(3种方式)

1、click()

2、鼠标 ActionChains(driver).click(目标元素).perform()

3、通过JavaScript来进行点击

相关推荐
Myli_ing22 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风24 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave31 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟33 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
努力的悟空1 小时前
国土变更调查拓扑错误自动化修复工具的研究
运维·自动化
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚3 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单