cypress-io · Jun 2, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 7, 2022 · Jun 7, 2022
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -28,7 +28,7 @@
 
     // Name: Volar
     // Description: Language server for Vue. Required for any syntax highlighting in Vue files.
-    "johnsoncodehk.volar",
+    "vue.volar",
 
     // Name: Code Spell Checker
     // Description: Add spell-checking help to your code.

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -310,9 +310,9 @@ The project utilizes [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspac
 
 > **⚠ Running on Windows?**
 >
-> Many of the NPM scripts used during development use commands designed for a Linux-like shell.If you are running a Windows operating system, you may encounter many commands that are not working. To fix this behavior, you have to set a Linux-like shell as the default `npm` script shell. If you have Git for Windows installed, you can set Git Bash as the default script shell by using the following command:
+> If you are running a Windows operating system, you may encounter some commands that are not working. In order to resolve paths correctly during the development build process, you may need to explicitly set your default `yarn` shell script to Command Prompt by using the following command:
 >```bash
-> yarn config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
+> yarn config set script-shell "C:\\Windows\\system32\\cmd.exe"
 >```
 
 **Install all dependencies:**

diff --git a/browser-versions.json b/browser-versions.json
@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "102.0.5005.61",
-  "chrome:stable": "101.0.4951.64"
+  "chrome:beta": "103.0.5060.33",
+  "chrome:stable": "102.0.5005.61"
 }
diff --git a/circle.yml b/circle.yml
@@ -98,7 +98,7 @@ executors:
     machine:
       image: windows-server-2019-vs2019:stable
       shell: bash.exe -eo pipefail
-    resource_class: windows.medium
+    resource_class: windows.xlarge
     environment:
       PLATFORM: windows
 
@@ -835,7 +835,7 @@ commands:
           command: |
             if [[ -f cypress.json ]]; then
               rm -rf cypress.json
-              echo 'module.exports = {}' > cypress.config.js
+              echo 'module.exports = { e2e: {} }' > cypress.config.js
             fi
       - run:
           name: Rename support file
@@ -1080,8 +1080,10 @@ jobs:
           name: Top level packages
           command: yarn list --depth=0 || true
       - run:
-          name: Check env canaries
-          command: node ./scripts/circle-env.js --check-canaries
+          name: Check env canaries on Mac/Linux
+          command: |
+            # Windows CircleCI does not have a way to pull per-job env
+            [[ $PLATFORM != 'windows' ]] && node ./scripts/circle-env.js --check-canaries || true
       - build-and-persist
       - store-npm-logs
 
@@ -2211,7 +2213,7 @@ jobs:
             CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
           command: |
             rm -rf cypress.json
-            echo 'module.exports = {}' > cypress.config.js
+            echo 'module.exports = { e2e: {} }' > cypress.config.js
       - run:
           name: Rename support file
           working_directory: test-binary
@@ -2579,29 +2581,29 @@ windows-workflow: &windows-workflow
     - node_modules_install:
         name: windows-node-modules-install
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         only-cache-for-root-user: true
 
     - build:
         name: windows-build
         context: test-runner:env-canary
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         requires:
           - windows-node-modules-install
 
     - run-app-integration-tests-chrome:
         name: windows-run-app-integration-tests-chrome
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         context: test-runner:launchpad-tests
         requires:
           - windows-build
 
     - run-launchpad-integration-tests-chrome:
         name: windows-run-launchpad-integration-tests-chrome
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         context: test-runner:launchpad-tests
         requires:
           - windows-build
@@ -2617,15 +2619,15 @@ windows-workflow: &windows-workflow
         <<: *full-windows-workflow-filters
         name: windows-unit-tests
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         requires:
           - windows-build
 
     - create-build-artifacts:
         <<: *full-windows-workflow-filters
         name: windows-create-build-artifacts
         executor: windows
-        resource_class: windows.medium
+        resource_class: windows.xlarge
         context:
           - test-runner:sign-windows-binary
           - test-runner:upload

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.0.3",
+  "version": "10.1.0",
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {

diff --git a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
@@ -305,4 +305,26 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       expect(ctx.actions.project.initializeActiveProject).to.be.called
     })
   })
+
+  it('restarts server if baseUrl is updated in the config file', () => {
+    startAtSpecsPage('e2e')
+    cy.get('[data-cy="spec-item"]')
+
+    cy.withCtx((ctx, o) => {
+      ctx.coreData.app.browserStatus = 'open'
+      o.sinon.stub(ctx.actions.project, 'initializeActiveProject')
+
+      let config = ctx.actions.file.readFileInProject('cypress.config.js')
+
+      config = config.replace(`  e2e: {`, `  e2e: {\n  baseUrl: 'https://example.cypress.io',\n`)
+      ctx.actions.file.writeFileInProject('cypress.config.js', config)
+    })
+
+    cy.get('[data-cy="loading-spinner"]').should('be.visible')
+    cy.contains('[role="alert"]', 'Loading')
+
+    cy.withRetryableCtx((ctx) => {
+      expect(ctx.actions.project.initializeActiveProject).to.be.called
+    })
+  })
 })
diff --git a/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts
@@ -31,6 +31,7 @@ describe('authChange subscription', () => {
 
     it('responds to authChange subscription for login', () => {
       cy.contains('Log In')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.login()
       })
@@ -42,6 +43,7 @@ describe('authChange subscription', () => {
       setActiveUser()
       cy.reload() // Reload to show the latest state
       cy.contains('Test User')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.logout()
       })
@@ -58,6 +60,7 @@ describe('authChange subscription', () => {
 
     it('responds to authChange subscription for login', () => {
       cy.contains('Log In')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.login()
       })
@@ -69,6 +72,7 @@ describe('authChange subscription', () => {
       setActiveUser()
       cy.reload() // Reload to show the latest state
       cy.contains('Test User')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.logout()
       })
@@ -84,6 +88,7 @@ describe('authChange subscription', () => {
 
     it('responds to authChange subscription for login', () => {
       cy.contains('Log In')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.login()
       })
@@ -95,6 +100,7 @@ describe('authChange subscription', () => {
       setActiveUser()
       cy.visitLaunchpad()
       cy.contains('Test User')
+      cy.wait(500)
       cy.withCtx(async (ctx) => {
         await ctx.actions.auth.logout()
       })

diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -226,6 +226,7 @@ describe('App Top Nav Workflows', () => {
           const oldFetch = ctx.util.fetch
 
           o.sinon.stub(ctx.util, 'fetch').callsFake(async (url: RequestInfo | URL, init?: RequestInit) => {
+            await new Promise((resolve) => setTimeout(resolve, 500))
             if (['https://download.cypress.io/desktop.json', 'https://registry.npmjs.org/cypress'].includes(String(url))) {
               throw new Error(String(url))
             }

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -73,9 +73,7 @@
     "wonka": "^4.0.15"
   },
   "files": [
-    "dist",
-    "lib",
-    "src"
+    "dist"
   ],
   "vite": {
     "optimizeDeps": {

diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -109,6 +109,25 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.percySnapshot()
   })
 
+  it('links to aut url', () => {
+    const autStore = useAutStore()
+    const url = 'http://localhost:3000/todo'
+
+    autStore.updateUrl(url)
+
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      onResult: (gql) => {
+        gql.currentTestingType = 'e2e'
+      },
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.contains(url).should('exist').should('have.attr', 'href', url)
+    cy.percySnapshot()
+  })
+
   it('does not show url section if currentTestingType is component', () => {
     const autStore = useAutStore()
 
@@ -208,4 +227,20 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     cy.percySnapshot()
   })
+
+  it('opens and closes selector playground', () => {
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('be.visible')
+
+    cy.percySnapshot()
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('not.exist')
+  })
 })
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -21,11 +21,15 @@
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
-        <div class="mr-12px max-w-100% grid text-gray-600 items-center truncate">
+        <a
+          target="_blank"
+          :href="autStore.url"
+          class="mr-12px leading-normal max-w-100% text-indigo-500 self-center hocus-link-default truncate"
+        >
           {{ autStore.url }}
-        </div>
+        </a>
       </div>
       <div
         v-else
@@ -34,12 +38,12 @@
         <Button
           data-cy="playground-activator"
           :disabled="isDisabled"
-          class="border-gray-100  mr-12px"
+          class="border-gray-100 mr-12px"
           variant="outline"
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
       </div>
       <SpecRunnerDropdown

diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
@@ -462,17 +462,16 @@ export class AutIframe {
     const $el = this.getElements(Cypress.dom)
 
     const selectorPlaygroundStore = useSelectorPlaygroundStore()
-    const command = `cy.${selectorPlaygroundStore.method}('${selectorPlaygroundStore.selector}')`
 
     if (!$el) {
       return logger.logFormatted({
-        Command: command,
+        Command: selectorPlaygroundStore.command,
         Yielded: 'Nothing',
       })
     }
 
     logger.logFormatted({
-      Command: command,
+      Command: selectorPlaygroundStore.command,
       Elements: $el.length,
       Yielded: Cypress.dom.getElements($el),
     })

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx b/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx
@@ -117,7 +117,7 @@ describe('SelectorPlayground', () => {
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copied!')
     cy.percySnapshot('Copy to clipboard click tooltip')
 
-    cy.wrap(copyStub).should('have.been.calledWith', '.foo-bar')
+    cy.wrap(copyStub).should('have.been.calledWith', 'cy.get(\'.foo-bar\')')
   })
 
   it('prints elements when selected elements found', () => {

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.vue b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
@@ -223,7 +223,7 @@ function printSelected () {
 
 const { copy } = useClipboard({ copiedDuring: 2000 })
 const copyToClipboard = () => {
-  copy(selector.value)
+  copy(selectorPlaygroundStore.command)
 }
 </script>
 

diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-transparent"
+    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-none"
     :data-cy="`row-directory-depth-${depth}`"
     :aria-expanded="expanded"
   >

diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
@@ -4,14 +4,14 @@
     data-cy="spec-item"
   >
     <i-cy-document-blank_x16
-      class="icon-light-gray-50 icon-dark-gray-200"
+      class="icon-light-gray-50 icon-dark-gray-200 group-hocus:icon-light-indigo-200 group-hocus:icon-dark-indigo-400"
     />
 
     <div class="text-gray-400 text-indigo-500 group-hocus:text-indigo-600">
       <HighlightedText
         :text="fileName"
         :indexes="indexes.filter((idx) => idx < fileName.length)"
-        class="font-medium text-indigo-500 group-hocus:text-indigo-600"
+        class="font-medium text-indigo-500 group-hocus:text-indigo-700"
         highlight-classes="text-gray-1000"
       />
       <HighlightedText