Add doc about Test Runner iframe. (#3073)

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

source/api/commands/window.md

@@ -137,6 +137,50 @@ See {% url '"Set flag to start tests"' https://glebbahmutov.com/blog/set-flag-to
 cy.window({ timeout: 10000 }).should('have.property', 'foo')
 ```
 
+# Notes 
+
+## Cypress uses 2 different windows.
+
+Let's say you want to check the type of the events. You might write code like below:
+
+```js
+it('test', (done) => {
+  cy.get('#test-input').then((jQueryElement) => {
+    let elemHtml = jQueryElement.get(0)
+
+    elemHtml.addEventListener('keydown', (event) => {
+      expect(event instanceof KeyboardEvent).to.be.true
+      done()
+    })
+  })
+
+  cy.get('#test-input').type('A')
+})
+```
+
+It fails. But the interesting thing is that the type of `event` is `KeyboardEvent` when you `console.log(event)`. 
+
+It's because the Test Runner uses an `iframe` to load the application under test. In other words, the `KeyboardEvent` used in the the code above and the `KeyboardEvent` class from which the `event` variable is constructed are different `KeyboardEvent`s. 
+
+That's why the test should be written like this. 
+
+```js
+it('should trigger KeyboardEvent with .type inside Cypress event listener', (done) => {
+  cy.window().then((win) => {
+    cy.get('#test-input').then((jQueryElement) => {
+      let elemHtml = jQueryElement.get(0)
+
+      elemHtml.addEventListener('keydown', (event) => {
+        expect(event instanceof win['KeyboardEvent']).to.be.true
+        done()
+      })
+    })
+  })
+
+  cy.get('#test-input').type('A')
+})
+```
+
 # Rules
 
 ## Requirements {% helper_icon requirements %}

source/faq/questions/using-cypress-faq.md

@@ -661,6 +661,10 @@ Yes. You can leverage visual testing tools to test that charts and graphs are re
 - see {% url "Testing a chart with Cypress and Applitools" https://glebbahmutov.com/blog/testing-a-chart/ %}
 - see {% url "Testing how an application renders a drawing with Cypress and Percy.io" https://glebbahmutov.com/blog/testing-visually/ %}
 
+## {% fa fa-angle-right %} Why doesn't the `instanceof Event` work?
+
+It might be because of the 2 different windows in Cypress Test Runner. For more information, please check {% url "the note here" /api/commands/window.html#Cypress-uses-2-different-windows %}.
+
 ## {% fa fa-angle-right %} Can I use Cucumber to write tests?
 
 Yes, you can. You can write feature files containing Cucumber scenarios and then use Cypress to write your step definitions in your spec files. A special preprocessor then coverts the scenarios and step definitions into "regular" JavaScript Cypress tests.

source/guides/core-concepts/test-runner.md

@@ -91,6 +91,8 @@ The image below shows that our application is displaying at `1000px` width, `660
 
 {% imgTag /img/guides/errors.png "Errors" %}
 
+*Note: Internally, the AUT renders within an iframe. This can sometimes cause unexpected behaviors {% url "explained here." /api/commands/window.html#Cypress-uses-2-different-windows %}*
+
 # Selector Playground
 
 The Selector Playground is an interactive feature that helps you: