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?

  • 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 Jan 23 at 23:44

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.