使用 Selenium WebDriver 将带有 alt 属性的 img 转换为文本答案

【问题标题】：Convert img with alt attribute to text with Selenium WebDriver使用 Selenium WebDriver 将带有 alt 属性的 img 转换为文本
【发布时间】：2020-12-16 17:23:44
【问题描述】：

我在下面的元素中有文本和文本之间的图像。

<span class="emojis">
    Lol emojis: 
    <img alt="????" ... />
    <img alt="????" ... />
    Hands emojis: 
    <img alt="????????" ... />
    <img alt="????" ... />
</span>

但是当我使用.text:

emojis = webdriver.find_element_by_xpath('//span[@class="emojis"]').text

我只得到图像之间的文本：

Lol emojis: Hands emojis:

我知道.get_attribute('alt') 获取alt 属性的文本，但是...

有什么方法可以获取alt属性中的文字，并将<img>元素替换为对应的文字，并以正确的顺序将<span>文字与表情符号连接起来，得到下面的文字?

Lol emojis: ???????? Hands emojis: ????????????

【问题讨论】：

标签： python selenium selenium-webdriver

【解决方案1】：

要从 alt 属性中获取文本，请使用：

webdriver.find_element_by_xpath('//span[@class="emojis"]').get_attribute('alt')

当你说“用相应的文本替换元素？”时我有点困惑

如果您想添加一个新的<p> 或<h1> 标记，您必须使用带有一些JavaScript 的execute_script 函数。尝试使用此解决方案：Create a new element by selenium dynamically

【讨论】：

目的是将文本与表情符号以正确的顺序连接起来。我知道 get_attribute 获取属性，但这并不能解决它。输出应该是：“大声笑表情符号：?? 手表情符号：???”

【解决方案2】：

获取alt 中的所有表情符号，并使用它来使用execute_script 和innerHTML 设置HTML 内容（文本）：

emojis_imgs = driver.find_elements_by_xpath('//span[@class="emojis"]/img')
for emoji_img in emojis_imgs:
   emoji = emoji_img.get_attribute('alt')
   driver.execute_script("arguments[0].innerHTML = arguments[1];", emoji_img, emoji)

现在我可以按正确的顺序获取带有情绪的文本：

text_with_emojis = driver.find_element_by_xpath('//span[@class="emojis"]').text

输出：

Lol emojis: ?? Hands emojis: ???

【讨论】：

【解决方案3】：

要获取alt 属性值，您需要识别image 标记，然后使用element.get_attribute("alt"))

for img in driver.find_elements_by_xpath("//span[@class='emojis']//img"):
    print(img.get_attribute("alt"))

更新：

通过 selenium 来做这件事有点棘手。但是，您仍然可以使用 java scripts executor 和子节点来做到这一点。但是我相信这种用例是你必须操纵的，因为没有通用的方法可以通过 selenium 实现它。

val1=driver.execute_script('return arguments[0].childNodes[0].textContent;', driver.find_element_by_xpath("//span[@class='emojis']")).strip()
val2=driver.execute_script('return arguments[0].childNodes[1];', driver.find_element_by_xpath("//span[@class='emojis']")).get_attribute("alt")
val3=driver.execute_script('return arguments[0].childNodes[3];', driver.find_element_by_xpath("//span[@class='emojis']")).get_attribute("alt")
val4=driver.execute_script('return arguments[0].childNodes[4].textContent;', driver.find_element_by_xpath("//span[@class='emojis']")).strip()
val5=driver.execute_script('return arguments[0].childNodes[5]', driver.find_element_by_xpath("//span[@class='emojis']")).get_attribute("alt")
val6=driver.execute_script('return arguments[0].childNodes[7]', driver.find_element_by_xpath("//span[@class='emojis']")).get_attribute("alt")
print(val1 + " " + val2 + " " + val3 + " " + val4 + " " + val5 +" " +val6)

预期输出：

Lol emojis: ? ? Hands emojis: ?? ?

beautifulsoup 会更容易。

【讨论】：

如何以正确的顺序将表情符号与文本结合以输出：大声笑表情符号：?? 手表情符号：????
好的，这就是答案。但是如果文本和表情符号的顺序是随机的呢？
@Slowaways : 请仔细阅读我的更新答案However I believe this kind of usecase you have to manipulate, since there is no generic way you could achieve it via selenium

【解决方案4】：

尝试使用下面的代码来获得所需的输出：

java_script = """var emojis = [];
                 var spanChildNodes = document.querySelector('span.emojis').childNodes;
                 for (i = 0; i < spanChildNodes.length; i++) {if (spanChildNodes[i].textContent != '') {emojis.push(spanChildNodes[i].textContent)} else emojis.push(spanChildNodes[i].getAttribute('alt'))};
                 return emojis;"""

emojis = [elem.strip() for elem in driver.execute_script(java_script)]
print(" ".join(emojis))

输出：

Lol emojis: ?  ? Hands emojis: ??  ?

【讨论】：