10.9.0 Release

content/_changelogs/10.8.0.md

@@ -10,7 +10,7 @@ _Released 9/13/2022_
   [`playwright-webkit`](https://www.npmjs.com/package/playwright-webkit). For
   more details, read
   [our blog post](https://www.cypress.io/blog/2022/09/13/cypress-10-8-experimental-run-tests-in-webkit).
-  Addressed [#17336](https://github.com/cypress-io/cypress/issues/6422).
+  Addresses [#6422](https://github.com/cypress-io/cypress/issues/6422).
 
 **Performance:**
 
@@ -36,7 +36,7 @@ _Released 9/13/2022_
 - Fixed a bug where projects using Node.js 16.17+ and 18.6+ with ES Modules and
   TypeScript were not working with Cypress. Fixes
   [#22795](https://github.com/cypress-io/cypress/issues/22795),
-  [#23393](https://github.com/cypress-io/cypress/issues/23393) and
+  [#23393](https://github.com/cypress-io/cypress/issues/23393), and
   [#23552](https://github.com/cypress-io/cypress/issues/23552).
 - When searching for specs we now normalize OS-specific path separators so that
   Windows users can use back- and forward-slashes. Fixes
@@ -58,7 +58,7 @@ _Released 9/13/2022_
   [#23357](https://github.com/cypress-io/cypress/issues/23357).
 - Fixed a regression introduced in Cypress [10.0.0](#10-0-0) where Cypress was
   incompatible with Chrome v64 - v70. Fixes
-  [#23509](https://github.com/cypress-io/cypress/issues/23644).
+  [#23509](https://github.com/cypress-io/cypress/issues/23509).
 - Fixes an issue where outdated organization and project information could be
   shown in dialogs when connecting a project to the Cypress Dashboard. Fixes
   [#23538](https://github.com/cypress-io/cypress/issues/23538).

content/_changelogs/10.9.0.md

@@ -0,0 +1,70 @@
+## 10.9.0
+
+_Released 9/27/2022_
+
+**Features:**
+
+- Added support for requiring dependencies within the
+  [`cy.origin()`](/api/commands/origin) callback. See the
+  [`Cypress.require()`](/api/cypress-api/require) and
+  [`cy.origin()`](/api/commands/origin#Dependencies-Sharing-Code) docs for more
+  information.
+- Added support for visiting cross-origin pages outside of a
+  [`cy.origin()`](/api/commands/origin) callback. See the
+  [`cy.origin()`](/api/commands/origin#Alternative-navigation) and
+  [`cy.visit()`](/api/commands/visit#Visiting-cross-origin-sites) docs for more
+  information and caveats. Addresses
+  [#21485](https://github.com/cypress-io/cypress/issues/21485),
+  [#22282](https://github.com/cypress-io/cypress/issues/22282),
+  [#21300](https://github.com/cypress-io/cypress/issues/21300), and
+  [#23236](https://github.com/cypress-io/cypress/issues/23236).
+- Added support for re-using session data cached by
+  [`cy.session()`](/api/commands/session) across specs via the
+  `cacheAcrossSpecs` option. Addresses
+  [#17710](https://github.com/cypress-io/cypress/issues/17710).
+- Added support for advanced dev server configuration via an async function that
+  can optionally modify the dev server config. Addresses
+  [#23302](https://github.com/cypress-io/cypress/issues/23302).
+- Launch options returned from the
+  [`before:browser:launch`](/api/plugins/browser-launch-api) event can now
+  include an `env` key that can be used to pass environment variables to the
+  browser when it is launched. Addressed by
+  [#23624](https://github.com/cypress-io/cypress/pull/23624).
+- Component tests that fail now display a code frame of the source location of
+  the error within the Cypress reporter. Addresses
+  [#21720](https://github.com/cypress-io/cypress/issues/21720).
+
+**Bugfixes:**
+
+- The spec results printed stdout after a test run now show the path to the spec
+  and not just the file name. Fixes
+  [#22304](https://github.com/cypress-io/cypress/issues/22304).
+- The viewport dropdown in the Cypress App now displays the correct text. Fixes
+  [#23789](https://github.com/cypress-io/cypress/issues/23789).
+- Compile errors are now surfaced in the command log during tests for Angular
+  and Next projects. Fixes
+  [#23219](https://github.com/cypress-io/cypress/issues/23219).
+- The error "Automatic publicPath is not supported in this browser" will no
+  longer be displayed when using Webpack 5 and dynamic imports. Fixes
+  [#18435](https://github.com/cypress-io/cypress/issues/18435).
+- The correct source control link is now sent to the Cypress Dashboard for
+  failed specs when the cypress config file is not the project root. Fixes
+  [#22971](https://github.com/cypress-io/cypress/issues/22971).
+- The error "Invalid left-hand-side in assignment" will no longer be thrown when
+  the `experimentalModifyObstructiveThirdPartyCode` flag is enabled. Fixes
+  [#23647](https://github.com/cypress-io/cypress/issues/23647).
+- `it.skip` now functions correctly in Angular component tests. Fixes
+  [#23409](https://github.com/cypress-io/cypress/issues/23409).
+- The `tsConfig` build option is now respected for Angular component tests.
+  Fixes [#23673](https://github.com/cypress-io/cypress/issues/23673).
+- Configuring a custom browser no longer logs a warning when trying to use that
+  browser. Addressed in
+  [#23446](https://github.com/cypress-io/cypress/pull/23446).
+
+**Misc:**
+
+- Improved the accessibility of a few components within the Cypress Launchpad
+  and App. Addressed in
+  [#23745](https://github.com/cypress-io/cypress/pull/23745).
+- Improved the UI of the Sessions instrument panel in the Cypress reporter.
+  Addresses [#21400](https://github.com/cypress-io/cypress/issues/21400).

content/_data/sidebar.json

@@ -985,6 +985,10 @@
               "title": "platform",
               "slug": "platform"
             },
+            {
+              "title": "require",
+              "slug": "require"
+            },
             {
               "title": "session",
               "slug": "session"

content/api/commands/origin.md

@@ -33,9 +33,8 @@ Enabling this flag does the following:
 - It supersedes
   the [`Cypress.Cookies.preserveOnce()`](/api/cypress-api/cookies#Preserve-Once) and
   [`Cypress.Cookies.defaults()`](/api/cypress-api/cookies#Defaults) methods.
-- Cross-origin requests will no longer fail immediately, but instead, time out
-  based on [`pageLoadTimeout`](/guides/references/configuration#Timeouts).
-- Tests will no longer wait on page loads before moving on to the next test.
+- Cross-origin requests will now succeed, however, to interact with a
+  cross-origin page you must use a `cy.origin` block.
 
 Because the page is cleared before each
 test, [`cy.visit()`](/api/commands/visit) must be explicitly called in each test
@@ -91,10 +90,11 @@ cy.get('h1').contains('My cool site under test')
 
 ```js
 const hits = getHits()
-// cy.visit() should be inside cy.origin() callback
 cy.visit('https://www.acme.com/history/founder')
+// to interact with cross-origin content, move this inside cy.origin() callback
+cy.get('h1').contains('About our Founder, Marvin Acme')
 cy.origin('https://www.acme.com', () => {
-  // Fails because origin was visited before cy.origin() block
+  cy.visit('/history/founder')
   cy.get('h1').contains('About our Founder, Marvin Acme')
   // Fails because hits is not passed in via args
   cy.get('#hitcounter').contains(hits)
@@ -214,9 +214,10 @@ cy.origin('https://www.acme.com', () => {
 
 ### Navigating to secondary origin with cy.visit
 
-When navigating to a secondary origin using `cy.visit()`, it is essential to
-trigger the navigation **after** entering the origin callback, otherwise a
-cross-origin error will be thrown.
+When navigating to a secondary origin using `cy.visit()`, you can either
+navigate prior to or after the `cy.origin` block. Errors are no longer thrown on
+cross-origin navigation, but instead when commands interact with a cross-origin
+page.
 
 ```js
 // Do things in primary origin...
@@ -233,11 +234,42 @@ and the protocol defaults to `https`. When `cy.visit()` is called with the path
 `/history/founder`, the three are concatenated to make
 `https://www.acme.com/history/founder`.
 
+#### Alternative navigation
+
+```js
+// Do things in primary origin...
+
+cy.visit('https://www.acme.com/history/founder')
+
+// The cy.origin block is required to interact with the cross-origin page.
+cy.origin('www.acme.com', () => {
+  cy.get('h1').contains('About our Founder, Marvin Acme')
+})
+```
+
+Here the cross-origin page is visited prior to the `cy.origin` block, but any
+interactions with the window are performed within the block which can
+communicate with the cross-origin page
+
+#### <Icon name="exclamation-triangle" color="red"></Icon> Incorrect Usage
+
+```js
+// Do things in primary origin...
+
+cy.visit('https://www.acme.com/history/founder')
+
+// This command will fail, it's executed on localhost but the application is at acme.com
+cy.get('h1').contains('About our Founder, Marvin Acme')
+```
+
+Here `cy.get('h1')` fails because we are trying to interact with a cross-origin
+page outside of the cy.origin block, due to 'same-origin' restrictions, the
+'localhost' javascript context can't communicate with 'acme.com'.
+
 ### Navigating to secondary origin with UI
 
-When navigating to a secondary origin by clicking a link or button in the
-primary origin, it is essential to trigger the navigation _before_ entering the
-origin callback, otherwise a cross-origin error will be thrown.
+Navigating to a secondary origin by clicking a link or button in the primary
+origin is supported.
 
 ```js
 // Button in primary origin goes to https://www.acme.com
@@ -290,7 +322,7 @@ do this with `cy.origin()`.
 
 ```js
 Cypress.Commands.add('login', (username, password) => {
-  // Remember to pass in dependencies via `args`
+  // Remember to pass in arguments via `args`
   const args = { username, password }
   cy.origin('my-auth.com', { args }, ({ username, password }) => {
     // Go to https://auth-provider.com/login
@@ -473,49 +505,120 @@ of
 [restrictions on the data which may be passed](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#things_that_dont_work_with_structured_clone)
 into the callback.
 
-### Callback restrictions
+### Dependencies / Sharing Code
 
-Because of the way in which the callback is transmitted and executed, there are
-certain limitations on what code may be run inside it. In particular, the
-following Cypress commands will throw errors if used in the callback:
+It is not possible to use
+[CommonJS `require()`](https://nodejs.org/en/knowledge/getting-started/what-is-require/)
+or
+[dynamic ES module `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports)
+within the callback. However, [`Cypress.require()`](/api/cypress-api/require)
+can be utilized to include [npm](https://www.npmjs.com/) packages and other
+files. It is functionally the same as using
+[CommonJS `require()`](https://nodejs.org/en/knowledge/getting-started/what-is-require/)
+in browser-targeted code.
 
-- `cy.origin()`
-- [`cy.intercept()`](/api/commands/intercept)
-- [`cy.session()`](/api/commands/session)
-- [`cy.server()`](/api/commands/server)
-- [`cy.route()`](/api/commands/route)
-- [`Cypress.Cookies.preserveOnce()`](/api/cypress-api/cookies)
+```js
+cy.origin('somesite.com', () => {
+  const _ = Cypress.require('lodash')
+  const utils = Cypress.require('../support/utils')
 
-It is also currently not possible to use
-[`require()`](https://nodejs.org/en/knowledge/getting-started/what-is-require/)
-or
-[dynamic `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports)
-within the callback. Because of this limitation, it cannot use
-[npm](https://www.npmjs.com/) packages or other third-party libraries inside the
-callback, as there is no mechanism to reference them. This functionality will be
-provided in a future version of Cypress.
+  // ... use lodash and utils ...
+})
+```
+
+`Cypress.require()` can be used to share custom commands between tests run in
+primary and secondary origins. We recommend this pattern for setting up your
+[support file](/guides/core-concepts/writing-and-organizing-tests#Support-file)
+and setting up custom commands to run within the `cy.origin()` callback:
+
+`cypress/support/commands.js`:
+
+```js
+Cypress.Commands.add('clickLink', (label) => {
+  cy.get('a').contains(label).click()
+})
+```
+
+`cypress/support/e2e.js`:
+
+```js
+// makes custom commands available to all Cypress tests in this spec,
+// outside of cy.origin() callbacks
+import './commands'
+
+// code we only want run per test, so it shouldn't be run as part of
+// the execution of cy.origin() as well
+beforeEach(() => {
+  // ... code to run before each test ...
+})
+```
+
+`cypress/e2e/spec.cy.js`:
+
+```js
+before(() => {
+  // makes custom commands available to all subsequent cy.origin('somesite.com')
+  // calls in this spec. put it in your support file to make them available to
+  // all specs
+  cy.origin('somesite.com', () => {
+    Cypress.require('../support/commands')
+  })
+})
+
+it('tests somesite.com', () => {
+  cy.origin('somesite.com', () => {
+    cy.visit('/page')
+    cy.clickLink('Click Me')
+  })
+})
+```
 
-While third-party packages are strictly unavailable, it is possible to reuse
-your **own** code between `cy.origin()` callbacks. The workaround is to create a
-custom Cypress command within the secondary origin in a `before` block:
+The JavaScript execution context is persisted between `cy.origin()` callbacks
+that share the same origin. This can be utilized to share code between
+successive `cy.origin()` calls.
 
 ```js
 before(() => {
   cy.origin('somesite.com', () => {
-    Cypress.Commands.add('clickLink', (label) => {
-      cy.get('a').contains(label).click()
-    })
+    // makes commands defined in this file available to all callbacks
+    // for somesite.com
+    Cypress.require('../support/commands')
   })
 })
 
-it('clicks the secondary origin link', () => {
+it('uses cy.origin() + custom command', () => {
   cy.origin('somesite.com', () => {
     cy.visit('/page')
     cy.clickLink('Click Me')
   })
 })
+
+it('also uses cy.origin() + custom command', () => {
+  cy.origin('somesite.com', () => {
+    cy.visit('/page')
+    cy.clickLink('Click Me')
+  })
+
+  cy.origin('differentsite.com', () => {
+    // WARNING: cy.clickLink() will not be available because it is a
+    // different origin
+  })
+})
 ```
 
+### Callback restrictions
+
+Because of the way in which the callback is transmitted and executed, there are
+certain limitations on what code may be run inside it. In particular, the
+following Cypress commands will throw errors if used in the callback:
+
+- `cy.origin()`
+- [`cy.intercept()`](/api/commands/intercept)
+- [`cy.session()`](/api/commands/session)
+- [`cy.server()`](/api/commands/server)
+- [`cy.route()`](/api/commands/route)
+- [`Cypress.Cookies.preserveOnce()`](/api/cypress-api/cookies)
+
 ### Other limitations
 
 There are other testing scenarios which are not currently covered by