Search code examples
phpsymfonypseudo-elementbehatmink

Behat how to click on other element

I've got a HTML produced by Drupal which looks more or less like that (in simplified form)

<fieldset data-drupal-selector="ts-and-cs" id="edit-fieldset-ts-and-cs" class="js-form-item">
  <label class="js-form-type-checkbox js-form-item-ts-and-cs" data-validation="single-checkbox">
    <input required="required" class="required form-checkbox" data-drupal-selector="edit-ts-and-cs" type="checkbox" id="edit-ts-and-cs" name="ts_and_cs" value="1" aria-required="true">
      <span class="checkbox-label">I have read and agree to <a href="http://domain/tc.pdf">Terms & Conditions</a> *</span>
  </label>
</fieldset>

Thanks to fancy CSS and JS there is nice checkbox built with CSS which is attached into span as ::before pseudo-element so final rendered HTML looks more or less like that

<span class="checkbox-label">
  ::before
  "I have read and agree to "
  <a href="http://domain/tc.pdf">Terms & Conditions</a>
  " *"
</span>

In the same time input elements become hidden of course and not accessible by Behat and any attempt to catch it throws errors like that:

When I check "edit-ts-and-cs"
  Element is not currently visible and so may not be interacted with

Now the problem is that what user really clicks on, to confirm agreement to T&Cs is effectively span.checkbox-label::before but such selector is rejected as CSS selector doesn't support them https://symfony.com/doc/current/components/css_selector.html and this is crucial component of Mink for PHP implementation throwing errors like this

 Pseudo-elements are not supported. (Symfony\Component\CssSelector\Exception\ExpressionErrorException)

When I try to omit ::before in selector any attempt cause click action to catch existing link and follows href and navigates away from the page to PDF document.

Any idea how to solve it and force Behat to produce the right JS click?

This is of course all about @Javascript mode. There is no problem to operate in non JS mode and check inputs directly as in such case they are visible.

Solution

  • At the end I had to modify html and wrapped initial text which is also clickable with extra span element so at the end it looks like that:

    <span class="checkbox-label">
  ::before
  <span>I have read and agree to</span>
  <a href="http://domain/tc.pdf">Terms & Conditions</a>
  " *"
</span>

    which became selectable by and clickable by

    When I click on element "#edit-fieldset-ts-and-cs span.checkbox-label span"