How to locate the Create an Account element within https://www.shopdisney.com/ using Selenium and Python

Question

I have been trying to click the "Create an Account" button on this webpage with selenium and python but python cannot seem to find the element. Here is my current code:

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://www.shopdisney.com/merch-pass/product-selection/arendelle-castle-collection-from-frozen")
time.sleep(12)
accountcreate = driver.find_element_by_class_name ('btn-group btn-group-create-account ng-scope')
accountcreate.click()

Every time I run it, chrome opens to the webpage but it does not click on the button and I get this response:

  File "skit.py", line 8, in <module>
    link = driver.find_element_by_class_name ('btn-group btn-group-create-account ng-scope')
  File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 564, in find_element_by_class_name
    return self.find_element(by=By.CLASS_NAME, value=name)
  File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 976, in find_element
    return self.execute(Command.FIND_ELEMENT, {
  File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":".btn-group btn-group-create-account ng-scope"}
  (Session info: chrome=83.0.4103.97)

I have tried to use different methods to identify the element such as XPath, css, and more but I still cannot manage to locate it and click it. I believe it has something to do with Iframes but I am not completely sure. Does anyone have any idea on how to solve this?

Thanks!

Since the element is in a iframe you need webdriver equivalent of this: https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframe. By the way, the particular iframe you were trying to play will produce error: `Uncaught DOMException: Blocked a frame with origin "https://www.shopdisney.com" from accessing a cross-origin frame.` — Lutfar Rahman Milu, Jul 13 '20 at 22:39

undetected Selenium · Accepted Answer · 2020-07-13T22:47:52.350

The link with text as Create an Account is within an <iframe> so you have to:

Induce WebDriverWait for the desired frame to be available and switch to it.
Induce WebDriverWait for the desired element_to_be_clickable().
You can use the following Locator Strategies:

LINK_TEXT:

driver.get("https://www.shopdisney.com/merch-pass/product-selection/arendelle-castle-collection-from-frozen")
WebDriverWait(driver,10).until(EC.frame_to_be_available_and_switch_to_it((By.ID,"disneyid-iframe")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Create an Account"))).click()

Using CSS_SELECTOR:

driver.get("https://www.shopdisney.com/merch-pass/product-selection/arendelle-castle-collection-from-frozen")
WebDriverWait(driver,10).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"iframe[name='disneyid-iframe']")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn-secondary.ng-isolate-scope"))).click()

Using XPATH:

driver.get("https://www.shopdisney.com/merch-pass/product-selection/arendelle-castle-collection-from-frozen")
WebDriverWait(driver,10).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@name='disneyid-iframe']")))
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//a[text()='Create an Account']"))).click()

Note : You have to add the following imports :

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

Browser Snapshot:

How to locate the Create an Account element within https://www.shopdisney.com/ using Selenium and Python

1 Answers1