Skip to content
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

misc: Move browser dropdown within AUT URL bar #31216

Open
wants to merge 30 commits into
base: develop
Choose a base branch
from

Conversation

jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Mar 4, 2025

Additional details

  • The browser dropdown above the AUT now displays to the left of the URL area, with just a preview of the browser icon.
  • The currently selected browser now displays at the top of the list so one can easily see the selected version.
  • Long browser names now left align properly.

Steps to test

  • Run yarn cypress:open in the packages/app directory
  • Test in open mode and run mode (headed)
  • Test in e2e and CT testing types
  • Ensure browser dropdown is disabled while tests are running
  • Check percy screenshots - I reviewed them, but left them unapproved

How has the user experience changed?

Before

Screenshot 2025-03-04 at 3 25 36 PM
Screenshot 2025-03-04 at 3 25 44 PM

After

Screenshot 2025-03-04 at 2 53 26 PM
Screenshot 2025-03-04 at 2 53 08 PM

Automation Missing error did not change much

Screenshot 2025-03-10 at 12 53 27 PM

PR Tasks

@jennifer-shehane jennifer-shehane self-assigned this Mar 4, 2025
Copy link

cypress bot commented Mar 4, 2025

cypress    Run #60833

Run Properties:  status check passed Passed #60833  •  git commit 6a49184966: Merge branch 'browser-dropdown-ux-update' of https://github.com/cypress-io/cypre...
Project cypress
Branch Review browser-dropdown-ux-update
Run status status check passed Passed #60833
Run duration 18m 18s
Commit git commit 6a49184966: Merge branch 'browser-dropdown-ux-update' of https://github.com/cypress-io/cypre...
Committer Jennifer Shehane
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 10
Tests that did not run due to a developer annotating a test with .skip  Pending 1232
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 32102
View all changes introduced in this branch ↗︎
UI Coverage  46.57%
  Untested elements 182  
  Tested elements 163  
Accessibility  92.57%
  Failed rules  3 critical   8 serious   2 moderate   2 minor
  Failed elements 885  

@@ -151,7 +151,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
})

it('shows a compilation error with a malformed spec', { viewportHeight: 596, viewportWidth: 1000 }, () => {
const expectedAutHeight = 456 // based on explicitly setting viewport in this test to 596
const expectedAutHeight = 500 // based on explicitly setting viewport in this test to 596
Copy link
Member Author

Choose a reason for hiding this comment

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

This has legitimately changed, previously the browser dropdown at this width was lessening the AUT height.
Screenshot 2025-03-05 at 12 10 26 PM

Screenshot 2025-03-05 at 12 10 37 PM

@@ -128,7 +128,7 @@ export const longBrowsersList = [
majorVersion: '69',
Copy link
Member Author

Choose a reason for hiding this comment

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

Not really necessary changes, but these mocks seem more realisitic

@@ -1,3 +1,4 @@
<!-- Be careful with changing styles of the panels, it can impact our screenshot tests -->
Copy link
Member Author

Choose a reason for hiding this comment

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

lesson learned.......

@jennifer-shehane jennifer-shehane removed the request for review from cacieprins March 10, 2025 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant