Cypress: `Cannot read property 'body' of null` error when using `.type()` in a contenteditable body element inside an iframe

Created on 11 Dec 2019  路  13Comments  路  Source: cypress-io/cypress

Current behavior:

When trying to type inside of an iframe where the target element is either the body element with contenteditable=true or a child of the body, then an exception is throw from Cypress and the command fails. This worked successfully in 3.4.1, but is now failing in 3.7.0.

We use the Froala wysiwyg editor library v2.9 which creates the editor as an iframe with the body element set with contenteditable=true. So we can no longer run e2e tests which type text into the editor with Cypress 3.7.0.

Desired behavior:

Cypress successfully types into the specified element.

Steps to reproduce: (app code and test code)

An example of how to reproduce the error is by running the command,

cy.get('iframe').then(($iframe) => {
  const $body = $iframe.contents().find('body');
  cy.wrap($body).find('p').type('test');
});
````

With an iframe that contains,

```html
<body contenteditable="true">
 ...
</body>

This produces the following exception.

TypeError: Cannot read property 'body' of null
    at getHostContenteditable (http://localhost:57715/__cypress/runner/cypress_runner.js:107362:29)
    at _getSelectionBoundsFromContentEditable (http://localhost:57715/__cypress/runner/cypress_runner.js:107280:29)
    at Module.getSelectionBounds (http://localhost:57715/__cypress/runner/cypress_runner.js:107602:14)
    at shouldUpdateValue (http://localhost:57715/__cypress/runner/cypress_runner.js:94737:81)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:95442:14
    at Keyboard.performSimulatedDefault (http://localhost:57715/__cypress/runner/cypress_runner.js:95481:11)
    at Keyboard.simulatedKeydown (http://localhost:57715/__cypress/runner/cypress_runner.js:95388:25)
    at Keyboard.typeSimulatedKey (http://localhost:57715/__cypress/runner/cypress_runner.js:95411:12)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:95159:17
From previous event:
    at http://localhost:57715/__cypress/runner/cypress_runner.js:95169:70
From previous event:
    at Keyboard.type (http://localhost:57715/__cypress/runner/cypress_runner.js:95168:62)
    at type (http://localhost:57715/__cypress/runner/cypress_runner.js:87991:23)
    at onReady (http://localhost:57715/__cypress/runner/cypress_runner.js:88133:20)
    at runAllChecks (http://localhost:57715/__cypress/runner/cypress_runner.js:85227:14)
    at retryActionability (http://localhost:57715/__cypress/runner/cypress_runner.js:85235:16)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:85241:7
From previous event:
    at Object.verify (http://localhost:57715/__cypress/runner/cypress_runner.js:85178:21)
    at handleFocused (http://localhost:57715/__cypress/runner/cypress_runner.js:88124:29)
    at Context.type (http://localhost:57715/__cypress/runner/cypress_runner.js:88179:12)
    at Context.<anonymous> (http://localhost:57715/__cypress/runner/cypress_runner.js:100860:21)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:100381:33
From previous event:
    at runCommand (http://localhost:57715/__cypress/runner/cypress_runner.js:100363:14)
    at next (http://localhost:57715/__cypress/runner/cypress_runner.js:100498:14)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:100521:18
From previous event:
    at next (http://localhost:57715/__cypress/runner/cypress_runner.js:100498:34)
From previous event:
    at http://localhost:57715/__cypress/runner/cypress_runner.js:100535:37
From previous event:
    at run (http://localhost:57715/__cypress/runner/cypress_runner.js:100527:15)
    at Object.cy.(anonymous function) [as visit] (http://localhost:57715/__cypress/runner/cypress_runner.js:100894:11)
    at Context.runnable.fn (http://localhost:57715/__cypress/runner/cypress_runner.js:101081:20)
    at callFn (http://localhost:57715/__cypress/runner/cypress_runner.js:30931:21)
    at Test.../driver/node_modules/mocha/lib/runnable.js.Runnable.run (http://localhost:57715/__cypress/runner/cypress_runner.js:30924:7)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:104009:28
From previous event:
    at Object.onRunnableRun (http://localhost:57715/__cypress/runner/cypress_runner.js:103998:17)
    at $Cypress.action (http://localhost:57715/__cypress/runner/cypress_runner.js:97629:30)
    at Test.Runnable.run (http://localhost:57715/__cypress/runner/cypress_runner.js:102935:20)
    at Runner.../driver/node_modules/mocha/lib/runner.js.Runner.runTest (http://localhost:57715/__cypress/runner/cypress_runner.js:31398:10)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:31504:12
    at next (http://localhost:57715/__cypress/runner/cypress_runner.js:31318:14)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:31328:7
    at next (http://localhost:57715/__cypress/runner/cypress_runner.js:31260:14)
    at http://localhost:57715/__cypress/runner/cypress_runner.js:31296:5
    at timeslice (http://localhost:57715/__cypress/runner/cypress_runner.js:26364:27)

Versions

Cypress 3.7.0, 3.6.0, 3.5.0

pkdriver cy.type 鈱笍 regression v3.5.0
Source
picture jerryteps
👍5

Most helpful comment

Yes we are heavily affected by this and are stuck on a previous version. We really want to upgrade to 4.0 which has Firefox and Edge support.

picture marcinstrzyz on 8 Feb 2020
👍6

All 13 comments

I confirmed, this is a regression introduced in 3.5.0.

index.html

<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.html" title="iframe Example 1"
  width="400" height="300"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<body contenteditable="true">
  <p>foo bar</p>
</body>
</html>

spec.js

it('test', () => {
  cy.visit('index.html')
  cy.get('iframe').then(($iframe) => {
    const $body = $iframe.contents().find('body')
    cy.wrap($body).find('p').type('test')
  });
})

3.4.1

Screen Shot 2019-12-16 at 3 34 54 PM

3.5.0

Screen Shot 2019-12-16 at 3 36 39 PM

jennifer-shehane picture jennifer-shehane on 16 Dec 2019

Just a note that this affects CKEditor also, as it uses an iframe too.

brian-learningpool picture brian-learningpool on 3 Jan 2020
👍4

Following this thread as it's affecting all my cypress tests that have iframes in them.

eabusharkh0 picture eabusharkh0 on 3 Jan 2020
👍6

Cannot update cypress version in my project because of that.

BusseBu picture BusseBu on 3 Feb 2020
👍4

@jennifer-shehane Any update? Please give us eta on the fix.

Due to this we are stuck with 3.4.1 and we cant use the latest 18.04 container because of https://github.com/cypress-io/cypress/issues/6212.

So its a circle of doom.

Naninani picture Naninani on 5 Feb 2020
👍5

Yes we are heavily affected by this and are stuck on a previous version. We really want to upgrade to 4.0 which has Firefox and Edge support.

marcinstrzyz picture marcinstrzyz on 8 Feb 2020
👍6

Ditto with all the above comments

shivasrini picture shivasrini on 13 Feb 2020
👍4

Hmm I think it would be related to this commit :

https://github.com/cypress-io/cypress/commit/9b1f5896e1e257ccd5798f29507c42b6640f9f4b#diff-f7e9a0aa25f3d0c1f0845eeb68e3dac4

TypeError: Cannot read property 'body' of null at getHostContenteditable (http://localhost:57715/__cypress/runner/cypress_runner.js:107362:29)

The error comes from getHostContenteditable

before 3.5.0 the following function _getSelectionBoundsFromContentEditable had a safe guard to only call getHostContenteditable if we have a valid rangeCount

if (sel.rangeCount) {   
      //# get the first (usually only) range obj    
      const range = sel.getRangeAt(0)   
      const hostContenteditable = getHostContenteditable(range.commonAncestorContainer)
}

After 3.5.0

const _getSelectionBoundsFromContentEditable = function (el) {
    const doc = $document.getDocumentFromElement(el)
    const hostContenteditable = getHostContenteditable(range.commonAncestorContainer)     
    const range = _getSelectionRange(doc)
    const hostContenteditable = getHostContenteditable(range.commonAncestorContainer)
      if (hostContenteditable === el) {
          .... 
        }
}

I added back validation to check first if we have a valid range count : 

const _getSelectionBoundsFromContentEditable = function (el) {
  const doc = $document.getDocumentFromElement(el)

  const sel = doc.getSelection()

  if (sel && sel.rangeCount) {
    const range = _getSelectionRange(doc)
    const hostContenteditable = getHostContenteditable(range.commonAncestorContainer)

    if (hostContenteditable === el) {
      return {
        start: range.startOffset,
        end: range.endOffset,
      }
    }
  }

  return {
    start: 0,
    end: 0,
  }
}

The test is green but I don't see any text get typed into the iframe

@jennifer-shehane any insights into why this might be? Trying to wrap my head around this issue.

image

marcinstrzyz picture marcinstrzyz on 21 Feb 2020
👍4

I'm working on a fix for this

Bkucera picture Bkucera on 25 Feb 2020
❤5

@Naninani that issue you link is closed as fixed. Can you open a new one if you're still having that problem?

Bkucera picture Bkucera on 26 Feb 2020

The code for this is done in cypress-io/cypress#6571, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

cypress-bot[bot] picture cypress-bot[bot] on 28 Feb 2020
🎉2

Hello, since the code for this is done but it's not yet released, why is the ticket closed? Also, what version of cypress would we need to install to include the fix for this once this is fixed?

eabusharkh0 picture eabusharkh0 on 28 Feb 2020

Released in 4.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.1.0, please open a new issue.

cypress-bot[bot] picture cypress-bot[bot] on 28 Feb 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

brian-mann picture brian-mann  路  3Comments
Francismb picture Francismb  路  3Comments
scottcrowe picture scottcrowe  路  3Comments
SecondFlight picture SecondFlight  路  3Comments
verheyenkoen picture verheyenkoen  路  3Comments