UnhandledPromiseRejectionWarning error when selecting the dropdown using "selectOption"

[magimenon]

What are you trying to achieve?

I'm trying to select an option from the dropdown. Name of my is "search" and I select a value "new". I get a below error: UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Failed to execute 'iterateNext' on 'XPathResult': The document has mutated since the result was returned. One thing to be noted here is when I select the first dropdown there are other dropdown gets populated (ajax). I googled and couldn't figure out what's going wrong here? What do you get instead? UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Failed to execute 'iterateNext' on 'XPathResult': The document has mutated since the result was returned.

[sushan088]

I am having the same problem. Previously it works fine with Webdriverio and phantomjs but after using nightmare, not working in that as well.

[DavertMik]

Could you provide HTML which reproduces this error?

Also what helper is that? Nightmare or webriverio?

[magimenon]

Im using nightmare & node version 6.9.1

The HTML is -

<form name="ContactUsForm">
    <p class="required"><span>*</span> = required</p>
    <fieldset repeat="content.form.fieldsets" name="messageInfo">
        <legend if="legend">Message</legend>`
        <div each="fields" template="">`
            <label class="  ">
                <span>Subject</span>
                <input type="text" data-which-field="" name="contact_subject" value="" maxlength="100" class="valid">
            </label>
            <label class="  ">
                <span>Message Text</span>
                <textarea name="customer:comments" wrap="" maxlength="2000"></textarea>
            </label>
        </div>
    </fieldset>
    <fieldset repeat="content.form.fieldsets" name="contactInfo">
        <legend if="legend">Contact Information</legend>
        <div each="fields" template="">
            <label class=" required ">
                <span>First Name</span>
                <input type="text" data-which-field="" name="contact:name:first" value="" maxlength="100" required="">
            </label>
            <label class=" required ">
                <span>Last Name</span>
                <input type="text" data-which-field="" name="contact:name:last" value="" maxlength="100" required="">
            </label>
            <label class="required ">
                <span if="label">Preferred Contact</span>
                <select name="preferred_contact" data-which-field="" required="" fieldtype="">
                    <option value="email" repeat="values">Email</option>
                    <option value="day" repeat="values">Phone</option>
                </select>
            </label>
        </div>
    </fieldset>
    <fieldset repeat="content.form.fieldsets" name="default_section">
        <div each="fields" template=""><!-- Revisit what honeypot is, hidden at the moment -->
            <input aria-hidden="true" type="text" name="hp:contact:cmpny:phone" value=""><!--^_^--><input type="hidden" name="cellName" value="contact_us"><!--^_^--><input type="hidden" name="pageName" value="ContactUsForm"><!--^_^--><input type="hidden" name="outputType" value="json"><input type="hidden" name="widgetType" value="emailforms"><!--^_^--><input type="hidden" name="widgetName" value="contactUs_widget"><!--^_^--><input type="hidden" name="productId" value="46.110.00"><!--^_^--><input type="hidden" name="widgetContext" value=""><!--^_^--><input type="hidden" name="source" value="">
        </div>
    </fieldset>
    <div role="status" id="search-view/card/7ecd6bc1-926e-4688-902e-13965f514926-status" aria-hidden="true">
    </div>
    <div if="content.form.buttons" template="button" each="content.form.buttons">
        <button type="submit" name="" id="" data-action="formSubmit">Submit</button>
    </div>
</form>

[sushan088]

For normal html dropdown it is working fine but I am using the semantic ui dropdown so it is throwing error on that part.

[magimenon]

I'm using a normal html <select> and it fails.

[DavertMik]

Looks like we have 2 cases here. I can work only with that one with an example.
@magimenon could you provide your HTML code as well, so I could fix the issue and make a test for it?

[magimenon]

