Acceptance Testing Select2 and CKEditor in CodeCeption

In the previous article about CodeCeption, we learned about writing the test cases with CodeCeption, its installation and basics of doing acceptance testing.

This post will explore two of the most used JavaScript driven HTML components – Select2 and CKEditor.

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. We always use this library when there are lots of options in a select tag

CKEditor is a battle-tested WYSIWYG HTML editor. It’s our go-to solution when we need to give complete control to the user on their content.

Select2

Select2 works by changing any existing <select> tag into an auto-complete one. When performing acceptance testing we may need to select an option from any select tag.

This is how standard select tag works in CodeCeption:

<?php
$I->selectOption('form select[name=account]', 'Premium');
$I->selectOption('form input[name=payment]', 'Monthly');
$I->selectOption('//form/select[@name=account]', 'Monthly');
?>

However, since Select2 is a JS library, we need to use it’s own methods to select the values. (Assuming that the Select2 has been initialized on a select tag)-

$('#mySelect2').val('1'); // Select the option with a value of '1'.
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed.

But this is JavaScript. How do we call it from CodeCeption?

The answer is simple- using the “executeJS()” method available in CodeCeption.

Here’s how to do it:

<?php
$I->executeJS("$('#mySelect2').val('1')");
$I->executeJS("$('#mySelect2').trigger('change')");

Make sure to call “trigger(‘change’)” method every time you select any option, otherwise, Select2 will not update the UI.

CKEditor-

Once you’ve initialized CKEditor on the <textarea> tag, you can’t use standard CodeCeption methods for settings its value. Instead, you need to use CKEditor’s methods.

CKEditor has concept of instances. There can be multiple CKEditor instances on a page. And hence, you need to specify which one to use. Here’s how to set an instance’s body (text) value-

CKEDITOR.instances["name"].insertText("text editor content");

Once again, you need to use “executeJS()” method of CodeCeption to execute the above JavaScript, like this-

<?php
$I->executeJS('CKEDITOR.instances["name"].insertText("text editor content")');

As you can see, CodeCeption has made it really easy to test everything- from standard HTML components to JavaScript driven components. This concludes this post about CodeCeption.