2

I am trying to write a JavaScript "user journey" test to go through several pages of a flow and eventually assert on the output.

I'm getting tripped up because a validation error is preventing me from continuing, even after I set a value.

Here is an excerpt of the relevant HTML:

<div class="form-container" data-aura-rendered-by="295:0">
  <div data-aura-rendered-by="297:0">
    <div class="slds-grid slds-wrap" data-aura-rendered-by="393:0">
      <div class="slds-m-bottom_medium slds-size_12-of-12" data-aura-rendered-by=
      "306:0">
        <div class="steps-title" data-aura-rendered-by="300:0">
          <h1 data-aura-rendered-by="301:0">Where?</h1>

          <p data-aura-rendered-by="303:0">Please provide location for the request</p>
        </div>
      </div>

      <div class="slds-m-bottom_medium whereFields slds-size_12-of-12"
      data-aura-rendered-by="379:0">
        <div class="c-container cServiceRequestAddressSearchCmp" data-aura-rendered-by=
        "312:0" data-aura-class="cServiceRequestAddressSearchCmp">
          <div class="slds-grid" data-aura-rendered-by="376:0">
            <div class="slds-shrink-none slds-size_11-of-12" data-aura-rendered-by=
            "373:0">
              <fieldset class="slds-show" data-aura-rendered-by="330:0">
                <div class="slds-grid slds-gutters" data-aura-rendered-by="331:0">
                  <div class="slds-col slds-size_1-of-5" data-aura-rendered-by="351:0">
                    <label for="input-4" class="slds-form-element__label slds-no-flex"
                    lightning-input_input=""><abbr title="required" class=
                    "slds-required" lightning-input_input="">*</abbr>Street
                    Name</label>

                    <div class="slds-form-element__control slds-grow"
                    lightning-input_input="">
                      <input type="text" id="input-4" name="streetName" required=""
                      class="slds-input" lightning-input_input="" aria-describedby=
                      "input-4-message" />
                    </div>

                    <div id="input-4-message" role="alert" class=
                    "slds-form-element__help" lightning-input_input="">
                      Street Name is required
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!--render facet: 395:0--><!--render facet: 396:0--><!--render facet: 397:0-->

  <div class="slds-grid slds-wrap intakeButton" data-aura-rendered-by="422:0">
    <div class="slds-m-top_large slds-clearfix btn-mobile slds-grow slds-size_12-of-12"
    data-aura-rendered-by="419:0">
      <div class="slds-float_right btn-mobile-50" data-aura-rendered-by="401:0">
        <button class="slds-button slds-button_brand sfdc_button" type="button"
        data-aura-rendered-by="404:0"><!--render facet: 405:0-->next
        <!--render facet: 408:0--></button>
      </div><!--render facet: 409:0-->

      <div class="slds-float_left btn-mobile-100" data-aura-rendered-by="410:0">
        <button class="slds-button slds-button_neutral sfdc_button_secondary" type=
        "button" data-aura-rendered-by="413:0"><!--render facet: 414:0-->cancel
        <!--render facet: 417:0--></button>
      </div>
    </div>
  </div>
</div>

I can set streetName:

document.getElementsByName('streetName')[0].value = 'Example'

This appears to work fine (the text populates in the browser window).

However, when I click the Next button programmatically:

document.getElementsByClassName('slds-button')[0].click()

I receive the error:

Street Name is required

I tried to trigger the validation code to run again using:

document.getElementsByName('streetName')[0].blur()

But it had no effect.

My Question

After setting the required fields, how can I rerun the validation so the click() method successfully submits the form?

This question had a bounty worth +50 reputation from Aaron Brager that ended 2 hours ago. Grace period ends in 21 hours

This question has not received enough attention.

  • can you post your lightning component code that you are trying to test? – RedDevil Jan 17 at 18:44
  • It’s a functional black box test, so I don’t have access to the source code, only the html and minimized js output. You can see the full page here though: 311.chicago.gov/s/new-service-request/…. Just turn off type ahead entry to see the four input fields for an address. – Aaron Brager Jan 17 at 21:22
  • Calling dispatchEvent() on the input field, passing in a new change or input Event seems to work, but unreliably / intermittently. – Aaron Brager Jan 17 at 21:24
  • What framework are you using to write your user journey test? – Robs 4 hours ago

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.