Skip to content

internal: Update URL styles, disabled state, and viewport tag styling #32109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: release/15.0.0
Choose a base branch
from

Conversation

jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Jul 25, 2025

Figma

Additional details

This change addresses a few things:

  • the lack of clear visual feedback for the .aut-url-input when it is active or focused.
  • adds a placeholder for when a URL is needed - to further highlight they need to type there.
  • the tag components of the AUT viewport size/percentage not matching the Figma design
  • the AUT URL not being disabled when outside of Studio
  • cleanup of dead code - the old Studio URL prompt which will no longer be available to users.

Steps to test

  1. Open the Cypress App in Open Mode.
  2. Navigate to the Spec Runner.
  3. Click or tab into the URL input field in the header.
  4. Observe the new active/focused state styling.

How has the user experience changed?

Default with no URL

Screenshot 2025-07-28 at 2 20 06 PM

Default with URL (disabled)

Screenshot 2025-07-28 at 2 20 56 PM

Hover state

Screenshot 2025-07-28 at 2 59 07 PM

Focus when Studio Needs Url

Screenshot 2025-07-28 at 2 08 43 PM

Focus when URL entered

Screenshot 2025-07-28 at 2 20 47 PM

PR Tasks

@CLAassistant
Copy link

CLAassistant commented Jul 25, 2025

CLA assistant check
All committers have signed the CLA.

Copy link

cypress bot commented Jul 25, 2025

cypress    Run #64197

Run Properties:  status check failed Failed #64197  •  git commit 1adab4d46c: only use readonly
Project cypress
Branch Review cursor/update-url-input-active-styles-84a4
Run status status check failed Failed #64197
Run duration 19m 21s
Commit git commit 1adab4d46c: only use readonly
Committer Jennifer Shehane
View all properties for this run ↗︎

Test results
Tests that failed  Failures 3
Tests that were flaky  Flaky 9
Tests that did not run due to a developer annotating a test with .skip  Pending 1102
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 26506
View all changes introduced in this branch ↗︎
UI Coverage  45.11%
  Untested elements 186  
  Tested elements 157  
Accessibility  97.7%
  Failed rules  4 critical   8 serious   2 moderate   2 minor
  Failed elements 109  

Tests for review

Failed  cypress/e2e/studio/studio.cy.ts • 1 failed test • app-e2e

View Output

Test Artifacts
Cypress Studio > remains in studio mode when the test name is changed on the file system and file watching is disabled Test Replay Screenshots
Failed  cypress/e2e/cypress-in-cypress-component.cy.ts • 1 failed test • app-e2e

View Output

Test Artifacts
Cypress In Cypress CT > default config > test component Test Replay Screenshots
Failed  src/components/Collapsible.cy.tsx • 1 failed test • frontend-shared-ct

View Output

Test Artifacts
An uncaught error was detected outside of a test Test Replay
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Test Replay Screenshots
Flakiness  e2e/e2e_cookies.cy.js • 1 flaky test • 5x-driver-chrome

View Output

Test Artifacts
e2e cookies spec > __Host- prefix > can set __Host- cookie Test Replay
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Test Replay Screenshots
Flakiness  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts
... > stops waiting when an xhr request is canceled
    </td>
  </tr></table>
Flakiness  commands/files.cy.js • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts
src/cy/commands/files > #readFile > retries to read when ENOENT
    </td>
  </tr></table>

The first 5 flaky specs are shown, see all 9 specs in Cypress Cloud.

@jennifer-shehane jennifer-shehane changed the title Update url input active styles internal: Update url input active styles Jul 25, 2025
@jennifer-shehane jennifer-shehane self-assigned this Jul 28, 2025
@jennifer-shehane jennifer-shehane changed the title internal: Update url input active styles internal: Update URL styles, disabled state, and viewport tag styling Jul 28, 2025
@@ -1,43 +0,0 @@
import StudioUrlPrompt from './StudioUrlPrompt.vue'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Old Studio Prompt URL with the popover/overlay


it('does not display', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant test and it's not describing what it's actually testing?!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants