feat: kitchensink for Cypress v6.0.0 Release (#452)

Co-authored-by: Gleb Bahmutov <[email protected]>

Author: flotwig

.circleci/config.yml

@@ -108,6 +108,12 @@ workflows:
             - run: npx cypress cache path
             - run: npx cypress cache list
             - run: npx cypress info
+            # let's print version info
+            - run: npx cypress version
+            - run: npx cypress version --component package
+            - run: npx cypress version --component binary
+            - run: npx cypress version --component electron
+            - run: npx cypress version --component node
 
       # runs on 3 machines, load balances tests
       # and records on Cypress Dashboard

.github/workflows/single.yml

@@ -48,10 +48,16 @@ jobs:
       env:
         # make sure every Cypress install prints minimal information
         CI: 1
+      # print Cypress and OS info
       run: |
         npm ci
         npx cypress verify
         npx cypress info
+        npx cypress version
+        npx cypress version --component package
+        npx cypress version --component binary
+        npx cypress version --component electron
+        npx cypress version --component node
 
     # Starts local server, then runs Cypress tests and records results on the dashboard
     - name: Cypress tests

app/assets/js/scripts.js

@@ -134,9 +134,9 @@ $(() => {
       url: `${root}/comments`,
       method: 'POST',
       data: {
-        name: 'Using POST in cy.route()',
+        name: 'Using POST in cy.intercept()',
         email: '[email protected]',
-        body: 'You can change the method used for cy.route() to be GET, POST, PUT, PATCH, or DELETE',
+        body: 'You can change the method used for cy.intercept() to be GET, POST, PUT, PATCH, or DELETE',
       },
     }).then(() => {
       $('.network-post-comment').text('POST successful!')
@@ -148,9 +148,9 @@ $(() => {
       url: `${root}/comments/1`,
       method: 'PUT',
       data: {
-        name: 'Using PUT in cy.route()',
+        name: 'Using PUT in cy.intercept()',
         email: '[email protected]',
-        body: 'You can change the method used for cy.route() to be GET, POST, PUT, PATCH, or DELETE',
+        body: 'You can change the method used for cy.intercept() to be GET, POST, PUT, PATCH, or DELETE',
       },
       statusCode: {
         404 (data) {

app/commands/aliasing.html

@@ -74,7 +74,7 @@ <h1>Aliasing</h1>
         <div class="col-xs-7">
           <h4><a href="https://on.cypress.io/as">.as()</a></h4>
           <p>To alias a route or DOM element for use later, use the <a href="https://on.cypress.io/api/as"><code>.as()</code></a> command.</p>
-          <pre><code class="javascript">      
+          <pre><code class="javascript">
 // The following DOM command chain is unwieldy.
 // To avoid repeating it, let's use `.as()`!
 cy.get('.as-table')
@@ -92,15 +92,14 @@ <h4><a href="https://on.cypress.io/as">.as()</a></h4>
 
 // Alias the route to wait for its response
 
-cy.server()
-cy.route('GET', 'comments/*').as('getComment')
+cy.intercept('GET', '**/comments/*').as('getComment')
 
 // we have code that gets a comment when
 // the button is clicked in scripts.js
 cy.get('.network-btn').click()
 
 // https://on.cypress.io/wait
-cy.wait('@getComment').its('status').should('eq', 200)
+cy.wait('@getComment').its('response.statusCode').should('eq', 200)
 </code></pre>
         </div>
         <div class="col-xs-5">

app/commands/files.html

@@ -77,38 +77,15 @@ <h4 id="fixture"><a href="https://on.cypress.io/fixture">cy.fixture()</a></h4>
           <pre><code class="javascript">// Instead of writing a response inline you can
 // use a fixture file's content.
 
-cy.server()
-cy.fixture('example.json').as('comment')
-cy.route('GET', 'comments', '@comment').as('getComment')
+// when application makes an Ajax request matching "GET **/comments/*"
+// Cypress will intercept it and reply with the object in `example.json` fixture
+cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
 
 // we have code that gets a comment when
 // the button is clicked in scripts.js
 cy.get('.fixture-btn').click()
 
-cy.wait('@getComment').its('responseBody')
-  .should('have.property', 'name')
-  .and('include', 'Using fixtures to represent data')
-
-// you can also just write the fixture in the route
-cy.route('GET', 'comments', 'fixture:example.json').as('getComment')
-
-// we have code that gets a comment when
-// the button is clicked in scripts.js
-cy.get('.fixture-btn').click()
-
-cy.wait('@getComment').its('responseBody')
-  .should('have.property', 'name')
-  .and('include', 'Using fixtures to represent data')
-
-// or write fx to represent fixture
-// by default it assumes it's .json
-cy.route('GET', 'comments', 'fx:example').as('getComment')
-
-// we have code that gets a comment when
-// the button is clicked in scripts.js
-cy.get('.fixture-btn').click()
-
-cy.wait('@getComment').its('responseBody')
+cy.wait('@getComment').its('response.body')
   .should('have.property', 'name')
   .and('include', 'Using fixtures to represent data')</code></pre>
         </div>

app/commands/network-requests.html

@@ -63,52 +63,13 @@
   <div class="banner">
     <div class="container">
       <h1>Network Requests</h1>
-      <p>Examples of handling AJAX or XHR requests in Cypress, for a full reference of commands, go to <a href="https://on.cypress.io/api" target="_blank">docs.cypress.io</a>
+      <p>Examples of handling HTTP requests in Cypress, for a full reference of commands, go to <a href="https://on.cypress.io/api" target="_blank">docs.cypress.io</a>
       </p>
     </div>
   </div>
   <div class="container content-container">
     <div id="network-requests">
       <div class="row">
-
-        <div class="col-xs-7">
-          <h4 id="server"><a href="https://on.cypress.io/server">cy.server()</a></h4>
-          <p>To control the behavior of network requests and responses, use the <a href="https://on.cypress.io/server"><code>cy.server()</code></a> command.</p>
-          <pre><code class="javascript">cy.server().should((server) => {
-  // the default options on server
-  // you can override any of these options
-  expect(server.delay).to.eq(0)
-  expect(server.method).to.eq('GET')
-  expect(server.status).to.eq(200)
-  expect(server.headers).to.be.null
-  expect(server.response).to.be.null
-  expect(server.onRequest).to.be.undefined
-  expect(server.onResponse).to.be.undefined
-  expect(server.onAbort).to.be.undefined
-
-  // These options control the server behavior
-  // affecting all requests
-
-  // pass false to disable existing route stubs
-  expect(server.enable).to.be.true
-  // forces requests that don't match your routes to 404
-  expect(server.force404).to.be.false
-  // ignores requests from ever being logged or stubbed
-  expect(server.ignore).to.be.a('function')
-})
-
-cy.server({
-  method: 'POST',
-  delay: 1000,
-  status: 422,
-  response: {},
-})</code></pre>
-    </div>
-        <div class="col-xs-5">
-        </div>
-
-        <div class="col-xs-12"><hr></div>
-
         <div class="col-xs-7">
           <h4 id="request"><a href="https://on.cypress.io/request">cy.request()</a></h4>
           <p>To make an XHR request, use the <a href="https://on.cypress.io/request"><code>cy.request()</code></a> command.</p>
@@ -181,43 +142,41 @@ <h4 id="request"><a href="https://on.cypress.io/request">cy.request()</a></h4>
         <div class="col-xs-12"><hr></div>
 
         <div class="col-xs-7">
-          <h4 id="route"><a href="https://on.cypress.io/route">cy.route()</a></h4>
-          <p>To route responses to matching requests, use the <a href="https://on.cypress.io/route"><code>cy.route()</code></a> command.</p>
-          <pre><code class="javascript">let message = 'whoa, this comment does not exist'
-cy.server()
+          <h4 id="http"><a href="https://on.cypress.io/http">cy.intercept()</a></h4>
+          <p>To route responses to matching requests, use the <a href="https://on.cypress.io/http"><code>cy.intercept()</code></a> command.</p>
+          <pre><code class="javascript">    let message = 'whoa, this comment does not exist'
 
 // Listen to GET to comments/1
-cy.route('GET', 'comments/*').as('getComment')
+cy.intercept('GET', '**/comments/*').as('getComment')
 
 // we have code that gets a comment when
 // the button is clicked in scripts.js
 cy.get('.network-btn').click()
 
 // https://on.cypress.io/wait
-cy.wait('@getComment').its('status').should('eq', 200)
+cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
 
 // Listen to POST to comments
-cy.route('POST', '/comments').as('postComment')
+cy.intercept('POST', '**/comments').as('postComment')
 
 // we have code that posts a comment when
 // the button is clicked in scripts.js
 cy.get('.network-post').click()
-cy.wait('@postComment')
-
-// get the route
-cy.get('@postComment').should((xhr) => {
-  expect(xhr.requestBody).to.include('email')
-  expect(xhr.requestHeaders).to.have.property('Content-Type')
-  expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()')
+cy.wait('@postComment').should(({ request, response }) => {
+  expect(request.body).to.include('email')
+  expect(request.headers).to.have.property('content-type')
+  expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
 })
 
 // Stub a response to PUT comments/ ****
-cy.route({
+cy.intercept({
   method: 'PUT',
-  url: 'comments/*',
-  status: 404,
-  response: { error: message },
-  delay: 500,
+  url: '**/comments/*',
+}, {
+  statusCode: 404,
+  body: { error: message },
+  headers: { 'access-control-allow-origin': '*' },
+  delayMs: 500,
 }).as('putComment')
 
 // we have code that puts a comment when

app/commands/waiting.html

@@ -80,17 +80,15 @@ <h4><a href="https://on.cypress.io/wait">cy.wait()</a></h4>
 cy.get('.wait-input3').type('Wait 1000ms after typing')
 cy.wait(1000)
 
-cy.server()
-
 // Listen to GET to comments/1
-cy.route('GET', 'comments/*').as('getComment')
+cy.intercept('GET', '**/comments/*').as('getComment')
 
 // we have code that gets a comment when
 // the button is clicked in scripts.js
 cy.get('.network-btn').click()
 
 // wait for GET comments/1
-cy.wait('@getComment').its('status').should('eq', 200)</code></pre>
+cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])</code></pre>
         </div>
         <div class="col-xs-5">
           <div class="well">

app/cypress-api.html

@@ -126,20 +126,6 @@ <h4 id="Cookies.default"><a href="https://on.cypress.io/cookies">Cypress.Cookies
 
         <div class="col-xs-12"><hr></div>
 
-        <div class="col-xs-12">
-          <h4 id="Server.default"><a href="https://on.cypress.io/cypress-server">Cypress.Server.default()</a></h4>
-          <p>To change the default configuration for <code>cy.server</code>, use <a href="https://on.cypress.io/cypress-server"><code>Cypress.Server.defaults()</code></a>.</p>
-          <pre><code class="javascript">Cypress.Server.defaults({
-  delay: 0,
-  force404: true,
-  ignore: function(xhr){
-    // handle custom logic for ignoring XHRs
-  }
-})</code></pre>
-        </div>
-
-        <div class="col-xs-12"><hr></div>
-
         <div class="col-xs-12">
           <h4 id="arch"><a href="https://on.cypress.io/arch">Cypress.arch</a></h4>
           <p>To get CPU architecture name of underlying OS, use <a href="https://on.cypress.io/arch"><code>Cypress.arch</code></a>.</p>

cypress/integration/examples/aliasing.spec.js

@@ -27,14 +27,13 @@ context('Aliasing', () => {
 
   it('.as() - alias a route for later use', () => {
     // Alias the route to wait for its response
-    cy.server()
-    cy.route('GET', 'comments/*').as('getComment')
+    cy.intercept('GET', '**/comments/*').as('getComment')
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
     cy.get('.network-btn').click()
 
     // https://on.cypress.io/wait
-    cy.wait('@getComment').its('status').should('eq', 200)
+    cy.wait('@getComment').its('response.statusCode').should('eq', 200)
   })
 })

cypress/integration/examples/cypress_api.spec.js

@@ -73,23 +73,6 @@ context('Cypress.Cookies', () => {
   })
 })
 
-context('Cypress.Server', () => {
-  beforeEach(() => {
-    cy.visit('http://localhost:8080/cypress-api')
-  })
-
-  // Permanently override server options for
-  // all instances of cy.server()
-
-  // https://on.cypress.io/cypress-server
-  it('.defaults() - change default config of server', () => {
-    Cypress.Server.defaults({
-      delay: 0,
-      force404: false,
-    })
-  })
-})
-
 context('Cypress.arch', () => {
   beforeEach(() => {
     cy.visit('http://localhost:8080/cypress-api')