JavaScript操作

做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 ActionChainsfrom selenium.webdriver.common.by import Bydriver = webdriver.Chrome()# 点击元素--课堂派
    driver.get("https://www.ketangpai.com/#/login")
    driver.find_element(By.XPATH,'//input[@placeholder="请输入邮箱/手机号/账号"]').send_keys("[e-mail]")
    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 sleepdriver = 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_elementdef wait_element_visible(locator):#web_element代表通过显示等待找到的元素web_element =  WebDriverWait(driver, 8, 0.5).until(EC.visibility_of_element_located(locator))return web_elementdef wait_element_presence(locator):#web_element代表通过显示等待找到的元素web_element =  WebDriverWait(driver, 8, 0.5).until(EC.presence_of_element_located(locator))return web_elementdriver = 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()

JavaScript总结使用

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

• document.documentElement.scrollTop = 200
• 先要去找到内嵌滚动条元素，再去进行滚动【scrollTop】

2、点击：click()

3、修改元素的属性（删掉/改变元素的属性）

• removeAttribute()
• setAttribute()