<form name="ContactUsForm">
    <p class="required"><span>*</span> = required</p>
    <fieldset repeat="content.form.fieldsets" name="messageInfo">
        <legend if="legend">Message</legend>`
        <div each="fields" template="">`
            <label class="  ">
                <span>Subject</span>
                <input type="text" data-which-field="" name="contact_subject" value="" maxlength="100" class="valid">
            </label>
            <label class="  ">
                <span>Message Text</span>
                <textarea name="customer:comments" wrap="" maxlength="2000"></textarea>
            </label>
        </div>
    </fieldset>
    <fieldset repeat="content.form.fieldsets" name="contactInfo">
        <legend if="legend">Contact Information</legend>
        <div each="fields" template="">
            <label class=" required ">
                <span>First Name</span>
                <input type="text" data-which-field="" name="contact:name:first" value="" maxlength="100" required="">
            </label>
            <label class=" required ">
                <span>Last Name</span>
                <input type="text" data-which-field="" name="contact:name:last" value="" maxlength="100" required="">
            </label>
            <label class="required ">
                <span if="label">Preferred Contact</span>
                <select name="preferred_contact" data-which-field="" required="" fieldtype="">
                    <option value="email" repeat="values">Email</option>
                    <option value="day" repeat="values">Phone</option>
                </select>
            </label>
        </div>
    </fieldset>
    <fieldset repeat="content.form.fieldsets" name="default_section">
        <div each="fields" template=""><!-- Revisit what honeypot is, hidden at the moment -->
            <input aria-hidden="true" type="text" name="hp:contact:cmpny:phone" value=""><!--^_^--><input type="hidden" name="cellName" value="contact_us"><!--^_^--><input type="hidden" name="pageName" value="ContactUsForm"><!--^_^--><input type="hidden" name="outputType" value="json"><input type="hidden" name="widgetType" value="emailforms"><!--^_^--><input type="hidden" name="widgetName" value="contactUs_widget"><!--^_^--><input type="hidden" name="productId" value="46.110.00"><!--^_^--><input type="hidden" name="widgetContext" value=""><!--^_^--><input type="hidden" name="source" value="">
        </div>
    </fieldset>
    <div role="status" id="search-view/card/7ecd6bc1-926e-4688-902e-13965f514926-status" aria-hidden="true">
    </div>
    <div if="content.form.buttons" template="button" each="content.form.buttons">
        <button type="submit" name="" id="" data-action="formSubmit">Submit</button>
    </div>
</form>

[magimenon]

@sushan088 - Did you try using I.fillField(,) instead of I.selectOption(,)?

@DavertMik Btw, this issue happens only when I use the I.selectOption which in turns changes the DOM (ajax).

[magimenon]

@sushan088 - Did you try using I.fillField(,) instead of I.selectOption(,)?

@DavertMik Btw, this issue happens only when we use the I.selectOption which in turns changes the DOM (ajax).

[sushan088]

<form method="POST" action="https://abc.com" accept-charset="UTF-8" id="clientForm" class="ui form clearfix novalidate" role="form" enctype="multipart/form-data"><input name="_token" type="hidden" value="RtAUgkznHbGAViwL4PquIVRlRDyGeb3ptW27V8Cf">

<h4 class="bg-primary marginNone innerTitle">Personal Details</h4>
<div class="all"> <div class="required field ">
<label for="first_name">First Name</label>
<input name="first_name" type="text" id="first_name">
</div>

  <div class="column">
    <div class="required field ">
      <label for="country">Country</label>
      <div class="ui search dropdown selection">
      <select id="country" name="country">
      <option value="1">Afghanistan [AFN]</option>
      <option value="2">Albania [ALL]</option>
      <option value="3">Antarctica []</option>
    
      <i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
      <div class="text">Afghanistan [AFN]</div>
      <div class="menu transition hidden" tabindex="-1">
      <div class="item active selected" data-value="1">Afghanistan [AFN]</div>
      <div class="item" data-value="2">Albania [ALL]</div>
      <div class="item" data-value="3">Antarctica []</div>
   
    </div>
  </div>

<div class="column submitButtonMargin">
<button type="submit" ">Save
</button>
</div>
</div>
</form>

[sushan088]

@magimenon thanxs it worked, it is troubling me so much now it is fixed thanx.

[DavertMik]

I hope it is fixed by @robrkerr