Skip to content

Commit 7012f11

Browse files
jennifer-shehanejennifer-shehane
authored
misc: Display viewport info in badge, remove dropdown explanation of viewport dimensions (#31119)
* misc: Begin code for moving viewport dimensions and removing dropdown * Update styles for viewport size + scale and handle component testing views * add changelog * fix changelog link * fix issue link again! * Fix e2e tests * Fix incorrect selector
1 parent 01e32fb commit 7012f11

12 files changed

+116
-180
lines changed

‎cli/CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ _Released 2/25/2025 (PENDING)_
55

66
**Misc:**
77

8+
- 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).
89
- Updated types around `.readFile()` and `.scrollTo()` arguments and `Cypress.dom` methods. Addressed in [#31055](https://github.com/cypress-io/cypress/pull/31055).
910

1011
**Dependency Updates:**

‎packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

+2-9
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,13 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
1919
cy.waitForSpecToFinish()
2020
cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
2121

22-
cy.findByTestId('aut-url').should('not.exist')
22+
cy.findByTestId('aut-url-input').should('be.disabled')
2323
cy.findByTestId('select-browser').click()
2424

2525
cy.contains('Canary').should('be.visible')
26-
cy.findByTestId('viewport').click()
27-
2826
// TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
2927
// snapshotAUTPanel('browsers open')
30-
cy.contains('Canary').should('be.hidden')
31-
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.')
32-
.should('be.visible')
33-
34-
// TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
35-
// snapshotAUTPanel('viewport info open')
28+
cy.findByTestId('viewport-size').should('be.visible')
3629

3730
cy.get('body').click()
3831

‎packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
2323

2424
cy.contains('Canary').should('be.visible')
2525
cy.findByTestId('select-browser').click()
26-
cy.get('[data-cy="viewport"]').click()
26+
cy.get('[data-cy="viewport-size"]').should('be.visible')
2727

2828
cy.contains('Chrome 1')
2929
.focus()
@@ -33,14 +33,6 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
3333
// snapshotAUTPanel('browsers open')
3434

3535
cy.contains('Canary').should('be.hidden')
36-
37-
cy.get('[data-cy="viewport"]').click()
38-
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.')
39-
.should('be.visible')
40-
41-
// TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
42-
// snapshotAUTPanel('viewport info open')
43-
4436
cy.get('body').click()
4537

4638
cy.findByTestId('playground-activator').click()

‎packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
2525
cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
2626

2727
// confirm no interactions are implemented
28-
cy.findByTestId('viewport').click()
29-
cy.contains('The viewport determines').should('not.exist')
28+
cy.findByTestId('viewport-size').should('be.visible')
3029
cy.contains('Chrome 1').click()
3130
cy.contains('Firefox').should('not.exist')
3231

@@ -41,7 +40,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
4140
cy.visitApp(`/specs/runner?file=src/TestComponent.spec.jsx&${CY_IN_CY_SIMULATE_RUN_MODE}`)
4241

4342
cy.waitForSpecToFinish()
44-
cy.findByTestId('aut-url').should('not.exist')
43+
cy.findByTestId('aut-url').contains('URL navigation disabled in component testing').should('be.visible')
4544
cy.findByTestId('playground-activator').should('not.exist')
4645

4746
cy.findByLabelText('Stats').within(() => {
@@ -53,8 +52,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
5352
cy.contains('Chrome 1').should('be.visible')
5453

5554
// confirm no interactions are implemented
56-
cy.findByTestId('viewport').click()
57-
cy.contains('The viewport determines').should('not.exist')
55+
cy.findByTestId('viewport-size').should('be.visible')
5856
cy.contains('Chrome 1').click()
5957
cy.contains('Firefox').should('not.exist')
6058

‎packages/app/cypress/e2e/cypress-in-cypress.cy.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
104104
})
105105
})
106106

107-
// TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23307
108-
it(`scales the AUT correctly in ${testingType}`, { retries: 15 }, () => {
107+
it(`scales the AUT correctly in ${testingType}`, () => {
109108
const assertNoScaleShown = () => {
110109
// check that no message about scale % is shown,
111110
// meaning the AUT is at 100% scale
@@ -216,7 +215,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
216215
cy.get('@selectBrowser')
217216
.should('be.visible') // now that we have reduced the specs list, we should be able to see this
218217

219-
cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`]).should('be.visible')
218+
cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`])
220219
})
221220

222221
it(`resets selector playground validity when selecting element with playground selector in ${testingType}`, () => {

‎packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ describe('configChange subscription', () => {
5555

5656
// wait until it has passed
5757
cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
58-
cy.get('button').contains('1000x660')
58+
cy.get('[data-cy="viewport-size"]').contains('1000x660')
5959

6060
// update the config - the spec should re-execute with the new viewportHeight
6161
updateViewportHeightInCypressConfig(777)
@@ -67,7 +67,7 @@ describe('configChange subscription', () => {
6767

6868
cy.waitForSpecToFinish()
6969
cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
70-
cy.get('button').contains('1000x777')
70+
cy.get('[data-cy="viewport-size"]').contains('1000x777')
7171
})
7272
})
7373
})

‎packages/app/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@cypress-design/vue-icon": "^1.6.0",
2828
"@cypress-design/vue-statusicon": "^1.0.0",
2929
"@cypress-design/vue-tabs": "^1.2.2",
30+
"@cypress-design/vue-tag": "^1.0.1",
3031
"@cypress/mount-utils": "0.0.0-development",
3132
"@faker-js/faker": "8.4.1",
3233
"@graphql-typed-document-node/core": "^3.1.0",

‎packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx

+16-45
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
3232

3333
cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
3434
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
35-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
35+
cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
3636
})
3737

3838
it('disabled selector playground button when isRunning is true', () => {
@@ -47,9 +47,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
4747
})
4848

4949
cy.get('[data-cy="playground-activator"]').should('be.disabled')
50-
cy.findByTestId('aut-url-input').should('be.visible')
51-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
52-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
5350
})
5451

5552
it('disabled selector playground button when isLoading is true', () => {
@@ -64,9 +61,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
6461
})
6562

6663
cy.get('[data-cy="playground-activator"]').should('be.disabled')
67-
cy.findByTestId('aut-url-input').should('be.visible')
68-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
69-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
7064
})
7165

7266
it('enables selector playground button by default', () => {
@@ -77,9 +71,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
7771
})
7872

7973
cy.get('[data-cy="playground-activator"]').should('not.be.disabled')
80-
cy.findByTestId('aut-url-input').should('be.visible')
81-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
82-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
8374
})
8475

8576
it('shows url section if currentTestingType is e2e', () => {
@@ -99,8 +90,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
9990

10091
cy.get('[data-cy="aut-url"]').should('exist')
10192
cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
102-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
103-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
93+
cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
10494
})
10595

10696
it('url section handles long url/small viewport', {
@@ -123,7 +113,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
123113
cy.get('[data-cy="aut-url"]').should('exist')
124114
cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
125115
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
126-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
116+
cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
127117
cy.percySnapshot()
128118
})
129119

@@ -143,8 +133,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
143133
})
144134

145135
cy.findByTestId('aut-url-input').invoke('val').should('contain', autUrl)
146-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
147-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
148136
})
149137

150138
it('opens aut url externally', () => {
@@ -176,7 +164,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
176164
cy.wrap(openExternalStub).should('have.been.calledWith', 'http://localhost:3000/todo')
177165
})
178166

179-
it('does not show url section if currentTestingType is component', () => {
167+
it('disables url section if currentTestingType is component', () => {
180168
const autStore = useAutStore()
181169

182170
autStore.updateUrl('http://localhost:3000')
@@ -191,9 +179,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
191179
})
192180

193181
cy.findByTestId('playground-activator').should('be.visible')
194-
cy.findByTestId('aut-url').should('not.exist')
195-
cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
196-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
182+
cy.findByTestId('aut-url-input').should('be.disabled')
183+
cy.findByTestId('aut-url-input').should('have.prop', 'placeholder', 'URL navigation disabled in component testing')
184+
cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
197185
})
198186

199187
it('shows current browser and possible browsers', () => {
@@ -228,7 +216,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
228216
cy.findByTestId('select-browser').contains('Fake Browser')
229217

230218
cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
231-
cy.findByTestId('viewport').contains('500x500')
232219
})
233220

234221
it('shows current viewport info', () => {
@@ -241,39 +228,25 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
241228
},
242229
})
243230

244-
cy.get('[data-cy="viewport"]').click()
245-
cy.contains('The viewport determines').should('be.visible')
246-
cy.contains('Additionally, you can override this value in your cypress.config.js or via the cy.viewport() command.')
247-
.should('be.visible')
248-
249-
cy.get('[data-cy="viewport"]').click()
250-
cy.contains('The viewport determines').should('be.hidden')
251-
cy.get('[data-cy="viewport"] button').focus().type(' ')
252-
cy.contains('The viewport determines').should('be.visible')
253-
cy.get('[data-cy="viewport"] button').focus().type('{enter}')
254-
cy.contains('The viewport determines').should('be.hidden')
231+
cy.get('[data-cy="viewport-size"]').contains('500x500')
255232
})
256233

257-
it('links to the viewport docs', () => {
234+
it('shows scale % in viewport info', () => {
235+
const autStore = useAutStore()
236+
237+
autStore.setScale(0.4)
238+
autStore.updateUrl('http://localhost:3000/todo')
258239
cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
259240
render: (gqlVal) => {
260241
return renderWithGql({
261242
...gqlVal,
262-
currentTestingType: 'e2e',
243+
configFile: 'cypress.config.js',
263244
})
264245
},
265246
})
266247

267-
cy.findByTestId('viewport').click()
268-
cy.findByTestId('viewport-docs')
269-
.should('be.visible')
270-
.should('have.attr', 'href', 'https://on.cypress.io/viewport')
271-
272-
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.')
273-
cy.contains('Additionally, you can override this value in your cypress.config.ts or via the cy.viewport() command.')
274-
.should('be.visible')
275-
276-
cy.findByTestId('viewport-docs').should('have.attr', 'href', 'https://on.cypress.io/viewport')
248+
cy.get('[data-cy="viewport-scale"]').contains('40%')
249+
cy.percySnapshot()
277250
})
278251

279252
it('disables browser dropdown button when isRunning is true', () => {
@@ -292,8 +265,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
292265

293266
cy.findByTestId('select-browser').should('be.visible').contains('Chrome 78')
294267
cy.get('[data-cy="select-browser"] > button').should('be.disabled')
295-
cy.findByTestId('aut-url').should('be.visible')
296-
cy.findByTestId('viewport').should('be.visible').contains('500x500')
297268
})
298269

299270
it('opens and closes selector playground', () => {

0 commit comments

Comments
 (0)