CKEditor is a Rich text editor which is used in web applications to write email content, HTML content, templates etc. It provides many features to edit the text like styles, formatting (bold, italic, underline), HTML formatting, alignment options etc.
We (QA Team) got a chance to test CKEditor when it was integrated with Realvolve. We created a scenario sheet for each day of testing. We had daily meetings with Dev team to discuss which features from CKEditor are going to deploy for next 1-2 days & on that basis, we created a daily testing plan. For creating scenario sheet, we need to think about user scenarios as well as how the feature will be working with existing features in the system. We compared CKEditor with the basic editor (Redactor) which was already in the system as well as we referred some websites related to CKEditor & tested it. As we all shared the vision of taking it early to prod, in order to alleviate the limitation that our current email editor posed on our users, we followed a methodology where we use to test each feature in a quick succession of it being developed. So much so we use to test it on the next day and provide early inputs to the developers so that both the teams could efficiently contribute towards the prod deliverables.
We have learned some lessons while & after testing this feature as follows:

1**.UI Consistency should be maintained all over the application.**

We missed some UI issues while testing the CKEditor. Some of them are:

  • The Preview and Save button are disabled but are blue in Colour-
    This issue should have confused the user as he thought that buttons were enabled but not able to click. Expected result for this issue is all the disabled buttons should be grey in colour.
  • Merge field Pop-up not showing on Firefox-
    Merge fields are the basic & important part of all type of templates. We tested it on Chrome & Safari but we missed to test it on Firefox browser. On Firefox, the pop-up which comes for merge field selection was not displayed & it would have caused the severe issue on Production.

We have learnt some lessons from these UI issues are:

-UI Consistency should be maintained all over the application.

-Test on all three browsers for UI Consistency.

-Issues of UI inconsistency should be Reported on Day 1.

Lessons learnt & actions taken to overcome these issues:

We created UI/UX checklist as a lesson learnt to ensure that no UI issues should be missed for any of the features. UI checklist which we created was generic so that we can use that for all features.
We need to check UI consistency all over the application. The colour, effect given to the buttons when they are enabled as well as disabled should be consistent throughout the app.

Any feature which has UI changes should be tested on all browsers (Chrome, Safari, Firefox).
Some UI issues can be browser specific issues which can also impact on the functionality of the feature. UI must be consistent on all browsers.
You can test this smartly. Test scenarios on one browser.
Then just run UI inspection for the controls / UI / Fields on the rest of the applicable browsers.

We should be able to identify the UI inconsistency on any screen on Day 1 of testing. When we start testing any feature we should first concentrate on UI. If the feature is newly implemented in the system then with the functional testing, UI consistency of the feature with the system is also very important. Delay in reporting UI issues is not acceptable because we as a QA should be able to catch the UI issues on 1st day itself.

2. Don’t let any issue go unnoticed, even if you are unable to reproduce it.

Better keep recording your screen.
Sometimes it happens that we find an issue but that issue can be intermittent or can be reproducible with specific steps only, that issue can not be reproducible each time, so we mark it as not reproducible. But that issue can cause a high impact on the Production if the user does the same scenario. In that case, it’s better to keep recording your screen so that you don’t need to remember all steps which you have done before finding that issue.