web自动化-JavaScript操作

乐瓜乐虫

已于 2024-05-25 09:27:09 修改

阅读量741

点赞数 18

分类专栏： ui自动化 python 文章标签： javascript 自动化

于 2024-05-24 20:49:11 首次发布

本文链接：https://blog.csdn.net/qq_35283902/article/details/139182888

版权

python 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

ui自动化

6 篇文章 0 订阅

订阅专栏

做UI自动化的时候，有些操作无法直接通过selenium自带方法操作成功，那么就需要借助前端js操作实现。

比如浏览器的滚动条这种不是html页面的内容，无法直接通过selenium 控制到。需要借助JavaScript控制。
比如有些点击操作无法通过普通点击+鼠标点击成功，也需要通过js控制完成。
比如有些元素的属性是不可以输入内容的，但是可以通过js修改元素的属性，从而实现对他的一些操作。

所以通过在Selenium WebDriver中执行JavaScript可以大大增强Selenium 的能力，Selenium对于一些特殊场景的元素操作无能为力，我们可以借助 JavaScript来处理。

优先使用selenium操作实现如果不行借助js操作。

web页面的三大组成部分：

html 代表页面内容
css 代表样式布局
javascript DOM 对于html的内容可以行增删改查，控制页面内容显示/数据展示/动画效果的
- 比如页面登录按钮点击可以登录成功，这个也是js代码前端控制的。
- 在所有的浏览器里都内置了js的解释器，用来运行和编写和调试 js代码。

JavaScript语法和使用：

js语言学习为网站：https://www.runoob.com/js/js-functions.html，可以了解一下，但是我们用的都是比较简单的一些语法。

document指的页面文档内容；document.后面提供了很多方法，可以操作页面内容：

document.getElementById("kw") ：元素定位
document.documentElement.scrollTop=100 : 控制滚动条滚动页面

在Python代码中调用JavaScript 【js滚动条操作】

使用方式1-不传参：driver.execute_script("...") ，直接在UI脚本里执行js代码

driver.execute_script("document.documentElement.scrollTop=3005")
问题： js定位元素的方式有限，不如python代码灵活 - 不支持xpath；所以直接执行的当时用的比较少

使用方式2-传参：driver.execute_script("arguments[0]...",element) ==用的更多重点掌握

element是通过Selenium元素定位找到对应的元素：
- element = driver.find_element(By.ID,"XX")
- 可以通过八大元素定位方法定位到元素更加灵活
arguments[0]代表就是传递进来js脚本的第一个参数，也就是element这个值
- driver.execute_script("arguments[0]...",element)

js脚本里可以传多个参数，arguments[1]代表的就是传递进来的第二个参数，依次类推

driver.execute_script('arguments[0][arguments[1]].click()', elements, 1)

"""
点击操作：
1、普通点击
2、鼠标点击
3、js点击
"""
from selenium import  webdriver
from time import sleep
from selenium.webdriver.common.action_chains import ActionChains

from selenium.webdriver.common.by import By

driver = webdriver.Chrome()

# 点击元素--课堂派
driver.get("https://www.ketangpai.com/#/login")
driver.find_element(By.XPATH,'//input[@placeholder="请输入邮箱/手机号/账号"]').send_keys("2378807189@qq.com")
driver.find_element(By.XPATH,'//input[@placeholder="请输入密码"]').send_keys("12345678")
# 登录按钮元素
ele_login = driver.find_element(By.XPATH,'//span[text()="登录"]')

# 1、普通点击操作 --不成功 报错
# ele_login.click()
# 2、鼠标点击 : 虽然没有报错 但是没有点击
# ActionChains(driver).click(ele_login).perform()
# 3、js点击 --js传参方式  成功点击了
# driver.execute_script("arguments[0].click()",ele_login)

# 演示一下js里传多个参数写法
driver.execute_script("arguments[0].click();alert(arguments[1])",ele_login,"登录失败")

sleep(5)
driver.quit()

js点击操作

点击元素：有些网站就是无法直接点击和鼠标点击，但是可以通过js点击成功。【比如课堂派登录按钮】

直接点击元素+鼠标点击都不成功通过js
点击元素的代码：arguments[0].click()

总结一下点击的方法：

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

3、通过JavaScript来进行点击

"""
使用方式1-不传参：driver.execute_script("...") ，直接在UI脚本里执行js代码
* driver.execute_script("document.documentElement.scrollTop=3005")
* 问题： js定位元素的方式有限，不如python代码灵活 - 不支持xpath；所以直接执行的当时用的比较少
"""
from selenium import  webdriver
from time import sleep

driver = webdriver.Chrome()

# 场景一： 滚动条
driver.get("http://testingpai.com/")

sleep(2)
# 在Python代码里执行js脚本操作
driver.execute_script("document.documentElement.scrollTop=1000")

sleep(2)
driver.quit()

# # 场景二：点击元素
# driver.get("https://www.baidu.com/")
#
# sleep(2)
# # 执行js点击操作
# driver.execute_script('document.getElementById("su").click()')
#
# sleep(2)
# driver.quit()

js修改属性并操作 -- 用的不多，了解

有些页面的数据是默认不让输入的，比如【电商项目的收货地址】的日期输入框不能直接输入的，那么自动化测试的时候需要输入，就需要借助js代码进行操作。

js代码检查页面的只读属性：

js删除某个属性：

arguments[0].removeAttribute('readonly')

删除记得强制等待一下

# 1、修改元素的属性/移除元素的属性 - 了解
# document.getElementByXXX(XXX).setAttribute("name","lemon")
# document.getElementByXXX(XXX).RemoveAttribute("name")

"""
# 1、修改元素的属性/移除元素的属性 - 了解
# document.getElementByXXX(XXX).setAttribute("name","lemon")
# document.getElementByXXX(XXX).RemoveAttribute("name")
"""
from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait

# 封装的意思：把相同类似的代码放到一个函数里面,重复使用
def wait_element_clickable(locator):
    web_element = WebDriverWait(driver,8,0.5).until(EC.element_to_be_clickable(locator))
    return web_element

def wait_element_visible(locator):
    #web_element代表通过显示等待找到的元素
    web_element =  WebDriverWait(driver, 8, 0.5).until(EC.visibility_of_element_located(locator))
    return web_element

def wait_element_presence(locator):
    #web_element代表通过显示等待找到的元素
    web_element =  WebDriverWait(driver, 8, 0.5).until(EC.presence_of_element_located(locator))
    return web_element

driver = webdriver.Chrome()
driver.get('http://mall.lemonban.com:3344/')
driver.maximize_window()
wait_element_clickable((By.LINK_TEXT,'登录')).click()
wait_element_visible((By.XPATH,'//input[@placeholder="请输入手机号/用户名"]')).send_keys('lemon_py')
wait_element_visible((By.XPATH,'//input[@placeholder="请输入密码"]')).send_keys('12345678')
wait_element_clickable((By.CLASS_NAME,'login-button')).click()
sleep(2)  # 一定要等待2s
wait_element_clickable((By.XPATH,'//span[text()="个人中心"]')).click()
wait_element_clickable((By.LINK_TEXT,'收货地址')).click()
wait_element_clickable((By.LINK_TEXT,'新增收货地址')).click()
sleep(2)

# js修改属性操作
ele = driver.find_element(By.XPATH,'//div[@prop="province"]//input')
# 删除readonly属性
# driver.execute_script("arguments[0].removeAttribute('readonly')",ele)
driver.execute_script("arguments[0].setAttribute('placeholder','123')",ele)
sleep(1)
# ele.send_keys("黄花机场")

sleep(4)
# driver.quit()