Selenium textarea - 在 Javascript 中 - 解释

如何解决Selenium textarea - 在 Javascript 中 - 解释

我有一段 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

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

解决方法

这行代码...

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

...作为notes 是一个列表，包含所有标识为 By.css('textarea') 的元素，导致 elementsLocated() 有一定的延迟，幸运的是第一个匹配的元素，即 notes[0] 是你想要的元素，你已经通过了。

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

---

解决方案

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

• 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)