selenium中通过js更改界面属性并传值

前言

在web自动化测试时，有一些界面的选择框，并不好去定位，或者限制比较多。在这种场景下，可以通过js操作，更改界面属性等，达到输入的目的。

demo

比如12306界面，选择城市，要定位输入框中的城市，直接使用元素定位可能还比较困难：

首先观察界面上的html代码，当我们选择上海城市时，输入框上面的input元素的value值会发生变化：

那么我们就可以直接通过js更改这两个元素的value值，来达到输入城市的目的：

from selenium import webdriver

chr_driver = webdriver.Chrome()
chr_driver.get('https://www.12306.cn/index/')
# 构造js语句
js_pha = """
a = document.getElementById("fromStationText")
a.value = "上海"
b = document.getElementById("fromStation")
b.value = "SHH"
"""
# 执行js语句
chr_driver.execute_script(js_pha)

还有一些场景，比如日期框，也是定位比较难，而且可能有一些元素也无法选择，日期框的属性也被设置为readOnly。也可以通过上面的方式进行传值：

from selenium import webdriver

chr_driver = webdriver.Chrome()
chr_driver.get('url')

# 构造js语句，将readOnly属性更改为false，再给日期输入框赋值
js_pha = """
var a = document.getElementById("xxx");
a.readOnly = false;
a.Value = "2021-10-09"
"""
# 执行js语句
chr_driver.execute_script(js_pha)