Behat 如何点击其他元素答案

【问题标题】：Behat how to click on other elementBehat 如何点击其他元素
【发布时间】：2017-06-12 22:57:01
【问题描述】：

我有一个由 Drupal 生成的 HTML，看起来或多或少像这样（简化形式）

<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>

多亏了精美的 CSS 和 JS，有一个用 CSS 构建的不错的复选框，它作为 ::before 伪元素附加到 span 中，因此最终呈现的 HTML 看起来或多或少像这样

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

与此同时，输入元素当然会被隐藏并且 Behat 无法访问，任何捕捉它的尝试都会引发如下错误：

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

现在的问题是，用户真正点击以确认是否同意 T&C 是有效的span.checkbox-label::before，但此类选择器被拒绝，因为 CSS 选择器不支持它们https://symfony.com/doc/current/components/css_selector.html，这是 Mink 实现 PHP 的关键组件抛出这样的错误

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

当我尝试在选择器中省略 ::before 时，任何尝试都会导致单击操作以捕获现有链接并跟随 href 并从页面导航到 PDF 文档。

知道如何解决它并强制 Behat 产生正确的 JS 点击吗？

这当然是关于@Javascript 模式的。在非 JS 模式下操作并直接检查输入是没有问题的，因为在这种情况下它们是可见的。

【问题讨论】：

你能给这个类型元素的演示页面链接吗？

标签： php symfony pseudo-element behat mink

【解决方案1】：

最后我不得不修改 html 和包装的初始文本，它也可以用额外的 span 元素点击，所以最后它看起来像这样：

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

它变得可以被选择和点击

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

【讨论】：