Uncaught TypeError: Cannot set properties of null (setting 'textContent') when field exists (or seems to)

[tfantina]

Elixir and Erlang/OTP versions

Erlang/OTP 25 [erts-13.0.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]

Elixir 1.13.0 (compiled with Erlang/OTP 25)

Operating system

MacOS Monterey

Browser

Chromium

Driver

ChromeDriver

Correct Configuration

• I confirm that I have Wallaby configured correctly.

Current behavior

Single test fails:

1) feature /checkout checkout with a valid credit card (StorefrontWeb.Acceptance.CheckoutTest)
     apps/storefront_web/test/storefront_web/acceptance/checkout_test.exs:42
     ** (Wallaby.JSError) There was an uncaught JavaScript error:

     webpack:///./js/formHelper.js? 136:25 Uncaught TypeError: Cannot set properties of null (setting 'textContent')

     code: |> fill_in_credit_card_fields()
     stacktrace:
       (wallaby 0.28.1) lib/wallaby/chrome/logger.ex:8: Wallaby.Chrome.Logger.parse_log/1
       (elixir 1.13.0) lib/enum.ex:937: Enum."-each/2-lists^foreach/1-0-"/2
       (wallaby 0.28.1) lib/wallaby/driver/log_checker.ex:12: Wallaby.Driver.LogChecker.check_logs!/2
       (wallaby 0.28.1) lib/wallaby/element.ex:226: Wallaby.Element.set_value/2
       (wallaby 0.28.1) lib/wallaby/browser.ex:762: Wallaby.Browser.find/3
       test/storefront_web/acceptance/checkout_test.exs:103: StorefrontWeb.Acceptance.CheckoutTest.fill_in_credit_card_fields/2
       test/storefront_web/acceptance/checkout_test.exs:62: (test)

I don't think this is necessarily an issue with Wallaby per se, I'm just baffled as to why this may be happening, interested to know if others have encountered it and what a solution would be.

Expected behavior

This test should pass. Based on the JS error it seems that formHelper.jsis not finding a specific field; however, by altering the order here:

session
    |> fill_in(@credit_card_fields.name, with: card_data.name)
    |> fill_in(@credit_card_fields.number, with: card_data.number)
    |> fill_in(@credit_card_fields.exp_month, with: card_data.exp_month)
    |> fill_in(@credit_card_fields.exp_year, with: card_data.exp_year)
    |> fill_in(@credit_card_fields.security_code, with: card_data.security_code)
  end

I can get different fields to fill in, it's always only the first two and then the error throws.

Test Code & HTML

 @credit_card_fields %{
     name: xpath(~s<//*[@name="checkout[credit_card][name]"]>),
     number: xpath(~s<//*[@name="checkout[credit_card][number]"]>),
     exp_month: xpath(~s<//*[@name="checkout[credit_card][exp_month]"]>),
     exp_year: xpath(~s<//*[@name="checkout[credit_card][exp_year]"]>),
     security_code: xpath(~s<//*[@name="checkout[credit_card][security_code]"]>)
   }
   ...
     session
     |> sign_in(email: user.user_credentials.email, password: "password")
     |> visit(Routes.cart_url(Endpoint, :checkout))
     |> assert_has(css(".checkout-form"))
     |> fill_in_credit_card_fields()
     |> click(@checkout_submit_button)
     |> assert_has(css(".flash-success"))
     
     
     ...
       def fill_in_credit_card_fields(session, attrs \\ []) do
   one_year_later = Timex.shift(Timex.now(), years: 1)[

   card_data = %{
     name: Keyword.get(attrs, :name, "Bob Dole"),
     number: Keyword.get(attrs, :number, "5111005111051128"),
     exp_month: Keyword.get(attrs, :exp_month, "12"),
     exp_year: Keyword.get(attrs, :exp_year, one_year_later.year),
     security_code: Keyword.get(attrs, :security_code, "313")
   }

   session
   |> fill_in(@credit_card_fields.name, with: card_data.name)
   |> fill_in(@credit_card_fields.number, with: card_data.number)
   |> fill_in(@credit_card_fields.exp_month, with: card_data.exp_month)
   |> fill_in(@credit_card_fields.exp_year, with: card_data.exp_year)
   |> fill_in(@credit_card_fields.security_code, with: card_data.security_code)
 end

HTML on the actual page:

<div class="input-group">
   <label for="checkout_form_credit_card_name">Name on card</label>
   <input autocomplete="cc-name" id="checkout_form_credit_card_name" name="checkout[credit_card][name]" placeholder="Full name as printed" required type="text">
  <p class="{ @error_class }"></p>    
</div>

<div class="input-group">  
  <label for="checkout_form_credit_card_number">Number</label>
  <input autocomplete="cc-number" id="checkout_form_credit_card_number" maxlength="19" minlength="14" name="checkout[credit_card][number]" pattern="[0-9]+" placeholder="Full card number" required type="text">
   <p class="{ @error_class }"></p>  
 </div>
 
<div class="form-row">
  <div class="input-group">  
     <label for="checkout_form_credit_card_exp_month">Exp month</label>
     <input autocomplete="cc-exp-month" id="checkout_form_credit_card_exp_month" name="checkout[credit_card][exp_month]" pattern="0[1-9]\|1[0-2]" placeholder="MM" required type="text">
      <p class="{ @error_class }"></p>
   </div>
   <div class="input-group">  
      <label for="checkout_form_credit_card_exp_year">Exp year</label>
      <input autocomplete="cc-exp-year" id="checkout_form_credit_card_exp_year" name="checkout[credit_card][exp_year]" pattern="2[0-9]{3}" placeholder="YYYY" required type="text">
       <p class="{ @error_class }"></p>
   </div>
   <div class="input-group">
       <label for="checkout_form_credit_card_security_code">Security code</label>
       <input autocomplete="cc-csc" id="checkout_form_credit_card_security_code" name="checkout[credit_card][security_code]" pattern="[0-9]{3,5}" required type="text">
        <p class="{ @error_class }"></p>
    </div>
 </div>

Demonstration Project

No response