Interaction with CkEitor (V4) in Cypress:
CkEditor is a Third Party tool which is commonly used in websites.
Open your `commands.js` file.
Paste this code in it.
Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
const $iframeDoc = $iframe.contents()
const findBody = () => $iframeDoc.find('body')
if ($iframeDoc.prop('readyState') === 'complete') return findBody()
return Cypress.Promise((resolve) => $iframe.on('load', () => resolve(findBody())))
});
Cypress.Commands.add(
'iframeLoaded', { prevSubject: 'element' },
($iframe) => {
const contentWindow = $iframe.prop('contentWindow')
return new Promise(resolve => {
if (
contentWindow &&
contentWindow.document.readyState === 'complete'
) {
resolve(contentWindow)
} else {
$iframe.on('load', () => {
resolve(contentWindow)
})
}
})
})
Cypress.Commands.add(
'getInDocument', { prevSubject: 'document' },
(document, selector) => Cypress.$(selector, document)
)
Now, open your spec.js file. for example in which you Test Case is present.
Find the Text Editor's id/selector by Cypress's own Selector.
For examle it is here cy.get('#cke_9_contents > .cke_wysiwyg_frame')
in your case it may be different.
describe(''Ck Editor,function() {
it('Text Editor',function(){
cy.get('#cke_9_contents > .cke_wysiwyg_frame').first().then(frame => {
const iframe = frame.contents();
const body = iframe.find('body');
body.attr('contenteditable', 'true');
cy.wrap(body).type('Write your Text here.', { force: true })
})
cy.get('iframe.cke_wysiwyg_frame') // "cke_wysiwyg_frame" class is used here
.iframeLoaded() // wait for the iframe to be loaded
.then($frameWindow => {
const win = cy.state('window'); // grab the window Cypress is testing
const ckEditor = win.CKEDITOR; // CKEditor has added itself to the window
const instances = ckEditor.instances; // can be multiple editors on the page
const myEditor = Object.values(instances)
.filter(instance => instance.id === 'cke_9')[0]; // select the instance by id
// use CKEditor API to change the text
myEditor.setData('<p>Write your Text here.</p>');
// Verify
cy.wrap($frameWindow)
.its('document')
.its('body')
.invoke('text')
})
})
})
Note:
Please note that write your same id here.i.e as in this Picture.
If you have any question please leave a Comment.
Its really working
ReplyDeleteautomation
ReplyDelete