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

问题

I have an issue that has stumped me, I have a method that finds and checks if all elements are on a page, part of that method checks if a page element is enabled.

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

However, the If statement is failing with the following error:

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)

This method is constantly called and works with numerous other test cases under similar circumstances, without issue, however, when trying to interact with the following element I get the error shown above:

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

I'm wondering if it has something to do with the element itself, and the above code is a snippet for our website that is built using react, where these elements are conditionally rendered.

DOes anybody have any ideas on what is/would/could be causing this issue would be greatly appreciated...

回答1:

Element.tagName

As per Element.tagName the tagName read-only property of the Element interface returns the tag name of the element on which it's called. For example, if the element is an <img>, its tagName property is "IMG" (for HTML documents; it may be cased differently for XML/XHTML documents).

Syntax:
```
elementName = Element.tagName;
```
Value: A string indicating the element's tag name. This string's capitalization depends on the document type:
- For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a <div> element returns "DIV".
- The tag names of elements in an XML DOM tree are returned in the same case in which they're written in the original XML file. If an XML document includes a tag "", then the tagName property's value is "SomeTag".

Further, as per 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.

Solution

As you have mentioned code is a snippet using react so before checking for the element is Enabled induce WebDriverWait for the visibility of the desired element as follows:

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
 }

来源：https://stackoverflow.com/questions/54019559/openqa-selenium-webdriverexception-unknown-error-a-tagname-touppercase-is-not

标签

reactjs

selenium

selenium-webdriver

webdriverwait