拍摄特定元素的屏幕截图(python chromedriver selenium)

Question

下面的代码中，一个名为"article"的特定元素的屏幕截图出现问题。页面加载，导航到第一篇文章并进行屏幕截图。截图正在拍摄中，但它不是我指定的元素"文章"的具体内容。我在下面提供了一些可测试的代码。

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium import webdriver

class bot:

def __init__(self):
self.driver = webdriver.Chrome("path here")

def change_zoom(self, new_zoom):
"""
:param new_zoom: zoom level as a percentage
"""
change_js = """
var selectBox = document.querySelector("settings-ui").shadowRoot.querySelector("#main").shadowRoot.querySelector("settings-basic-page").shadowRoot.querySelector("settings-appearance-page").shadowRoot.querySelector("#zoomLevel");

var changeEvent = new Event("change");

selectBox.value = arguments[0];
selectBox.dispatchEvent(changeEvent);
"""

self.driver.get("chrome://settings/")
new_zoom = round(new_zoom / 100, 2)
self.driver.execute_script(change_js, new_zoom)


def nextPostPhoto(self):
driver = self.driver
driver.get("https://www.instagram.com/zuck/")
element= WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//body//div[contains(@class,'_2z6nI')]//div//div//div[1]//div[1]//a[1]//div[1]//div[2]")))
driver.execute_script("arguments[0].click()", element)
article = driver.find_elements_by_xpath('//div[@role="dialog" or @id="react-root"]//article')[-1]
screenshot_as_bytes = article.screenshot_as_png
with open('article.png', 'wb') as f:
f.write(screenshot_as_bytes)

if __name__ == "__main__":
bot = bot()
bot.change_zoom(80)
bot.nextPostPhoto()

我目前拍摄的屏幕截图要么是帖子+评论块的一部分，要么包括不是帖子+评论框的网页部分。我只想拍一张"文章"的截图。

Answer 1

根本原因是您将缩放级别设置为80%，而硒没有意识到这一事实。如果你从有问题的页面(80%缩放(创建一个屏幕截图(手动(，那么你可以看到目标区域的大小约为747x481像素。如果检查元素对自身的看法(print(article.rect)(，则可以看到selenium没有意识到缩放的变化。

因此，屏幕截图偏移的原因是缩放级别。我不知道这是不是硒虫。如果您将缩放级别保持在100%，屏幕截图将正常创建。

或者你可以从屏幕上创建屏幕截图，计算偏移的尺寸，裁剪所需的区域并保存。这基本上就是

• whole_screen_as_png = driver.get_screenshot_as_png()(保存到文件或BytesIO(
• 然后通过枕头打开屏幕截图
• 则取元素的原始维度(article.rect(
• 计算缩放调整后的角点(这是棘手的部分(
• 裁剪所需区域(有多个选项(并保存最终结果