Selenium textarea - 在 Javascript 中 - 解释

Question

我有这个 html，它在下拉菜单下，在下拉菜单元素中选择一些东西后出现：

<div class="mx-0 w-100 row">
    <textarea id="notes" placeholder="Write here..." required="" class="form-control"> </textarea>
</div>

我想用Selenium点击它，写点东西然后退出textarea。实际上我做到了，但结果因我使用的选择器而异，我不知道为什么：

这是我的实际工作代码：我使用等待元素可见和启用，因为上面的下拉列表在打开时覆盖了文本区域。如果我不使用它们，则会出现“不可交互”错误。

const notes = await driver.wait(until.elementsLocated(By.css('textarea')), delay)
await driver.wait(until.elementIsVisible(notes[0]), delay)
await driver.wait(until.elementIsEnabled(notes[0]), delay)
await notes[0].sendKeys('Something to write')
// this TAB is for exiting from textarea, which let a button to appear
await notes[0].sendKeys(Key.TAB)

现在，如果我使用的不是第一行

const notes = await driver.wait(until.elementLocated(By.id('notes')), delay)

或

const notes = await driver.wait(until.elementLocated(By.xpath('//*[@id="notes"]')), delay)

显然 notes[0] 替换为 notes，它给了我

ElementNotInteractableError: element not interactable

问题是：为什么会这样？我不太喜欢选择带有数字的数组元素，但实际上我被迫选择并且我不明白为什么其他选择器不起作用。

Answer 1

这行代码...

const notes = await driver.wait(until.elementsLocated(By.css('textarea')), delay)

...作为 notes 是所有标识为 By.css('textarea') 的元素的 list 会导致一定的延迟elementsLocated() 幸运的是，第一个匹配元素即 notes[0] 是您想要的元素，您已经完成了。

当然，使用 By.id('notes') 或 By.xpath('//*[@id="notes"]') 的第一个匹配元素不是您想要的元素。

解决方案

最好的解决方案是使更精细，如下所示：

css:

const notes = await driver.wait(until.elementLocated(By.css("textarea.form-control#notes")), delay)

xpath:

const notes = await driver.wait(until.elementLocated(By.xpath("//textarea[@class='form-control' and @id='notes']")), delay)

Selenium textarea - 在 Javascript 中 - 解释

Selenium textarea - in Javascript - explanation

javascript

selenium

selenium-webdriver

selenium-chromedriver

selenium-ide

解决方案