diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index b9518ab1b5..1a6097f1a2 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -5,6 +5,7 @@ _Released 2/25/2025 (PENDING)_ **Misc:** +- Viewport width, height, and scale now display in a badge above the application under test. The dropdown describing how to set viewport height and width has been removed from the UI. Additionally, component tests now show a notice about URL navigation being disabled in component tests. Addresses [#30999](https://github.com/cypress-io/cypress/issues/30999). Addressed in [#31119](https://github.com/cypress-io/cypress/pull/31119). - Updated types around `.readFile()` and `.scrollTo()` arguments and `Cypress.dom` methods. Addressed in [#31055](https://github.com/cypress-io/cypress/pull/31055). **Dependency Updates:** diff --git a/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts index ed9ebc5f3e..76972a6746 100644 --- a/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts +++ b/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts @@ -19,20 +19,13 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout: cy.waitForSpecToFinish() cy.get('[data-model-state="passed"]').should('contain', 'renders the test component') - cy.findByTestId('aut-url').should('not.exist') + cy.findByTestId('aut-url-input').should('be.disabled') cy.findByTestId('select-browser').click() cy.contains('Canary').should('be.visible') - cy.findByTestId('viewport').click() - // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435 // snapshotAUTPanel('browsers open') - cy.contains('Canary').should('be.hidden') - cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 500px by 500px for component testing.') - .should('be.visible') - - // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435 - // snapshotAUTPanel('viewport info open') + cy.findByTestId('viewport-size').should('be.visible') cy.get('body').click() diff --git a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts index 9311dfa158..dab7bf4d8f 100644 --- a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts +++ b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts @@ -23,7 +23,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout: cy.contains('Canary').should('be.visible') cy.findByTestId('select-browser').click() - cy.get('[data-cy="viewport"]').click() + cy.get('[data-cy="viewport-size"]').should('be.visible') cy.contains('Chrome 1') .focus() @@ -33,14 +33,6 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout: // snapshotAUTPanel('browsers open') cy.contains('Canary').should('be.hidden') - - cy.get('[data-cy="viewport"]').click() - cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 1000px by 660px for end-to-end testing.') - .should('be.visible') - - // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435 - // snapshotAUTPanel('viewport info open') - cy.get('body').click() cy.findByTestId('playground-activator').click() diff --git a/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts index a28d246d0a..588246d710 100644 --- a/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts +++ b/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts @@ -25,8 +25,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => { cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible') // confirm no interactions are implemented - cy.findByTestId('viewport').click() - cy.contains('The viewport determines').should('not.exist') + cy.findByTestId('viewport-size').should('be.visible') cy.contains('Chrome 1').click() cy.contains('Firefox').should('not.exist') @@ -41,7 +40,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => { cy.visitApp(`/specs/runner?file=src/TestComponent.spec.jsx&${CY_IN_CY_SIMULATE_RUN_MODE}`) cy.waitForSpecToFinish() - cy.findByTestId('aut-url').should('not.exist') + cy.findByTestId('aut-url').contains('URL navigation disabled in component testing').should('be.visible') cy.findByTestId('playground-activator').should('not.exist') cy.findByLabelText('Stats').within(() => { @@ -53,8 +52,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => { cy.contains('Chrome 1').should('be.visible') // confirm no interactions are implemented - cy.findByTestId('viewport').click() - cy.contains('The viewport determines').should('not.exist') + cy.findByTestId('viewport-size').should('be.visible') cy.contains('Chrome 1').click() cy.contains('Firefox').should('not.exist') diff --git a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts index 4f6756fc7a..0bfb8a2348 100644 --- a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts +++ b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts @@ -104,8 +104,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100 }) }) - // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23307 - it(`scales the AUT correctly in ${testingType}`, { retries: 15 }, () => { + it(`scales the AUT correctly in ${testingType}`, () => { const assertNoScaleShown = () => { // check that no message about scale % is shown, // meaning the AUT is at 100% scale @@ -216,7 +215,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100 cy.get('@selectBrowser') .should('be.visible') // now that we have reduced the specs list, we should be able to see this - cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`]).should('be.visible') + cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`]) }) it(`resets selector playground validity when selecting element with playground selector in ${testingType}`, () => { diff --git a/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts index 0837414d27..bbafc6dde6 100644 --- a/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts +++ b/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts @@ -55,7 +55,7 @@ describe('configChange subscription', () => { // wait until it has passed cy.get('[data-model-state="passed"]').should('contain', 'renders the test content') - cy.get('button').contains('1000x660') + cy.get('[data-cy="viewport-size"]').contains('1000x660') // update the config - the spec should re-execute with the new viewportHeight updateViewportHeightInCypressConfig(777) @@ -67,7 +67,7 @@ describe('configChange subscription', () => { cy.waitForSpecToFinish() cy.get('[data-model-state="passed"]').should('contain', 'renders the test content') - cy.get('button').contains('1000x777') + cy.get('[data-cy="viewport-size"]').contains('1000x777') }) }) }) diff --git a/packages/app/package.json b/packages/app/package.json index e3dc2d3e78..23ef88822f 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -27,6 +27,7 @@ "@cypress-design/vue-icon": "^1.6.0", "@cypress-design/vue-statusicon": "^1.0.0", "@cypress-design/vue-tabs": "^1.2.2", + "@cypress-design/vue-tag": "^1.0.1", "@cypress/mount-utils": "0.0.0-development", "@faker-js/faker": "8.4.1", "@graphql-typed-document-node/core": "^3.1.0", diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx index 727bfc7dc7..9007571ef3 100644 --- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx +++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx @@ -32,7 +32,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl) cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') + cy.findByTestId('viewport-size').should('be.visible').contains('500x500') }) it('disabled selector playground button when isRunning is true', () => { @@ -47,9 +47,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }) cy.get('[data-cy="playground-activator"]').should('be.disabled') - cy.findByTestId('aut-url-input').should('be.visible') - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') }) it('disabled selector playground button when isLoading is true', () => { @@ -64,9 +61,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }) cy.get('[data-cy="playground-activator"]').should('be.disabled') - cy.findByTestId('aut-url-input').should('be.visible') - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') }) it('enables selector playground button by default', () => { @@ -77,9 +71,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }) cy.get('[data-cy="playground-activator"]').should('not.be.disabled') - cy.findByTestId('aut-url-input').should('be.visible') - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') }) it('shows url section if currentTestingType is e2e', () => { @@ -99,8 +90,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.get('[data-cy="aut-url"]').should('exist') cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl) - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') + cy.findByTestId('viewport-size').should('be.visible').contains('500x500') }) it('url section handles long url/small viewport', { @@ -123,7 +113,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.get('[data-cy="aut-url"]').should('exist') cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl) cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') + cy.findByTestId('viewport-size').should('be.visible').contains('500x500') cy.percySnapshot() }) @@ -143,8 +133,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }) cy.findByTestId('aut-url-input').invoke('val').should('contain', autUrl) - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') }) it('opens aut url externally', () => { @@ -176,7 +164,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.wrap(openExternalStub).should('have.been.calledWith', 'http://localhost:3000/todo') }) - it('does not show url section if currentTestingType is component', () => { + it('disables url section if currentTestingType is component', () => { const autStore = useAutStore() autStore.updateUrl('http://localhost:3000') @@ -191,9 +179,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }) cy.findByTestId('playground-activator').should('be.visible') - cy.findByTestId('aut-url').should('not.exist') - cy.findByTestId('select-browser').should('be.visible').contains('Electron 73') - cy.findByTestId('viewport').should('be.visible').contains('500x500') + cy.findByTestId('aut-url-input').should('be.disabled') + cy.findByTestId('aut-url-input').should('have.prop', 'placeholder', 'URL navigation disabled in component testing') + cy.findByTestId('viewport-size').should('be.visible').contains('500x500') }) it('shows current browser and possible browsers', () => { @@ -228,7 +216,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.findByTestId('select-browser').contains('Fake Browser') cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data) - cy.findByTestId('viewport').contains('500x500') }) it('shows current viewport info', () => { @@ -241,39 +228,25 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { }, }) - cy.get('[data-cy="viewport"]').click() - cy.contains('The viewport determines').should('be.visible') - cy.contains('Additionally, you can override this value in your cypress.config.js or via the cy.viewport() command.') - .should('be.visible') - - cy.get('[data-cy="viewport"]').click() - cy.contains('The viewport determines').should('be.hidden') - cy.get('[data-cy="viewport"] button').focus().type(' ') - cy.contains('The viewport determines').should('be.visible') - cy.get('[data-cy="viewport"] button').focus().type('{enter}') - cy.contains('The viewport determines').should('be.hidden') + cy.get('[data-cy="viewport-size"]').contains('500x500') }) - it('links to the viewport docs', () => { + it('shows scale % in viewport info', () => { + const autStore = useAutStore() + + autStore.setScale(0.4) + autStore.updateUrl('http://localhost:3000/todo') cy.mountFragment(SpecRunnerHeaderFragmentDoc, { render: (gqlVal) => { return renderWithGql({ ...gqlVal, - currentTestingType: 'e2e', + configFile: 'cypress.config.js', }) }, }) - cy.findByTestId('viewport').click() - cy.findByTestId('viewport-docs') - .should('be.visible') - .should('have.attr', 'href', 'https://on.cypress.io/viewport') - - cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 500px by 500px for end-to-end testing.') - cy.contains('Additionally, you can override this value in your cypress.config.ts or via the cy.viewport() command.') - .should('be.visible') - - cy.findByTestId('viewport-docs').should('have.attr', 'href', 'https://on.cypress.io/viewport') + cy.get('[data-cy="viewport-scale"]').contains('40%') + cy.percySnapshot() }) it('disables browser dropdown button when isRunning is true', () => { @@ -292,8 +265,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => { cy.findByTestId('select-browser').should('be.visible').contains('Chrome 78') cy.get('[data-cy="select-browser"] > button').should('be.disabled') - cy.findByTestId('aut-url').should('be.visible') - cy.findByTestId('viewport').should('be.visible').contains('500x500') }) it('opens and closes selector playground', () => { diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue index df1435a01b..09631645be 100644 --- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue +++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue @@ -6,7 +6,6 @@ >
- + + + {{ autStore.viewportWidth }}x{{ + autStore.viewportHeight + }} + + + + {{ displayScale }} + +
-
- -
- - - -
autStore.isRunning || autStore.isLoading) +const urlDisabled = computed(() => props.gql.currentTestingType === 'component') + +const inputPlaceholder = computed(() => props.gql.currentTestingType === 'e2e' ? '' : 'URL navigation disabled in component testing') + +const inputValue = computed(() => { + if (props.gql.currentTestingType === 'component') { + return '' + } + + return studioStore.needsUrl ? urlInProgress.value : autUrl.value +}) + const openExternal = useExternalLink() function setStudioUrl (event: Event) { @@ -276,3 +239,13 @@ function openExternally () { openExternal(autStore.url) } + + diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx index 7359c6a0e3..e6d17ab16a 100644 --- a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx +++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx @@ -15,6 +15,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => { const autStore = useAutStore() autStore.updateUrl('http://localhost:4000') + autStore.setScale(0.4) cy.mount() @@ -22,12 +23,11 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => { cy.get('[data-cy="playground-activator"]').should('not.exist') // confirm expected content is rendered cy.contains('1000x660').should('be.visible') + cy.contains('40%').should('be.visible') cy.contains('Chrome 1').should('be.visible') cy.contains('http://localhost:4000').should('be.visible') // confirm no interactions are implemented - cy.get('[data-cy="viewport"]').click() - cy.contains('The viewport determines').should('not.exist') cy.contains('Chrome 1').click() cy.contains('Firefox').should('not.exist') @@ -42,18 +42,18 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => { const autStore = useAutStore() autStore.updateUrl('http://localhost:4000') + autStore.setScale(0.4) cy.mount() - cy.get('[data-cy="aut-url"]').should('not.exist') + cy.contains('URL navigation disabled in component testing').should('be.visible') cy.get('[data-cy="playground-activator"]').should('not.exist') // confirm expected content is rendered cy.contains('500x500').should('be.visible') + cy.contains('40%').should('be.visible') cy.contains('Chrome 1').should('be.visible') // confirm no interactions are implemented - cy.get('[data-cy="viewport"]').click() - cy.contains('The viewport determines').should('not.exist') cy.contains('Chrome 1').click() cy.contains('Firefox').should('not.exist') }) diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue index ed2ba47817..caf6109553 100644 --- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue +++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue @@ -7,22 +7,36 @@
-
- {{ autStore.url }} +
+ {{ testingType === 'e2e' ? autStore.url : 'URL navigation disabled in component testing' }}
-
-
- + + {{ autStore.viewportWidth }}x{{ + autStore.viewportHeight + }} + + + + {{ displayScale }} + +
{{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }} - - - -
@@ -57,6 +59,7 @@