'Cypress - Trying to target an iframe within a pane-html div element that pops out from the side

I am working on learning how to write tests in cypress and have run into quite a bit of a headache trying to target an iframe within a panel-html div element that pops out from the side. No matter what I try I get a reference error saying it is the app and not cypress but I have friends working on the same app that got this to work what am I doing wrong here? Will post code for reference below:

/// <reference types="cypress" />


describe('login test', () => {
})

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)
)

it('LOGS IN', () => {
    cy.visit('https://app.alchemer.com/login/v1')
    cy.get('#username.form-control').type('xxxxxx')
    cy.get('#password.form-control').type('xxxxx')
    cy.get('button.btn.btn-primary.btn-block.btn-lg.login-btn.btn-wrap').click()
    cy.get('button[type=submit]'),cy.visit('https://app.alchemer.com/?switch-account-done=1')
    cy.visit('https://app.alchemer.com/builder/build/id/6827242')
    cy.pause()
    
})
it('adds questions', () => {
    cy.get('#section-1 > .section-body > .insert-question-container > .hidden-xs > .list-inline > :nth-child(1) > a')
    .click()
    cy.get('div#question-edit-pane.pane.pane-has-header.pane-has-header-nav.pane-has-footer.pane-open.pane-focused.pane-level-1')
    .iframeLoaded('#cke_1_contents.cke_wysiwyg_frame')
    
    .getInDocument('#cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders')
    .should('be.visible')
    .click()




    //.find('iframe.cke_1_contents.cke_wysiwyg_frame')
   // .click()
    //.its('0.contentDocument.body')
  //.find('#cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders')
  .type('Hello World')
})
iframecypress


Solution 1:[1]

My suggestion would be to use the cypress-iframe plugin for this.

  1. To install npm install -D cypress-iframe

  2. In your cypress/support/commands.js file, add the following:

import 'cypress-iframe';

In your test write:

cy.frameLoaded('#cke_1_contents.cke_wysiwyg_frame')
cy.iframe()
  .find('#cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders')
  .should('be.visible')
  .click()

You can check out the plugin page for more commands.

Solution 2:[2]

Try accessing the editor from the current window

cy.get('div#question-edit-pane')
  .iframeLoaded('#cke_1_contents.cke_wysiwyg_frame')
  .getInDocument('#cke_editable')
  .should('be.visible')
  .click()                    // change to edit mode

cy.window().then(win => {
  const editor = Object.values(win.CKEDITOR.instances)[0];
  cy.wrap(editor)
    .type('Hello World')
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alapan Das
Solution 2 kegne

Related Questions