OpenQA.Selenium.WebDriverException : unknown error: a.tagName.toUpperCase is not a function with reactJS elements through Selenium and C#

Question

我有一个问题困扰着我，我有一个方法可以查找并检查是否所有元素都在页面上，该方法的一部分检查页面元素是否已启用。

if (Driver.Instance.FindElement(identifier).Enabled == false)
 {
    // do some stuff
 }

但是，If 语句失败并出现以下错误：

StackTrace:at OpenQA.Selenium.Remote.RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse)
at OpenQA.Selenium.Remote.RemoteWebDriver.Execute(String driverCommandToExecute, Dictionary`2 parameters)
at OpenQA.Selenium.Remote.RemoteWebElement.Execute(String commandToExecute, Dictionary`2 parameters)
at OpenQA.Selenium.Remote.RemoteWebElement.get_Enabled()
...
OpenQA.Selenium.WebDriverException : unknown error: a.tagName.toUpperCase is not a function
(Session info: chrome=71.0.3578.98)
(Driver info: chromedriver=2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387),platform=Windows NT 10.0.17134 x86_64)

此方法在类似情况下被不断调用并与许多其他测试用例一起使用，没有问题，但是，当尝试与以下元素交互时，我收到如上所示的错误：

<div class="sc-gGBfsJ lhiRYE" span="5">
   <svg aria-hidden="true" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11 sc-jnlKLf dmaYnw" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" name="tag-create-modal__dismiss-cross">
  <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
   </svg>
   <div class="sc-hdPSEv kfkXT" id="CreateTagPropSheet__container" name="undefined__container">
  <div class="sc-nrwXf egtFZS">
     <div class="sc-fKGOjr bfXSai sc-ekkqgF dATqpE">
        <h3 class="sc-cpHetk bdaBtw sc-crNyjn fXZflb" id="propertySheet__heading--undefined" name="propertySheet__heading--undefined">Create Tag</h3>
     </div>
  </div>
  <form name="create-Tag__form">
     <div class="sc-nrwXf egtFZS">
        <div class="sc-fKGOjr bfXSai sc-ekkqgF dATqpE">
           <div class="sc-hycgNl KoKFR"><label class="sc-jvEmr jErbdW sc-iBmynh kxfLCa">Tag Name</label></div>
           <div class="sc-chAAoq GJbAH" id="propertySheet__select--tagNameContainer" name="tagNameContainer">
              <div class="sc-dTLGrV dLLsoX"><input class="sc-ivVeuv fMqabh" color="normal" id="propertySheet__select--tagName" name="tagName" type="text" autocomplete="on" value=""></div>
           </div>
        </div>
     </div>
     <div class="sc-nrwXf egtFZS">
        <div class="sc-fKGOjr bfXSai sc-ekkqgF dATqpE">
           <div class="sc-hycgNl KoKFR"><label class="sc-jvEmr jErbdW sc-iBmynh kxfLCa">System Level Tag</label></div>
           <div class="sc-chPdSV Ekqp" id="isSystemLevelCheckContainer" name="isSystemLevelTagContainer">
              <input class="sc-kgoBCf fZucFc" type="checkbox" id="isSystemLevelCheck" name="isSystemLevelTag">
              <div class="sc-kGXeez clAVjW"></div>
           </div>
        </div>
     </div>
     <div class="sc-nrwXf egtFZS">
        <div class="sc-fKGOjr bfXSai sc-ekkqgF dATqpE"><button class="sc-bhlBdH gEVPJV" id="propertySheet__button--create-tag__Button" name="create-tag__Button" color="success">Create Tag</button></div>
     </div>
  </form>
   </div>
</div>

我想知道是不是跟元素本身有关，上面的代码是我们网站的一个片段，是用react搭建的，这些元素是有条件渲染的。

是否有人对 is/would/could 导致此问题的原因有任何想法，我们将不胜感激...

Answer 1

Element.tagName

根据 Element.tagName tagName 只读属性 Element 接口 returns 调用它的元素的标签名称。例如，如果元素是 <img>，它的 tagName 属性是 "IMG"（对于 HTML 文档；对于 XML/XHTML 文件）。

语法：
```
elementName = Element.tagName;
```
值：表示元素标签名称的字符串。该字符串的大小写取决于文档类型：
- 对于代表 HTML 文档的 DOM 树，返回的标签名称始终采用规范的大写形式。例如，tagName 调用了 <div> 元素 returns "DIV".
- XML DOM 树中元素的标记名称以与原始 XML 文件中写入相同的大小写返回。如果 XML 文档包含标签“”，则标签名称属性的值为 "SomeTag".

此外，根据 Document Object Model (Core) Level 1：

Note that this is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.

解决方案

正如您所提到的，代码是一个使用 react 的代码片段，因此在检查元素 Enabled 之前，诱导 WebDriverWait 对于所需元素的 可见性如下：

if (Driver.Instance.FindElement(identifier).Enabled == false) if (new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.XPath("element_xpath"))).Enabled == false) { // do some stuff }

Answer 2

我遇到了同样的问题，在挖掘了一段时间后，我注意到同一页面上还有一些我什至没有与之交互的元素具有属性名称="tagname"。当我将其更改为 tagname2 时，我不再出现此错误并且能够与目标元素正确交互。

令人惊讶的是，我在 Chrome 81.0.4044.20 上遇到了这个问题，而在 80.x

上却没有

OpenQA.Selenium.WebDriverException : unknown error: a.tagName.toUpperCase is not a function with reactJS elements through Selenium and C#