如何使用 python selenium 在 DIV 中输入文本

Question

如何使用 python selenium

在 DIV 中输入文本

背景信息

我正在尝试创建一个机器人来对各种 TikTok 帖子发表评论，其中一些帖子需要提及 ex.@username。问题是，TikTok 的评论框是 div 元素而不是 input 元素。

我试过的

所以首先我知道 this Whosebug post，对某些人来说它只是说使用 javascript 来更新 div 值。问题在于，如果您编辑代码，它将不会显示用户名

什么是'drop-down menu of usernames'?

这是一个小菜单，其中包含您要提及的用户的建议

例如，如果我输入“@userna”，它会显示许多用户名相似

像这样

为了验证这一点，我尝试在检查元素中编辑 span，但它不会显示下拉菜单。我认为这与使用 javascript 编辑 div 是一回事。（评论框是 div 但里面的文字是 span）

这是评论框的 XPath

//div[@class='DraftEditor-root']

我试过用（有效）

# get comment box
comment_box = driver.find_element_by_xpath("//div[@class='DraftEditor-root']")

# click the comment box
CommentBox = ActionChains(driver).click(comment_box).perform()

然后我尝试将密钥发送给驱动程序，认为它只会键入并填写像这样选择的任何内容（没有用）

CommentBox = ActionChains(driver).send_keys('@test')

这是评论框的完整 HTML 代码

<div data-e2e="comment-input" class="tiktok-1vwgyq9-DivInputAreaContainer e1npxakq2">
    <div data-e2e="comment-text" class="tiktok-qpucp9-DivInputEditorContainer e1npxakq3">
        <div class="tiktok-ybf3r7-DivInputAreaContainer e12pqyqm0">
            <div class="DraftEditor-root">
                <div class="public-DraftEditorPlaceholder-root">
                    <div class="public-DraftEditorPlaceholder-inner" id="placeholder-24b80" style="white-space: pre-wrap;">Add comment...</div>
                </div>
                <div class="DraftEditor-editorContainer">
                    <div class="notranslate public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="false" aria-describedby="placeholder-24b80" style="outline: none; -webkit-user-select: text; white-space: pre-wrap; word-wrap: break-word;">
                        <div data-contents="true">
                            <div class="" data-block="true" data-editor="24b80" data-offset-key="eap17-0-0">
                                <div data-offset-key="eap17-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
                                    <span data-offset-key="eap17-0-0">
                                        <br data-text="true">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-e2e="comment-at-icon" class="tiktok-1vi8qz3-DivMentionButton e1npxakq4">
        <svg width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C28.0553 42 31.7921 40.6614 34.8006 38.401L35.6001 37.8003C36.0416 37.4686 36.6685 37.5576 37.0003 37.9992L38.2016 39.5981C38.5334 40.0397 38.4443 40.6666 38.0028 40.9983L37.2033 41.599C33.5258 44.3619 28.9513 46 24 46C11.8497 46 2 36.1503 2 24C2 11.8497 11.8497 2 24 2C36.1503 2 46 11.8497 46 24V26C46 30.4843 42.1949 34 37.8438 34C35.1966 34 32.8496 32.7142 31.3935 30.733C29.5649 32.7403 26.9303 34 24 34C18.4772 34 14 29.5228 14 24C14 18.4772 18.4772 14 24 14C29.5228 14 34 18.4772 34 24C34 24.5814 33.9502 25.1528 33.8541 25.7096C33.8473 25.8052 33.8438 25.902 33.8438 26C33.8438 28.2091 35.6347 30 37.8438 30C40.1201 30 42 28.1431 42 26V24C42 14.0589 33.9411 6 24 6ZM24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30C26.9395 30 29.3891 27.8841 29.9013 25.0918C29.9659 24.7392 30 24.3744 30 24C30 20.6863 27.3137 18 24 18Z"></path>
        </svg>
    </div>
    <div data-e2e="comment-emoji-icon" class="tiktok-1yq6goo-DivEmojiButton e1npxakq5">
        <svg width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6ZM2 24C2 11.8497 11.8497 2 24 2C36.1503 2 46 11.8497 46 24C46 36.1503 36.1503 46 24 46C11.8497 46 2 36.1503 2 24Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 23C18.6569 23 20 21.2091 20 19C20 16.7909 18.6569 15 17 15C15.3431 15 14 16.7909 14 19C14 21.2091 15.3431 23 17 23Z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M31 23C32.6569 23 34 21.2091 34 19C34 16.7909 32.6569 15 31 15C29.3431 15 28 16.7909 28 19C28 21.2091 29.3431 23 31 23Z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 28.3431C16 31.4673 19.5817 36 24 36C28.4183 36 32 31.4673 32 28.3431C32 25.219 16 25.219 16 28.3431Z"></path>
        </svg>
    </div>
</div>

Answer 1

我认为问题在于您对容器 div 而不是跨度进行了寻址。不幸的是，我无法测试它，因为我没有 tiktok 帐户。希望这个解决方案会有所帮助，或者在列表中排除这种可能性。

解决方案：

单击跨度而不是 div，然后发送密钥。

或者

以编程方式将文本添加到跨度

JavascriptExecutor js = (JavascriptExecutor) driver;

// Choose the desired span, and add your text into it
js.executeScript("document.quarySelectorAll('[data-offset-key]')[0].innerHTML= @userName");

// try setting focus on the span to active the popup list
js.executeScript("document.quarySelectorAll('[data-offset-key]')[0].focus()")

// try setting a change event on the span to active the popup list
js.executeScript("document.quarySelectorAll('[data-offset-key]')[0].dispatchEvent(new Event('change', { 'bubbles': true }))")

如何使用 python selenium 在 DIV 中输入文本

How to enter text in a DIV with python selenium

javascript

python

selenium

input

如何使用 python selenium

背景信息

我试过的

这是评论框的完整 HTML 代码

解决方案：