HTML inside a label can't be matched when formatted

[tommyp]

When placing a <span> inside a <label> a formatter can sometimes place them on different lines. With a form like:

<form>
  <label for="email">
    Email 
    <span class="text-red-600">
      *
    </span>
    <input type="email" name="email" />
  </label>
</form>

and a test of

test "fills in the input", %{conn: conn} do
  conn
  |> visit("/")
  |> fill_in("Email *", with: "test@example.com")
end

The test fails with:

** (ArgumentError) Could not find element with label "Email *".

Found the following labels:

<label for="email">
  Email
  <span class="text-red-600">
    *
  </span>
  <input type="email" name="email"/>
</label>

I've created a repo to reproduce this error. The failing test can be ran with - mix test test/bug_web/views/home_test.exs

In investigating this issue I tracked it down to this line.

P.S. Thanks for all your hard work on PhoenixTest!

[mustela]

Probably related, if you have this html structure:

<label for="first_name" class="block">
  <span>First Name<span class="ml-1">*</span></span>
  <input required="" type="text" name="dependent_form[first_name]" id="first_name" placeholder="" class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent ">
</label>

fill_in doesn't work neither.

[germsvel]

@tommyp thanks for opening the issue! (and thanks for more info @mustela)

It's hard to support arbitrarily nested HTML in labels. I think the solution there would be to target the label in a non-exact way.

Right now, it's not possible to do this:

test "fills in the input", %{conn: conn} do
  conn
  |> visit("/")
  |> fill_in("Email", with: "test@example.com", exact: false)
end

but PRs like https://github.com/germsvel/phoenix_test/pull/118 are working to introduce that.

I think all form helpers should have the exact option in the not too distant future.

@tommyp and @mustela would that solve your problem? Or is there a reason why you want to be able to specify that the label has the contents of the nested span?

[mustela]

@germsvel that would solve the issue for me! Thanks!

[tommyp]

@germsvel Yes it would solve it for me too.