4.3.0 release (cypress-io#2682)

* 4.3.0 release

* Document `sameSite` support for cookies commands (cypress-io#2662)

* Document `sameSite` support for cookies commands

* Remove reference to `unspecified` `sameSite` value

* add info about no_restriction + secure

* Document experimental features in Configuration doc

* Update configuration.md

* Update configuration.md

* Link to experimental features section from within getcookie/getcookies

* Add history for samesite to getcookie/getcookies

* Add paragraph explaining where to see experimental features in desktop-gui

Co-authored-by: Jennifer Shehane <[email protected]>

* Begin writing 4.3.0 changelog

* write more of changelog

* add history to setcookie and experimental link

* more updates for release

* Updates for partial err improvement changes in 4.3.0 (cypress-io#2683)

* Added cypress-keycloak-commands plugin

* Edited plugin description

* Adding cypress-iframe to custom command plugins (cypress-io#2459)

* Adding cypress-iframe to custom command plugins

* Adding missing space source/_data/plugins.yml

Co-Authored-By: Jennifer Shehane <[email protected]>

Co-authored-by: Jennifer Shehane <[email protected]>

* Updates for partial err improvement changes in 4.3.0

* Remove mention of source maps + update description to match image

Co-authored-by: Fredx87 <[email protected]>
Co-authored-by: Jessica Sachs <[email protected]>
Co-authored-by: Kevin Groat <[email protected]>

* update changelog

* update changelog

* Link to new errors section in changelog

Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Fredx87 <[email protected]>
Co-authored-by: Jessica Sachs <[email protected]>
Co-authored-by: Kevin Groat <[email protected]>

source/_changelogs/4.3.0.md

@@ -0,0 +1,48 @@
+# 4.3.0
+
+*Released 3/30/2020*
+
+**Features:**
+
+- {% url "Errors shown in the Test Runner" debugging#Errors %} have a new design including an expandable stack trace, better highlighting of code elements, and 'Learn more' links that link to relevant Cypress documentation. This is part of our larger improvements to error display with more exciting features to come. Addresses {% issue 3762 %}.
+- When you open a Cypress project, clicking on the **Settings** tab and clicking into the **Experiments** panel will display the {% url "experimental features" configuration#Experiments %} that are available and whether they are enabled for your project.
+- Added support for setting cookie `sameSite` values via `cy.setCookie()`. Addresses {% issue 2437 %}.
+- Added experimental support for adding `sameSite` values to the objects yielded from {% url "`cy.setCookie()`" setcookie %}, {% url "`cy.getCookie()`" getcookie %}, and {% url "`cy.getCookies()`" getcookies %}. Users can enable this by setting the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value to `true`. In Cypress 5, this will be the default. Addresses {% issue 2437 %}.
+- Added support for the `SameSite` cookie attribute in `cy.request()`, `cy.visit()`, and proxied HTTP requests. Addresses {% issue 6757 %}.
+
+**Bugfixes:**
+
+- Fixed a regression in {% url "4.2.0" changelog-4-2-0 %} where cypress installation could fail if Git is not installed. Fixes {% issue 6752 %}.
+- Fixed a regression in {% url "3.5.0" changelog-3-5-0 %} where certain HTTP requests could fail with `Parse Error: Invalid header value char` or `Parse Error: Header overflow`. Fixes {% issue 5602 %}.
+- Fixed a regression in {% url "4.2.0" changelog-4-2-0 %} where Electron deprecation warnings were printed to stderr in open mode. Fixes {% issue 6750 %}.
+- Cookies set with a Domain containing an unknown TLD are now sent along for all requests. For example, a cookie like `foo=bar; Domain=.cypress.test` will now be sent during {% url "cy.request()" request %} to `http://local.cypress.test`. Fixes {% issue 6628 %}.
+- We fixed a situation where a cross-origin errors could incorrectly throw in Chrome. Fixes {% issue 5270 %}.
+- Visibility checks against `vue-fragment` elements no longer throw an unexpected error. Fixes {% issue 6745 %}.
+- The stack trace is now properly shown in the console when clicking the command for tests having an `.only` that throw an error. Fixes {% issue 6744 %}.
+- `firefoxGcInterval` can now correctly be set to `null`. Fixes {% issue 6825 %}.
+- Cypress will no longer crash the process if an empty video chunk is received. Addressed in {% PR 6818 %}.
+
+**Misc:**
+
+- Security warnings no longer show in Mac OS when opening Cypress since our application now undergoes notarization from Apple. Addresses {% issue 5791 %}.
+- When an assertion involving a DOM element retry fails, it now shows a more sensible DOM object in the diff. Addresses {% issue 6723 %}.
+- When an assertion is retried (using {% url "`.should()`" should %}) and fails, it now shows the diff in the `stdout`. Addresses {% issue 6722 %}.
+- The previously used spec filter in the Test Runner is now saved and restored for projects without an ID.Addresses {% issue 6739 %}.
+- We collect more env information from Travis builds for potential use in the Cypress Dashboard. Addresses {% issue 6808 %}.
+- We now collect env information from Netlify builds (for example when using {% url "cypress-io/netlify-plugin-cypress" https://github.com/cypress-io/netlify-plugin-cypress) to send along to the Cypress Dashboard. Addresses {% issue 6780 %}.
+- Type added for `tag` property when using Module API. Addresses {% issue 6795 %}.
+- We're continuing to make progress in converting our codebase from CoffeeScript to JavaScript. Addresses {% issue 2690 %} in {% PR 6833 %}.
+
+**Dependency Updates**
+
+- Upgraded Chrome browser version used during `cypress run` and when selecting Electron browser in `cypress open` from `80.0.3987.141` to `80.0.3987.158`. Addressed in {% PR 6855 %}.
+- Upgraded `electron` from `8.1.1` to `8.2.0`. This bumps the bundled Chromium to `80.0.3987.158`. Addressed in {% PR 6855 %}.
+- Upgraded `@benmalka/foxdriver` from `0.2.3` to `0.3.0`. Addressed in {% PR 6592 %}.
+- Upgraded `@cypress/get-windows-proxy` from `1.6.0` to `1.6.1`. Addressed in {% PR 6823 %}.
+- Upgraded `execa` from `1.0.0` to `4.0.0`. Addressed in {% PR 6013 %}.
+- Upgraded `extract-zip` from `1.6.7` to `1.7.0`. Addresses {% issue 6845 %} in {% PR 6845 %}.
+- Upgraded `firefox-profile` from `1.3.0` to `1.3.1`. Addressed in {% PR 6594 %}.
+- Upgraded `get-port` from `5.1.0` to `5.1.1`. Addressed in {% PR 6854 %}.
+- Upgraded `mime` from `1.6.0` to `2.4.4`. Addressed in {% PR 6764 %}.
+- Upgraded `minimist` from `1.2.2` to `1.2.5`. Addressed in {% PR 6747 %}.
+- Upgraded `squirrelly` from `7.7.0` to `7.9.2`. Addressed in {% PR 6735 %}.

source/_partial/errors_anatomy.md

@@ -0,0 +1,7 @@
+1. **Error name**: This is the type of the error (e.g. AssertionError, CypressError)
+2. **Error message**: This generally tells you what went wrong. It can vary in length. Some are short like in the example, while some are long, and may tell you exactly how to fix the error.
+3. **Learn more**: Some error messages contain a **Learn more** link that will take you to relevant Cypress documentation.
+4. **View stack trace**: Clicking this toggles the visibility of the stack trace. Stack traces vary in length.
+5. **Print to console button**: Click this to print the full error to your DevTools console. This will usually allow you to click on lines in the stack trace and open files in your DevTools.
+
+{% imgTag /img/guides/command-failure-error.png "example command failure error" width-600 %}

source/api/commands/getcookie.md

@@ -45,6 +45,7 @@ Option | Default | Description
 - `httpOnly`
 - `secure`
 - `expiry`
+- `sameSite` *(will only be returned if the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`)*
 
 ### When a cookie matching the name could not be found:
 
@@ -138,6 +139,10 @@ When clicking on `getCookie` within the command log, the console outputs the fol
 
 {% imgTag /img/api/getcookie/inspect-cookie-object-properties-in-console.png "Console Log getcookie" %}
 
+{% history %}
+{% url "4.3.0" changelog#4-3-0 %} | Added `sameSite` property when the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`.
+{% endhistory %}
+
 # See also
 
 - {% url `cy.clearCookie()` clearcookie %}

source/api/commands/getcookies.md

@@ -41,6 +41,7 @@ Option | Default | Description
 - `httpOnly`
 - `secure`
 - `expiry`
+- `sameSite` *(will only be returned if the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`)*
 
 # Examples
 
@@ -96,6 +97,10 @@ When clicking on `getCookies` within the command log, the console outputs the fo
 
 {% imgTag /img/api/getcookies/test-application-cookies.png "Console Log getcookies" %}
 
+{% history %}
+{% url "4.3.0" changelog#4-3-0 %} | Added `sameSite` property when the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`.
+{% endhistory %}
+
 # See also
 
 - {% url `cy.clearCookie()` clearcookie %}

source/api/commands/setcookie.md

@@ -42,6 +42,7 @@ Option | Default | Description
 `path` | `/` | The cookie path
 `secure` | `false` | Whether the cookie is a secure cookie
 `timeout` | {% url `responseTimeout` configuration#Timeouts %} | {% usage_options timeout cy.setCookie %}
+`sameSite` | `undefined` | Cookie's SameSite value. If set, should be one of `lax`, `strict`, or `no_restriction`. Pass `undefined` to use the browser's default. Note: `no_restriction` can only be used if the `secure` flag is set to `true`.
 
 ## Yields {% helper_icon yields %}
 
@@ -54,6 +55,7 @@ Option | Default | Description
 - `httpOnly`
 - `secure`
 - `expiry`
+- `sameSite` *(will only be returned if the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`)*
 
 # Examples
 
@@ -98,6 +100,7 @@ When clicking on `setCookie` within the command log, the console outputs the fol
 {% imgTag /img/api/setcookie/see-cookie-properties-expiry-domain-and-others-in-test.png "Console Log setcookie" %}
 
 {% history %}
+{% url "4.3.0" changelog#4-3-0 %} | Added `sameSite` property when the {% url "`experimentalGetCookiesSameSite`" configuration#Experiments %} configuration value is `true`.
 {% url "0.16.0" changelog#0-16-0 %} | `cy.setCookie()` command added
 {% endhistory %}
 

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

@@ -35,6 +35,12 @@ Each command, assertion, or error, when clicked on, displays extra information i
 
 {% imgTag /img/guides/clicking-commands.png "Click to console.log and to pin" %}
 
+# Errors
+
+Cypress prints several pieces of information when an error occurs during a Cypress test.
+
+{% partial errors_anatomy %}
+
 # Instrument Panel
 
 For certain commands like {% url `cy.route()` route %}, {% url `cy.stub()` stub %}, and {% url `cy.spy()` spy %}, an extra instrument panel is displayed above the test to give more information about the state of your tests.

source/guides/getting-started/testing-your-app.md

@@ -88,6 +88,13 @@ Now click on the `home_page_spec.js` file and watch Cypress open your browser.
 
 If you forgot to start your server you'll see the error below:
 
+<!--
+To reproduce the following screenshot:
+it('successfully loads', () => {
+  cy.visit('https://localhost:8080')
+})
+-->
+
 {% imgTag /img/guides/testing-your-app-visit-fail.png "Error in Test Runner showing cy.visit failed" %}
 
 If you've started your server, then you should see your application loaded and working.

source/guides/getting-started/writing-your-first-test.md

@@ -86,6 +86,17 @@ describe('My First Test', function() {
 
 Once you save again, you'll see Cypress display the failing test in red since `true` does not equal `false`.
 
+Cypress also displays the stack trace where the assertion failed (when available). To read more about the error's display, read about {% url "Debugging Errors" debugging#Errors %}.
+
+<!--
+To reproduce the following screenshot:
+describe('My First Test', () => {
+  it('Does not do much!', () => {
+    expect(true).to.be.false
+  })
+})
+-->
+
 {% imgTag /img/guides/failing-test.png "Failing test" %}
 
 Cypress provides a nice {% url 'Test Runner' test-runner %} that gives you a visual structure of suites, tests, and assertions. Soon you'll also see commands, page events, network requests, and more.
@@ -186,10 +197,20 @@ To verify this, replace `type` with something not on the page, like `hype`. You'
 
 Can you see what Cypress is doing under the hood? It's automatically waiting and retrying because it expects the content to **eventually** be found in the DOM. It doesn't immediately fail!
 
+<!--
+To reproduce the following screenshot:
+describe('My First Test', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://example.cypress.io')
+    cy.contains('hype')
+  })
+})
+-->
+
 {% imgTag /img/guides/first-test-failing-contains.png "Test failing to not find content 'hype'" %}
 
 {% note warning 'Error Messages' %}
-We've taken care at Cypress to write hundreds of custom error messages that attempt to clearly explain what went wrong. In this case Cypress **timed out retrying** to find the content: `hype` within the entire page.
+We've taken care at Cypress to write hundreds of custom error messages that attempt to clearly explain what went wrong. In this case, Cypress **timed out retrying** to find the content `hype` within the entire page. To read more about the error's display, read about {% url "Debugging Errors" debugging#Errors %}.
 {% endnote %}
 
 Before we add another command - let's get this test back to passing. Replace `hype` with `type`.
@@ -366,6 +387,12 @@ The **before** snapshot is taken prior to the click event firing. The **after**
 
 When a command causes an immediate visual change in our application, cycling between before and after will update our snapshot. We can see this in action by clicking the `TYPE` command in the Command Log. Now, clicking **before** will show us the input in a default state, showing the placeholder text. Click **after** will show us what the input looks like when the `TYPE` command has completed.
 
+## Errors
+
+Cypress prints several pieces of information when an error occurs during a Cypress test.
+
+{% partial errors_anatomy %}
+
 ## Page events
 
 Notice there is also a funny looking Log called: `(PAGE LOAD)` followed by another entry for `(NEW URL)`. Neither of these was a command that we issued - rather Cypress itself will log out important events from your application when they occur. Notice these look different (they are gray and without a number).

source/guides/guides/debugging.md

@@ -106,6 +106,25 @@ All of Cypress's commands, when clicked on within the {% url "Command Log" test-
 
 {% imgTag /img/api/type/console-log-of-typing-with-entire-key-events-table-for-each-character.png "Console Log type" %}
 
+# Errors
+
+Sometimes tests fail. Sometimes we want them to fail, just so we know they're testing the right thing when they pass. But other times, tests fail unintentionally and we need to figure out why. Cypress provides some tools to help make that process as easy as possible.
+
+## Anatomy of an error
+
+Let's take a look at the anatomy of an error and how it is displayed in Cypress, by way of a failing test.
+
+```js
+it('failure', () => {
+  // the center of the clicked element is hidden
+  cy.contains('Users').click()
+})
+```
+
+The center of the `<li>Users</li>` element is hidden from view in our application under test, so the test above will fail. Within Cypress, an error will show on failure that includes the following pieces of information:
+
+{% partial errors_anatomy %}
+
 # Log Cypress events
 
 Cypress emits multiple events you can listen to as shown below. {% url 'Read more about logging events in the browser here' catalog-of-events#Logging-All-Events %}.

source/guides/guides/network-requests.md

@@ -285,6 +285,15 @@ In this example, there are many possible sources of failure. In most testing too
 
 With Cypress, by adding a {% url `cy.wait()` wait %}, you can more easily pinpoint your specific problem. If the response never came back, you'll receive an error like this:
 
+<!--
+To reproduce the following screenshot:
+it('test', () => {
+  cy.server()
+  cy.route('foo/bar').as('getSearch')
+  cy.wait('@getSearch')
+})
+-->
+
 {% imgTag /img/guides/clear-source-of-failure.png "Wait Failure" %}
 
 Now we know exactly why our test failed. It had nothing to do with the DOM. Instead we can see that either our request never went out or a request went out to the wrong URL.

source/guides/references/configuration.md

@@ -114,6 +114,16 @@ You may want to use a different Node version if the code executing from the plug
 
 {% imgTag /img/guides/test-runner-settings-nodejs-version.jpg "Node version in Settings in Test Runner" %}
 
+## Experiments
+
+If you'd like to try out what we're working on, you can enable beta features for your project by setting configuration using the options below.
+
+When you open a Cypress project, clicking on the **Settings** tab and clicking into the **Experiments** panel will display the experimental features that are available and whether they are enabled for your project.
+
+Option | Default | Description
+----- | ---- | ----
+`experimentalGetCookiesSameSite` | `false` | If `true`, Cypress will add `sameSite` values to the objects yielded from {% url "`cy.setCookie()`" setcookie %}, {% url "`cy.getCookie()`" getcookie %}, and {% url "`cy.getCookies()`" getcookies %}. This will become the default behavior in Cypress 5.0.
+
 # Overriding Options
 
 Cypress gives you the option to dynamically alter configuration values. This is helpful when running Cypress in multiple environments and on multiple developer machines.
@@ -201,7 +211,7 @@ Cypress.config('pageLoadTimeout') // => 100000
 
 # Resolved Configuration
 
-When you open a Cypress project, clicking on the *Settings* tab will display the resolved configuration to you. This helps you to understand and see where different values came from. Each set value is highlighted to show where the value has been set via the following ways:
+When you open a Cypress project, clicking on the **Settings** tab will display the resolved configuration to you. This helps you to understand and see where different values came from. Each set value is highlighted to show where the value has been set via the following ways:
 
 - Default value
 - The {% url "configuration file" configuration %}

source/guides/references/error-messages.md

@@ -93,7 +93,25 @@ If you are purposefully writing commands outside of a test, there is probably a
 
 ## {% fa fa-exclamation-triangle red %} `cy...()` failed because the element you are chaining off of has become detached or removed from the dom
 
-Getting this errors means you've tried to interact with a "dead" DOM element - meaning it's been detached or completely removed from the DOM.
+Getting this error means you've tried to interact with a "dead" DOM element - meaning it's been detached or completely removed from the DOM.
+
+<!--
+To reproduce the following screenshot:
+describe('detachment example', () => {
+  beforeEach(() => {
+    cy.get('body').then(($body) => {
+      const $outer = Cypress.$('<div />').appendTo($body)
+      Cypress.$('<button />').on('click', () => { $outer[0].remove() }).appendTo($outer)
+    })
+  })
+  it('detaches from dom', () => {
+    cy.get('button')
+    .click()
+    .parent()
+    .should('have.text', 'Clicked')
+  })
+})
+-->
 
 {% imgTag /img/guides/cy-method-failed-element-is-detached.png "cy.method() failed because element is detached" %}
 
@@ -176,6 +194,22 @@ cy.get('[disabled]').click({force: true}).
 
 ## {% fa fa-exclamation-triangle red %} `cy....()` failed because the element is currently animating
 
+<!--
+To reproduce the following screenshot:
+describe('animating example', () => {
+  beforeEach(() => {
+    cy.get('body').then(($body) => {
+      Cypress.$('<input style="position: absolute;" />').appendTo($body)
+      .animate({ left: '+=1000000' }, 10)
+    })
+  })
+  it('is animating', () => {
+    cy.get('input')
+    .type('some text', { timeout: 20 })
+  })
+})
+-->
+
 {% imgTag /img/guides/cy-method-failed-element-is-animating.png "cy.method() failed because element is animating" %}
 
 By default Cypress detects if an element you're trying to interact with is animating. This check ensures that an element is not animating too quickly for a real user to interact with the element. This also prevents some edge cases where actions, such as {% url `.type()` type %} or {% url `.click()` click %}, happened too fast during a transition.