Dusk: Element is not clickable at point (450, 1068). Other element would rec eive the click

So here's the HTML in question

<div>
    <div class="row px-4 mb-4">
      <div class="col-12">
        <div class="text-center">
          *** This area is available to the review team only ***
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-2 pt-4">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="score" value="1" v-model="score">
            Met
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="score" value="0" v-model="score">
            Not Met
          </label>
        </div>
      </div>
    </div>
</div>

I'm just trying to click the first radio element.

$browser->radio('score', 1)
      ->press('Save')
      ->waitUntilMissing('@loading');

It's doing this to about 20 pages. It fails with the following error, but not always on the same page. Sometimes it's the first, sometimes, the fifth, etc...

1) Tests\Browser\CompleteReviewTest::can_complete_form
Facebook\WebDriver\Exception\ElementClickInterceptedException: element click intercepted: Element <input type="radio" name="score" value="1" class="form-check-input"> is not clickable at point (424, 1073). Other element would receive the click: <div>...</div>
  (Session info: headless chrome=92.0.4515.159)

So that top level empty <div> tag is receiving the click. I need it there since I am using vuejs and this component needs a single <div> tag, but somehow it's capturing the explicit radio click. And it's extra annoying because it doesn't consistently fail in the same place.

bobbybouwmann

4 years ago

Level 88

Maybe a silly option, but have you tried setting the value as a string? The value in the input is never an integer, but always a string.

$browser->radio('score', "1")
      ->press('Save')
      ->waitUntilMissing('@loading');

Another solution is giving each radio input a unique id property and targeting that in your test. Just to try out if the form actually works!

2 likes

number6

4 years ago

Level 6

@bobbybouwmann Thanks for the suggestions; tried both and got the same error. It's almost as if there's a modal interfering, but there's no modal on the page and the empty parent <div> tag has no styling.

bobbybouwmann

4 years ago

Level 88

@number6 Have you tried creating a screenshot at the exact moment to see what the page is showing? I believe it should create a screenshot by default if the test fails

1 like

number6

4 years ago

Level 6

@bobbybouwmann Yes it does give me a screenshot which is the weird thing; I see nothing restricting the click visually. It shows the radio button I want clicked (not on the edge of the screen or anything). No modals, there was an <H5> right above it for the radio group label, but I removed that since it was the first thing getting the click. Now it's the root single parent <div> required for vuejs obstructing the click.

My next step is to remove most of the view and add things back a bit at a time until the error shows up again. But not even sure how much that will help since this thing is going through 30 pages clicking a radio button. and it fails on any one of those pages. If it fails the first time, it might pass a second run (with no changes).

I am also on L6 cause I need the LTS (moving to L9 next month).

bobbybouwmann

4 years ago

Level 88

@number6 Check. Yeah, the only way to continue now is debugging in small steps indeed.

There is a package that might make this debug step easier for you: https://github.com/beyondcode/dusk-dashboard

Although I'm a fan of Laravel Dusk, I personally prefer Cypress. Cypress gives you some more options for working with the API and you get a nice visual presentation.

2 likes

Please or to participate in this conversation.