seleniumからhtml2canvasを実行してwebページの特定タグ領域を画像化する

seleniumを使って部分的な領域をスクショする方法を（無理やり）つくりました。

selenium.webdriver.chrome.webdriver.WebDriverにもsave_screenshot()というメソッドがありますが欲しい位置が取得できないという問題がありました。
全画面をスクショする方法も検索で出てきましたが、不必要な領域が多く含まれてしまいます。
そこで「html2canvasという特定タグ領域をcanvas型に変換するjavacriptのライブラリをselenium上で実行」するという方法をとった。

# coding:utf-8
from time import sleep
from selenium import webdriver

# ページを開く
url = 'https://suumo.jp/chintai/jnc_000066460566/?bc=100240153276'
browser = webdriver.Chrome('./chromedriver')
browser.get(url)

# javascript 実行
with open('html2canvas.js', 'r') as h2c, open('jquery-3.6.0.min.js', 'r') as jq, open('sample.js', 'r') as f:
    browser.execute_script(h2c.read())
    browser.execute_script(jq.read())
    browser.execute_script(f.read())

sleep(10)
browser.close()

sample.js

targetElement = $('div.section.l-space_small').eq(1);

html2canvas(targetElement[0]).then(canvas => {
    let downloadElement = document.createElement('a');
    downloadElement.href = canvas.toDataURL();
    downloadElement.download = 'full.png';
    downloadElement.click();
});

これでsuumoの「物件概要」が画像形式で取得できます。

結果