Selenium文本区域——在Javascript中——解释

Question

我有一段html，它位于下拉列表中，在下拉元素中选择某个内容后出现：

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

我想用Selenium点击它，写一些东西，然后从文本区域退出。事实上，我做到了，但结果因我使用的选择器而异，我不知道为什么：

以下是我的代码：我使用wait-for元素可见并启用，因为打开上面的下拉列表时，会覆盖文本区域。如果我不使用它们；不可交互"；错误

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明显地代替了notes[0]，它给了我

ElementNotInteractableError: element not interactable

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

Answer 1

这行代码。。。

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

如注释所示是被识别为By.css('textarea')的所有元素的列表，这导致了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)