Can't locate element on google chrome webpage

Question

I'm trying to change the chrome profile name on this like : chrome://settings/manageProfile using Python and Selenium :

It's the empty textbox on the top left corner:

The issue is that I can't access to the element, I tried all the stuff below :

chromeProfilName = browser.find_element(By.XPATH, "//*[@id='profile-name']")

chromeProfilName = browser.find_element(By.ID, "profile-name")

chromeProfilName = browser.find_element(By.ID, "input") 

I don't really understand how the HTML page is made, but when I examine the page, I found the textboxID = "input". However, the value is stored in a span, which ID is "profile-name".

I always have the same issue : "no such element: Unable to locate element". I don't have a deep knowledge about Selenium. I already looked for answers on internet but I found nothing.

Thanks !

Answer 1

The accepted answer works, I just want to add something :

For those who thought you've to search yourself the path with shadowroots, in reality you don't have to.

With Chrome for exemple (it's not possible on Firefox), when you target the element in the source code, copy the "JS path". Then you just have to paste the path in the execute_script function.

Answer 2

To access the input element you need traverse through shadowroot element.Use the following querySelector to indentify the input tag.

driver.get("chrome://settings/manageProfile")
profileInput = driver.execute_script('return document.querySelector("settings-ui").shadowRoot.querySelector("settings-main").shadowRoot.querySelector("settings-basic-page").shadowRoot.querySelector("settings-people-page").shadowRoot.querySelector("settings-manage-profile").shadowRoot.querySelector("cr-input").shadowRoot.querySelector("#input")')
profileInput.click()
profileInput.clear()
profileInput.send_keys("user676767")

Browser snapshot: