動画再生ボタンの要素を知りたい

Question

実現したいこと

自動でGoogleChromeを立ち上げ、この動画を再生するまでのコードを書きたいです。

前提

JupyterLabにSeleniumをインストールをし、GoogleChromeの立ち上げ、この動画のページを開くまではできました。
以下がGoogleChromeの立ち上げ、動画のページを開くまでのコードです。

browser=webdriver.Chrome()
url=('https://www.bbc.co.uk/learningenglish/english/features/drama/carol-episode-02')
browser.get(url)
sleep(4)

その後、再生ボタンをクリックするという動作を行いたいので、どこが再生ボタンかをという要素を明示したいのですが、どこがその要素に値するのかがわかりません。

上の画像の青色部分のクラスが再生ボタンに該当するのではと考え、コードを書きましたが、エラーが出てしまいました。

その際のコードです。

elem_play_videos=browser.find_element_by_class_name('p_svg  p_playIcon')

そして、以下のエラーが出ました。

---------------------------------------------------------------------------
NoSuchElementException                    Traceback (most recent call last)
/var/folders/jr/2p724fh51wv7fxmql7kxyb1h0000gn/T/ipykernel_9638/2813891147.py in <module>
----> 1 elem_play_videos=browser.find_element_by_class_name('p_svg  p_playIcon')

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in find_element_by_class_name(self, name)
    562             element = driver.find_element_by_class_name('foo')
    563         """
--> 564         return self.find_element(by=By.CLASS_NAME, value=name)
    565 
    566     def find_elements_by_class_name(self, name):

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in find_element(self, by, value)
    974                 by = By.CSS_SELECTOR
    975                 value = '[name="%s"]' % value
--> 976         return self.execute(Command.FIND_ELEMENT, {
    977             'using': by,
    978             'value': value})['value']

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in execute(self, driver_command, params)
    319         response = self.command_executor.execute(driver_command, params)
    320         if response:
--> 321             self.error_handler.check_response(response)
    322             response['value'] = self._unwrap_value(
    323                 response.get('value', None))

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/errorhandler.py in check_response(self, response)
    240                 alert_text = value['alert'].get('text')
    241             raise exception_class(message, screen, stacktrace, alert_text)
--> 242         raise exception_class(message, screen, stacktrace)
    243 
    244     def _value_or_default(self, obj, key, default):

NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".p_svg  p_playIcon"}
  (Session info: chrome=110.0.5481.177)

質問

どこが動画の再生ボタンに該当する要素なのかをを教えていただきたいです。

Answer 1

該当する要素は 2 つ上にあるボタン属性のついてる <button ~ で、クラス名は、p_button.p_controlBarButton.p_playButton だと思います。

Comments

[loulou098]

ご回答ありがとうございます。ご指摘いただいた通り、

```Python
elem_play_videos=browser.find_element_by_class_name('p_button p_controlBarButton p_playButton')
```
を実行してみましたが
```Python
---------------------------------------------------------------------------
NoSuchElementException Traceback (most recent call last)
/var/folders/jr/2p724fh51wv7fxmql7kxyb1h0000gn/T/ipykernel_9638/3683286229.py in <module>
----> 1 elem_play_videos=browser.find_element_by_class_name('p_button p_controlBarButton p_playButton')

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in find_element_by_class_name(self, name)
562 element = driver.find_element_by_class_name('foo')
563 """
--> 564 return self.find_element(by=By.CLASS_NAME, value=name)
565
566 def find_elements_by_class_name(self, name):

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in find_element(self, by, value)
974 by = By.CSS_SELECTOR
975 value = '[name="%s"]' % value
--> 976 return self.execute(Command.FIND_ELEMENT, {
977 'using': by,
978 'value': value})['value']

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/webdriver.py in execute(self, driver_command, params)
319 response = self.command_executor.execute(driver_command, params)
320 if response:
--> 321 self.error_handler.check_response(response)
322 response['value'] = self._unwrap_value(
323 response.get('value', None))

~/opt/anaconda3/lib/python3.9/site-packages/selenium/webdriver/remote/errorhandler.py in check_response(self, response)
240 alert_text = value['alert'].get('text')
241 raise exception_class(message, screen, stacktrace, alert_text)
--> 242 raise exception_class(message, screen, stacktrace)
243
244 def _value_or_default(self, obj, key, default):

NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".p_button p_controlBarButton p_playButton"}
(Session info: chrome=110.0.5481.177)
```

再度このサイトを閲覧すると、動画は再生ボタンではなくサムネイルをタップすることで再生する流れのため、取得する要素の該当箇所が間違っていました。

[Demerara]

Selenium 3の挙動がどうだったかは覚えてませんが、スペース区切りのクラス名は回答で示した通り、ドットで繋ぐ必要があると思います。