Add doc about Test Runner iframe.

Author: sainthkh

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 Cypress Runner uses `iframe` to load the test application. In other words, `KeyboardEvent` used in the the code above and the `KeyboardEvent` class from which `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

@@ -660,3 +660,7 @@ 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 `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 %}.

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, AUT uses iframe. It can sometimes cause unexpected {% url "behaviors like this." /api/commands/window.html#Cypress-uses-2-different-windows %}*
+
 # Selector Playground
 
 The Selector Playground is an interactive feature that helps you: