Getting Cypress JS to interact with CKEditor

Because .type() doesn’t submit when selecting the textarea.

CKEditor
CkEditor iframe with custom toolbar

While writing a few Cypress.io tests I ran into a problem of manipulating text in a CKEditor window.

Without diving completely into how CKEditor implements the editable iframe, my first thought was to use the native textarea field and skip adding content to the WYSIWYG all together.

Using the native type() function

// The underlying `textarea`

cy.get("#html_body")
.type("<p>HTML body</p>");
Cypress native type command
Cypress error, can’t type in hidden inputs

Cypress doesn’t like typing into hidden input element elements.

Adding the force:true config doesn’t fare much better. With Javascript turned on, CKEditor overwrites the textarea on submit and that value is lost. 😒

Cypress interacting with an iFrame

Next stop is to search “cypress type in ckeditor” which leads to the issue Cannot target elements inside of an iframe #136.

Reading through the working examples lead to something like this:

// Find the `contenteditable` element within the iframe and type

cy.get("#html_body")
  .then(function ($iframe) {
    const $body = $iframe.contents().find("body");

    cy.wrap($body[0])
      .type("<p>HTML body</p>");
  });
Cypress doesn't error
Doesn’t error, but also doesn’t submit

This does find the DOM element and says that it was typed, but it doesn’t actually result in the words being visible in the CKEditor or submitted with the form. 😢

Interacting with JS page objects

Last ditch effort is to break outside of Cypress and set the data in CKEditor natively then try to make the same call from within the Cypress test.

CKEditor has setData() and getData() functions for getting contents in and out of the editor window.

// Set the contents of the CKEditor natively on the page

CKEDITOR.instances["html_body"].setData("<p>HTML body</p>");

Now to call that from within Cypress, led to a search for “cypress get page JS objects” and then to this issue: How can I execute a JavaScript command #897 and the .window() function.

Success!

// Call out to the page window and use the CKEDITOR object

cy.window()
  .then(win => {
    win.CKEDITOR.instances["html_body"].setData("<p>HTML body</p>");
  });
Setting the content of CKEditor with Javascript
Setting the content of CKEditor with Javascript

Turning the solution into a reusable command

// Define the command

Cypress.Commands.add("type_ckeditor", (element, content) => {
  cy.window()
    .then(win => {
      win.CKEDITOR.instances[element].setData(content);
    });
});

// Use the command

cy.type_ckeditor("html_body", "<p>HTML body</p>");

With this approach it is possible to use any of the CKEDITOR.editor object functions.

Twitter A/B Testing “Find People”

I oversee a few different Twitter accounts, @nickdenardis, @educheckup, and @waynestate just to name a few and usually have them all open throughout the day. I noticed something interesting today, they are running an A/B test on the wording of a link in the top bar.

The feature, although recently reactivated on the #newtwitter design, has yet to get an announcement on the Twitter Blog. The old “who to follow” feature got it’s fair share of criticism and was removed for a while. My personal opinion is that it was horribly implemented and didn’t really help anybody. The new “who to follow” is actually pretty good and I’ve used it a few times to discover people.

“Find People” vs. “Who To Follow”

Going in between two accounts today I noticed a difference in wording on the top bar. I ended up trying all my accounts and could only find two different wordings, their might be more though. It looks like Twitter is doing an A/B test with the link title, “Find People” vs. “Who To Follow”. I have included some screen shots below.

Personally I prefer “Find People” since it is implies an action and I am being proactive about it. But I can see for Twitter newbies that “who to follow” is more about discovering and that is what would be a more enticing action.

I hope Twitter decides to share some statistics about the test on their official announcement of the feature.

Update (Nov 22, 2010 at 3:30pm)

I was just alerted by Jesse Lavery via Twitter that he has a variation that just says “People”

[blackbirdpie url=”http://twitter.com/#!/jesselavery/status/6800198248439809″]

Update (Nov 29, 2010 at 11:40pm)

And apparently some accounts, like Mallory Wood‘s don’t have any link at all to “Find People”

Do you have a different variation? Feel free to post it in the comments.

Screenshots of the #newtwitter

Since everyone is anxiously awaiting their migration to the #newtwitter, including myself, I thought I would share what the interface looks like. Logging in this morning I discovered my university account @waynestate was migrated so I took the oportunity to share some screen shots. I haven’t had time to play with it too much so a full review will be coming shortly.

In the mean time enjoy these shots:

Home Page

Profile View

Direct Messages

Composing

View Hashtag