Seleniumでpictureタグの現在の画像を取得する方法

はじめに

HTMLのpictureタグでは、レスポンシブ対応のために画面幅に応じた画像を設定できます。

しかし、単純にSeleniumでpictureタグ直下のsourceタグのsrcset属性の値を取得しても、レスポンシブ対応のために複数の画像URLが取得されてしまいます。

今回は、pictureタグで画面幅に応じて入れ替えられる画像の現在の画像URLを取得する方法を説明します。

環境

Python 3.9.13
selenium==4.10.0

pictureタグとは？

HTMLでレスポンシブに画像を切り替えることができるタグです。
JavaScriptを使用せず、HTMLだけでレスポンシブ対応できる点が特徴ですね。

詳しい解説は以下の記事がわかりやすいです。

簡単に説明しておくと、以下のようにpictureタグ以下にsourceタグを複数書いて、sourceタグを順次評価して現在の画面幅に合う画像のURL（sourceタグのsrcset属性の値）をimgタグのsrc属性の値に置換します。

picture.html

<picture>
  <!-- sourceに画像のパスを記述-->
  <source srcset="sample.png" media="(min-width: 1024px)" type="image/png"> 
  <source srcset="sample2.png" media="(min-width: 768px)" type="image/png"> 
  <!-- imgに画像のパスを記述 -->
  <img src="sample3.png">
</picture>

この例の場合、

• 1024px以上のときはsample.png
• 768px〜1024pxのときはsample2.png
• それ以外の時はsample3.png

を表示します。

現在表示されている画像を取得したい

これまでの説明のように、pictureタグを使用するとimgタグのsrcとは別の画像が表示されることがあります。

そのため、単純にimgタグの値を取得してもダメです。

一方で、sourceタグも複数あるので、sourceタグで検索するのもうまくいきません。

こんなときは、以下のようにcurrentSrc属性を利用します。
※変数chrome_driverはselenium.webdriver.Chromeオブジェクトです

sample.py

selector = 'picture > img'　  # pictureタグ以下のimgタグのCSSセレクタ
img = chrome_driver.find_element(By.CSS_SELECTOR, selector) # imgタグを取得
img_src = img.get_attribute('currentSrc') # 現在の画像URLを取得

参考文献

1. 記事中でも紹介しているpictureタグの説明ページです
   https://zero-plus.io/media/html-picture/

2. 今回の解決法を知った出所です
   https://stackoverflow.com/questions/74295441/select-first-element-of-srcset-with-python-selenium