点击选择图片自动化实现

需求：为商品上传图片并提交保存。

上传图片里面遇到了两个坑，

一个是定位元素时遇到随机id，xpath和css_selector无法定位的问题，

另一个是真正的上传控件定位的问题。

1、定位点击选择图片按钮

当我们定位“点击选择图片”按钮时，我们看到这是一个label标签，

这个label标签，它的父元素有一个id属性。id="rt_rt_1huuu0k271g6gq0t1139fl1kg78"

这种id后面有一大长串的，是随机生成的，是一个动态的id,这个时候我们怎么样去定位这个标签呢。

这个时候，我们复制它父标签的xpath路径，可以看出xpath也是跟id有关，也是不能用的。

//*[@id="rt_rt_1huuu0k271g6gq0t1139fl1kg78"]

接下来去找它父标签的css_selector路径，也是跟id有关的，也是不能用的

#rt_rt_1huuu0k271g6gq0t1139fl1kg78

这个时候我们怎么定位这个标签呢？

我们接着往上看，这时我们发现，在祖先元素#filePicker下面只有它这一个label标签。

这个时候我们用css_selector可以找到这个祖元素，再定位到孙元素的方法定位。

driver.find_element_by_css_selector("#filePicker label").click()

css_selector右键copy的方法，

右键检查元素，选择copy,再选择copy selector。

手动自己书写的方法

1、标签名可以直接在css_selector中使用。

2、在css中，需要在class属性前面加一个小数点

3、在css中，需要在id属性前面加一个 #号

4、大于号>表示父子关系

5、空格表示祖先元素和子孙元素的关系

这时，我们看代码“#filePicker label”，表示找到祖元素filePicker下面的子孙元素label，此时点击即可，弹窗选择图片页面。

但是这个弹窗是window的弹窗，网页无法操作，所以这样不行，接着我们想另外的一种办法上传图片。

2、用控件上传图片

真正负责上传文件的控件是<input type="file"...>，找到这个控件，然后对他进行send_keys即可。

本来“点击选择图片”是不可以点击的，但是开发写了一个javascript代码，点击这个label，相当于点击上传文件的控件。

input type=“file”   类型是文件，这个表示文件上传的控件

input type="text"   表示文本输入框

input type=“password”   表示密码输入框

input type=“button”     表示是按钮

input type=“submit”     表示提交按钮

本来Label标签不可点击。但是我们点击选择图片时，实际是点击的这个input类型文件上传的控件

因为这个控件的属性是不可见的，class=”webuploader-element-invisible”   这时我们把class里面的内容删掉，就可以看到这个控件了。在按钮的上方多了一个控件，叫“选择文件”。

这时直接点击“选择文件”，也能直接打开选择文件的窗口，

因为这个控件的样式和我们整个页面的风格不太一致。我们自己创建一个按钮，可以调整使它的风格符合页面的风格。所以开发喜欢用label代替真正上传的这个控件，并把它置为不可见。

找到这个真正控制上传的控件，我们就可以定位这个元素，并且上传图片了。

上传时，照片网址的反斜线要改成两个反斜线。

driver.find_element_by_name("file").send_keys("D:\\niupeng1.png")

#   点击添加商品图册
driver.find_element_by_link_text("商品图册").click()
driver.find_element_by_name("file").send_keys("D:\\niupeng1.png")
# 点击开始上传按钮
driver.find_element_by_css_selector(".uploadBtn.state-finish.state-ready").click()
# 处理弹出框
WebDriverWait(driver,30,0.5).until(expected_conditions.alert_is_present())
driver.switch_to.alert.accept()
#  点击提交按钮
driver.find_element_by_class_name("button_search").click()

此时上传完，并点击提交，图片上传成功了。