OpenQA.Selenium.WebDriverException：未知錯誤：a.tagName.toUpperCase 不是通過 Selenium 和 C# 帶有 reactJS 元素的函數

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 構建的網站的片段，其中這些元素是有條件地呈現的。

是否有人對是/將/可能導致此問題的原因有任何想法將不勝感激...

Answer 1

元素.tagName

根據Element.tagName ， Element接口的tagName只讀屬性返回調用它的元素的標簽名稱。 例如，如果元素是<img> ，它的tagName屬性是"IMG" （對於 HTML 文檔；對於 XML/XHTML 文檔，它的tagName可能不同）。

• 句法：

   elementName = Element.tagName;

• 值：指示元素標簽名稱的字符串。 此字符串的大小寫取決於文檔類型：

  • 對於表示 HTML 文檔的 DOM 樹，返回的標簽名稱始終采用規范的大寫形式。 例如，對<div>元素調用的tagName返回"DIV" 。
  • 返回 XML DOM 樹中元素的標記名稱的情況與它們寫入原始 XML 文件的情況相同。 如果 XML 文檔包含標簽“”，則 tagName 屬性的值為“SomeTag”。

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

請注意，這在 XML 中是大小寫保留的，DOM 的所有操作也是如此。 HTML DOM 以規范的大寫形式返回 HTML 元素的 tagName，而不管源 HTML 文檔中的大小寫。

解決方案

正如您所提到的，代碼是一個使用 react 的片段，因此在檢查元素是否啟用之前，誘導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

我遇到了同樣的問題，在挖掘了一段時間后，我注意到同一頁面上還有一些其他元素，我什至沒有與屬性名稱 =“標記名”進行交互。 我將其更改為 tagname2 的那一刻，我不再有此錯誤，並且能夠正確地與目標元素進行交互。

令人驚訝的是，我在 Chrome 81.0.4044.20 上遇到了這個問題，而不是 80.x