public function WysiwygSubContext::iClickTheElementInTheWysiwygEditor in Panopoly 8.2

Same name and namespace in other branches

1. 7 modules/panopoly/panopoly_test/behat/steps/panopoly_test_wysiwyg.behat.inc \WysiwygSubContext::iClickTheElementInTheWysiwygEditor()

Clicks the given CSS selector in a WYSIWYG editor.

@When I click the :cssSelector element in the :instanceId WYSIWYG editor

File

modules/panopoly/panopoly_test/behat/steps/panopoly_test_wysiwyg.behat.inc, line 213

Provide Behat step-definitions for WYSIWYG editor.

Class

WysiwygSubContext

Behat subcontext for testing WYSIWYG.

Code

public function iClickTheElementInTheWysiwygEditor($cssSelector, $instanceId) {
  $editorType = $this
    ->getEditorType($instanceId);
  $instance = $this
    ->getWysiwygInstance($instanceId);
  if ($editorType === 'ckeditor') {
    $javascript = <<<JS
const element = {<span class="php-variable">$instance</span>}.document.findOne('{<span class="php-variable">$cssSelector</span>}').getParent();
{<span class="php-variable">$instance</span>}.getSelection().selectElement(element);
JS;
  }
  else {

    // @todo This is tinyMCE specific. We should probably do a switch statement
    // based on $editorType.
    $editor_iframe_id = $instanceId . '_ifr';

    // This Javascript only works on Chrome - not Firefox.
    $javascript = "jQuery('#{$editor_iframe_id}').each(function() {";
    $javascript .= "  jQuery('{$cssSelector}', this.contentWindow.document || this.contentDocument).click();";
    $javascript .= "});";
  }
  $this
    ->getSession()
    ->executeScript($javascript);
}