chore: fix minor background color styling in debug results component #26887

astone123 · 2023-05-31T05:00:03Z

Additional details

I noticed when using the debug page that if you hover over a run inside of the dropdown list for "switch to run" that has flaky tests, you'll see that the hover background doesn't show in the gap between the test results and the flaky badge. This is because that entire div has a white background.

Steps to test

Check out a branch with multiple Cypress runs on the same branch, one of them must have at least one flaky test
Navigate to the debug page and click the "switch run" dropdown at the top of the page
Hover over the run with a flaky badge

How has the user experience changed?

Before

After

PR Tasks

[na] Have tests been added/updated?
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?

warrensplayer

In DebugRunNavigationRow, the background for the DebugResults was getting set to white. This can probably be removed with these changes:

cypress/packages/app/src/debug/DebugRunNavigationRow.vue

Line 32 in 1e67eae

class="bg-white"

cypress · 2023-05-31T16:47:19Z

25 flaky tests on run #46866 ↗︎

0	27304	1308	0	25

Details:

add back transparent background
Project: cypress	Commit: `264419981c`
Status: Passed	Duration: 19:51 💡
Started: May 31, 2023 5:24 PM	Ended: May 31, 2023 5:44 PM

specs_list_latest_runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		`Output` `Screenshots` `Video`

cypress-origin-communicator.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
Cypress In Cypress Origin Communicator > cy.origin passivity with app interactions > passes upon test reload mid test execution		`Output` `Screenshots` `Video`

project-setup.cy.ts • 1 flaky test • launchpad-e2e

View Output Video

Test		Artifacts
... > can setup e2e testing for a project selecting JS		`Output` `Screenshots` `Video`

cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test		Artifacts
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`

commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		`Output` `Video`

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

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

mike-plummer

Nice catch! Makes me 😢 no percy snapshots were impacted by this fix, though

* chore: add Nx Cloud (#26712) * chore: add empty nx.json [run ci] * chore: add nx cloud runner [run ci] * chore: add nx-cloud dep [run ci] * chore: update local nx cloud accessToken to be read-only * feat: update git related messages for runs and debug (#26758) * feat(app): update DebugError copy * feat: set isUsingGit project flag and consume in DebugContainer * feat(app): update not using git icon for DebugError * feat(app): displays alert on runs page when not using git * feat(app): add component for when no runs for current branch * feat(app): add warning for no runs for branch on runs container * chore: add feat to CHANGELOG * chore: remove logged status value * chore: resolve import from merge conflict * test(app): stub branch name for e2e runs spec * chore: add line break in changelog entry * chore: cleanup PR * chore: fix i18n import for DebugBranchError * chore: add utm and update Warning links to inline * chore: capitalize Git in i18n * ref: warning liink * test: add i18n to tests * test(app): change utm_source assertions * chore: cleanup pr * chore: remove unused prop * test(app): remove no git warning when moving to runs page in e2e * chore: change template logic * chore: remove duplicate RUNS_TAB_MEDIUM const * Changed Debug test assertion and reordered new components for Debug --------- Co-authored-by: Stokes Player <stokes.player@gmail.com> * chore: rename video processing events to capture/compress (#26800) * chore: change processing nomenclature to compressing when printing the run. * chore: rename 'capturing of' to 'capturing' * chore: rename upload results to upload screenshots & videos (#26811) * chore: rename upload results to upload screenshots & videos * run ci * chore: capture versions of relevant dependencies with `x-dependencies` header (#26814) * chore: update changlelog script to handle revert pr ref (#26801) * fix: Correct typescript scaffold dependency (#26815) * fix: correct typescript scaffold dependency (#26204) * add changelog * Update change log for PR comment Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> --------- Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> Co-authored-by: Mark Noonan <mark@cypress.io> * chore: 12.13.0 prep (#26833) * chore: 12.13.0 release (#26834) * chore: 12.13.0 changelog fix * remove pending, bump version * fix typo * chore: release @cypress/vite-plugin-cypress-esm-v1.0.1 [skip ci] * chore: Implement runSpec mutation (#26782) * chore: replace gitter badge with discord on readme (#26771) * chore: add GraphQL mutation for sending system notifications via Electron (#26773) * fix: upgrade typescript from 4.7.4 to 4.9.5 (#26826) Snyk has created this PR to upgrade typescript from 4.7.4 to 4.9.5. See this package in npm: See this project in Snyk: https://app.snyk.io/org/cypress-opensource/project/d5b36925-e6ee-455d-9649-6560a9aca413?utm_source=github&utm_medium=referral&page=upgrade-pr * test: fix 2 broken tests for Windows (#26854) * Update stale_issues_and_pr_cleanup.yml Upped the number of operations per run. Have been manually doing that so this job can get through all the issues in the repo with no problems. * chore(dep): [Snyk] Upgrade vite from 2.9.13 to 2.9.15 (#26830) Co-authored-by: Ben M <benm@cypress.io> * Update triage_add_to_project.yml * chore: fix minor background color styling in debug results component (#26887) * Update stale_issues_and_pr_cleanup.yml stalebot was incorrectly configured to run in debug mode. I have updated the default to run in normal mode when running scheduled * chore: Deprecate @cypress/xpath package (#26893) * chore: add telemetry realworld app (#26896) * chore: capture telemetry for realworld app maybe * idk what i was doing * setup record key and telemetry * testing * override project id * some times we just need a little context. * Adding tests * Adding comment * fix yarn lock * Trying this.... * fix tests? --------- Co-authored-by: Jordan <jordan@jpdesigning.com> Co-authored-by: Stokes Player <stokes.player@gmail.com> Co-authored-by: Bill Glesias <bglesias@gmail.com> Co-authored-by: Adam Stone-Lord <adams@cypress.io> Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com> Co-authored-by: Dave Kasper <dave.m.kasper@gmail.com> Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> Co-authored-by: Mark Noonan <mark@cypress.io> Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com> Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Ely Lucas <ely@meta-tek.net> Co-authored-by: Snyk bot <snyk-bot@snyk.io> Co-authored-by: Stokes Player <stokes@cypress.io> Co-authored-by: Ben M <benm@cypress.io> Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

* chore: add Nx Cloud (#26712) * chore: add empty nx.json [run ci] * chore: add nx cloud runner [run ci] * chore: add nx-cloud dep [run ci] * chore: update local nx cloud accessToken to be read-only * feat: update git related messages for runs and debug (#26758) * feat(app): update DebugError copy * feat: set isUsingGit project flag and consume in DebugContainer * feat(app): update not using git icon for DebugError * feat(app): displays alert on runs page when not using git * feat(app): add component for when no runs for current branch * feat(app): add warning for no runs for branch on runs container * chore: add feat to CHANGELOG * chore: remove logged status value * chore: resolve import from merge conflict * test(app): stub branch name for e2e runs spec * chore: add line break in changelog entry * chore: cleanup PR * chore: fix i18n import for DebugBranchError * chore: add utm and update Warning links to inline * chore: capitalize Git in i18n * ref: warning liink * test: add i18n to tests * test(app): change utm_source assertions * chore: cleanup pr * chore: remove unused prop * test(app): remove no git warning when moving to runs page in e2e * chore: change template logic * chore: remove duplicate RUNS_TAB_MEDIUM const * Changed Debug test assertion and reordered new components for Debug --------- Co-authored-by: Stokes Player <stokes.player@gmail.com> * chore: rename video processing events to capture/compress (#26800) * chore: change processing nomenclature to compressing when printing the run. * chore: rename 'capturing of' to 'capturing' * chore: rename upload results to upload screenshots & videos (#26811) * chore: rename upload results to upload screenshots & videos * run ci * chore: capture versions of relevant dependencies with `x-dependencies` header (#26814) * chore: update changlelog script to handle revert pr ref (#26801) * fix: Correct typescript scaffold dependency (#26815) * fix: correct typescript scaffold dependency (#26204) * add changelog * Update change log for PR comment Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> --------- Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> Co-authored-by: Mark Noonan <mark@cypress.io> * chore: 12.13.0 prep (#26833) * chore: 12.13.0 release (#26834) * chore: 12.13.0 changelog fix * remove pending, bump version * fix typo * chore: release @cypress/vite-plugin-cypress-esm-v1.0.1 [skip ci] * chore: Implement runSpec mutation (#26782) * chore: replace gitter badge with discord on readme (#26771) * chore: add GraphQL mutation for sending system notifications via Electron (#26773) * fix: upgrade typescript from 4.7.4 to 4.9.5 (#26826) Snyk has created this PR to upgrade typescript from 4.7.4 to 4.9.5. See this package in npm: See this project in Snyk: https://app.snyk.io/org/cypress-opensource/project/d5b36925-e6ee-455d-9649-6560a9aca413?utm_source=github&utm_medium=referral&page=upgrade-pr * test: fix 2 broken tests for Windows (#26854) * Update stale_issues_and_pr_cleanup.yml Upped the number of operations per run. Have been manually doing that so this job can get through all the issues in the repo with no problems. * chore(dep): [Snyk] Upgrade vite from 2.9.13 to 2.9.15 (#26830) Co-authored-by: Ben M <benm@cypress.io> * Update triage_add_to_project.yml * chore: fix minor background color styling in debug results component (#26887) * Update stale_issues_and_pr_cleanup.yml stalebot was incorrectly configured to run in debug mode. I have updated the default to run in normal mode when running scheduled * chore: Deprecate @cypress/xpath package (#26893) * chore: add telemetry realworld app (#26896) * chore: capture telemetry for realworld app maybe * idk what i was doing * setup record key and telemetry * testing * override project id * some times we just need a little context. * Adding tests * Adding comment * chore(deps): update dependency find-process to v1.4.7 🌟 (#26906) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> * chore(deps): update dependency firefox-profile to v4.3.2 🌟 (#26912) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> --------- Co-authored-by: Jordan <jordan@jpdesigning.com> Co-authored-by: Stokes Player <stokes.player@gmail.com> Co-authored-by: Bill Glesias <bglesias@gmail.com> Co-authored-by: Adam Stone-Lord <adams@cypress.io> Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com> Co-authored-by: Dave Kasper <dave.m.kasper@gmail.com> Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> Co-authored-by: Mark Noonan <mark@cypress.io> Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com> Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Ely Lucas <ely@meta-tek.net> Co-authored-by: Snyk bot <snyk-bot@snyk.io> Co-authored-by: Stokes Player <stokes@cypress.io> Co-authored-by: Ben M <benm@cypress.io> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

cypress-bot · 2023-06-07T17:26:18Z

Released in 12.14.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.14.0, please open a new issue.

chore: fix background color styling in debug results component

be3d146

astone123 self-assigned this May 31, 2023

astone123 requested review from warrensplayer and dkasper-was-taken May 31, 2023 05:00

warrensplayer requested changes May 31, 2023

View reviewed changes

remove white background

533bac4

add back transparent background

2644199

astone123 requested a review from warrensplayer May 31, 2023 17:25

mike-plummer approved these changes May 31, 2023

View reviewed changes

warrensplayer approved these changes May 31, 2023

View reviewed changes

astone123 merged commit bafabf9 into develop May 31, 2023
74 of 78 checks passed

astone123 deleted the debug-results-styling branch May 31, 2023 21:56

cypress-bot bot locked as resolved and limited conversation to collaborators Jun 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: fix minor background color styling in debug results component #26887

chore: fix minor background color styling in debug results component #26887

astone123 commented May 31, 2023 •

edited

Loading

warrensplayer left a comment

cypress bot commented May 31, 2023 •

edited

Loading

mike-plummer left a comment

cypress-bot bot commented Jun 7, 2023

chore: fix minor background color styling in debug results component #26887

chore: fix minor background color styling in debug results component #26887

Conversation

astone123 commented May 31, 2023 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

warrensplayer left a comment

Choose a reason for hiding this comment

cypress bot commented May 31, 2023 • edited Loading

25 flaky tests on run #46866 ↗︎

mike-plummer left a comment

Choose a reason for hiding this comment

cypress-bot bot commented Jun 7, 2023

astone123 commented May 31, 2023 •

edited

Loading

cypress bot commented May 31, 2023 •

edited

Loading