如何找到并单击 HTML 图像元素答案

【问题标题】：How to find and click on HTML image element如何找到并单击 HTML 图像元素
【发布时间】：2018-01-01 09:54:01
【问题描述】：

我是 Selenium 的新手，并且在这方面挣扎了几个小时。我有一个包含图标和流视图（两个图像）的 HTML 页面，浏览器视图处于 100%，我想修改它并使其更小，可以通过更改浏览器缩放、修改 CSS 属性或单击图像来完成。

我的代码从打开的浏览器开始并等待所有元素加载：

driver = webdriver.Firefox()
driver.get('http://' + user +':'+password+'@'+camera_address)
driver.maximize_window()
driver.implicitly_wait(15) # seconds

我尝试通过缩放来做到这一点：

driver.execute_script("document.body.style.zoom='0.4'")

没用。尝试通过 Selenium 来实现——查找元素并更改 CSS：

myDynamicElement = driver.find_elements_by_id("stream")

或者找到图片并点击：

driver.find_element_by_xpath('//img[@src="../pics/button_downsize_27x27px.gif"]').click()

或

driver.find_elements_by_xpath('//*[@img]').click()

或

driver.find_elements_by_tag_name('img').click()

HTML 页面如下所示：

<a href="JavaScript:zoom(8)" target="_self"><img src="/pics/button_downsize_27x27px.gif" width="27" height="27" border="0" title="Scale down to 800 px width" alt="Scale down to 800 px width"></a>

<td colspan="3" align="center"><img id="stream" src="/mjpg/video.mjpg" width="2560" height="1920" border="0" alt="If no image is displayed, there might be too many viewers, or the browser configuration may have to be changed. See help for detailed instructions on how to do this."><br></td>

尝试使用@title 和@alt，甚至包含但没有任何效果。

我做错了什么？！？！如何找到并点击这张图片（/pics/button_downsize_27x27px.gif）？

【问题讨论】：

请粘贴您网站的 html DOM。
太长了，你到底想看什么？
请检查答案并在python中使用它并让我知道您的反馈
为什么要modify it and make it smaller？有什么特别的用例吗？
请更新您的问题以提供您尝试过的 xpath 或 css 选择器，以便我们检查它们是否正确。（您可以简单地在 DevTool 中尝试它们，无需反复执行脚本）

标签： python python-3.x selenium selenium-webdriver

【解决方案1】：

点击您想要的图片 -- 请使用此处提到的参考代码。

new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfAllElementsLocatedBy((By.cssSelector("a"))));

List<WebElement> elem = driver.findElements(By.tagName("a"));

    for(WebElement el : elem){
        String element = el.getAttribute("src");
        if(element.contains("/pics/button_downsize_27x27px.gif")){
            el.click();
            break;
        }
    }

它是用Java编写的，你可以用Python实现它。

【讨论】：

谢谢，试过了，什么也没发生 elem = driver.find_elements_by_tag_name('a') for e in elem: element = e.getAttribute("src"); if(element.contains("/pics/button_downsize_27x27px.gif")): 打印元素 e.click() 中断
元素在屏幕上可见？
当然，但是，我尝试打印列表并且它是空的，尽管它毫无例外地通过了
我认为你的元素不在屏幕 viwe 模式下。首先将元素返回到屏幕中心点
查看要居中的元素使用代码。 String scrollElementIntoMiddle = "var viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);" + "var elementTop = arguments[0].getBoundingClientRect().top;" + "window.scrollBy(0, elementTop-(viewPortHeight/2));"; ((JavascriptExecutor) 驱动程序).executeScript(scrollElementIntoMiddle, ele); //((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", ele);尝试 { Thread.sleep(500); } 捕捉 (InterruptedException e) { }

【解决方案2】：

谢谢大家，最后，我做了一些解决方法，因为我看到在 chrome 中存在一个小错误，并且通过 Firefox，我找不到该元素。所以我在加载所有元素后再次检索 URL 并修改它，以便触发 JavaScript 函数：

myElem = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.NAME, 'indexMain')))
driver.get(driver.current_url+'&size=8')

感谢大家的尝试，这是一个挑战，因为元素没有 id/name/class/css 并且浏览器找不到 XPath。

【讨论】：