无法使用 Selenium 将密钥（）发送到所见即所得编辑器

Question

我正在尝试自动将文章发布到我的博客，该博客由 Naver 使用 Selenium 提供服务。

问题是我无法将文本放入编辑器。 我曾尝试使用send_keys()，但它不起作用。 这是我尝试过的 Python Selenium 代码。

driver = webdriver.Chrome('./chromedriver')    

driver.get('https://section.blog.naver.com')
driver.find_element_by_xpath("//a[@class = 'login_button']").click()
time.sleep(1)

driver.execute_script("document.getElementsByName('id')[0].value=\'" + user_id + "\'")
driver.execute_script("document.getElementsByName('pw')[0].value=\'" + password + "\'")
driver.find_element_by_xpath("//input[@title = 'Sign in']").click()
time.sleep(1)

driver.find_element_by_xpath("//a[@bg-nclick = 'hmp*s.write']").click()
time.sleep(1)

driver.switch_to.window(driver.window_handles[-1])
driver.switch_to.frame('mainFrame')

driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/article/div/header/button").click()
driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div").click()

#This line is being a problem.
driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div[1]/div/div/p/span").send_keys('Heading1')

它会抛出如下异常。

---------------------------------------------------------------------------
ElementNotInteractableException           Traceback (most recent call last)
<ipython-input-50-e483e0f23c79> in <module>
     25 driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/article/div/header/button").click()
     26 driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div").click()
---> 27 driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div[1]/div/div/p/span").send_keys('Heading1')
     28 #driver.execute_script("document.getElementByXpath('/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div[1]/div/div/p/span').value='Heading1'")

~/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/webelement.py in send_keys(self, *value)
    477         self._execute(Command.SEND_KEYS_TO_ELEMENT,
    478                       {'text': "".join(keys_to_typing(value)),
--> 479                        'value': keys_to_typing(value)})
    480 
    481     # RenderedWebElement Items

~/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/webelement.py in _execute(self, command, params)
    631             params = {}
    632         params['id'] = self._id
--> 633         return self._parent.execute(command, params)
    634 
    635     def find_element(self, by=By.ID, value=None):

~/anaconda3/lib/python3.7/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))

~/anaconda3/lib/python3.7/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):

ElementNotInteractableException: Message: element not interactable

我知道“ElementNotInteractableException：消息：元素不可交互”是什么意思。 尽管我尝试了所有可能的 Xpath 来找到我可以使用的元素send_keys()，但我失败了；紧随其后的是同样的例外。

所以我查看了网络编辑器的源代码。它通过使用 iframe 和许多具有自动生成的 id 的元素以一种不熟悉的方式工作。这就是编辑器的样子。

这是一个简短的视频，可能会让您更了解编辑器的工作原理。

https://youtu.be/os2ruSV4jBU

如果您知道我应该尝试什么，请告诉我。

*编辑

正如您在 python 代码中看到的，我正在考虑使用 javascript 来实现网络自动化。然而，问题是span 元素我怀疑它作为input 元素工作，具有自动生成的随机ID。唯一的可能是选择它使用 Xpath，但不幸的是，Javascript 没有 getElementByXpath()。

Answer 1

编辑 1 - Javascript 方法

您可以尝试使用 JavaScript 向 span 元素发送文本。

这是一个示例：

driver.executeScript("document.getElementById('elementID').setAttribute('value', 'yourTextHere')");

您可以将“elementId”替换为 span 元素的 ID。

编辑 2 - 使用 XPath 的 Javascript 方法

我知道您的span 包含动态 ID，无法通过 XPath 以外的任何其他方法定位。对于这个解决方案，我们可以使用它的 XPath 获取span，然后获取它的 ID 以传递给 Javascript 方法。

IWebElement textAreaElement = driver.findElement(By.XPath("//article//span"));
string textAreaElementId = textAreaElement.GetAttribute("id");
driver.executeScript("document.getElementById('" + textAreaElementId + "').setAttribute('value', 'yourTextHere')");

在此示例中，您使用 XPath 查找 span 元素，然后您将获得其 ID 属性。您将 ID 属性传递给 JS 函数以正确定位您的 span 元素。

或者，您也可以试试这个：

IWebElement textAreaElement = driver.findElement(By.XPath("//article//span"));
driver.executeScript("arguments[0].setAttribute('value', 'yourTextHere')", textAreaElement);

在这种情况下，您将元素本身直接传递给 JS 函数。

附加编辑

我注意到您对某些定位器使用绝对 XPath。如果您想完全简化它们，可以使用我上面使用的相对 XPath 表示法：//。我会给你一些可以简化的 XPath 示例：

绝对 XPath #1

driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/article/div/header/button").click()

相对 XPath #1

driver.find_element_by_xpath("//article/div/header/button").click()

绝对 XPath #2

driver.find_element_by_xpath("/html/body/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[2]/section/article/div[1]/div").click()

相对 XPath #2

driver.find_element_by_xpath("//article/div[1]/div").click()

您无需从文档的html 节点的顶部开始就可以使用XPath。您可以使用// 表示法从页面上的任何位置启动您的 XPath。