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

feat(Unification): add internal log group api and consume in .within() #20474

Closed
wants to merge 35 commits into from

Conversation

emilyrohrbough
Copy link
Member

@emilyrohrbough emilyrohrbough commented Mar 3, 2022

Summary

  • Added log group api to be consumed internally by Cypress commands.
  • Updated .within() to consume log group api
  • Update Reporter's Command Group to be open by default for parent or child commands
  • Fixed session's 'warn' state to be 'warning' to align with other 'warning' states.

User facing changelog

Enhanced .within() to provide visual indication of nested commands and logs.

How has the user experience changed?

Before After
Screen Shot 2022-03-04 at 4 36 44 PM Screen Shot 2022-03-04 at 4 33 17 PM

PR Tasks

  • Have tests been added/updated?
  • Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • [n/a] Has a PR for user-facing changes been opened in cypress-documentation?
  • [n/a] Have API changes been updated in the type definitions?
  • [n/a] Have new configuration options been added to the cypress.schema.json?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Mar 3, 2022

Thanks for taking the time to open a PR!

@emilyrohrbough emilyrohrbough changed the title Unification: add internal log group api and consume in .within() feat(Unification): add internal log group api and consume in .within() Mar 3, 2022
@emilyrohrbough emilyrohrbough marked this pull request as ready for review March 3, 2022 22:37
@emilyrohrbough emilyrohrbough marked this pull request as draft March 3, 2022 22:38
@cypress
Copy link

cypress bot commented Mar 3, 2022



Test summary

17751 49 217 0Flakiness 1


Run details

Project cypress
Status Failed
Commit f737dc9
Started Apr 1, 2022 8:34 PM
Ended Apr 1, 2022 8:47 PM
Duration 12:49 💡
OS Linux Debian - 10.10
Browser Multiple

View run in Cypress Dashboard ➡️


Failures

Run group: 5x-driver-electron (Linux, Electron )
e2e/dom_hitbox.cy.js Failed
1 rect highlight > highlight inline elements
2 rect highlight > highlight elements with css transform
3 rect highlight > highlight elements with css transform on parent
4 rect highlight > correct target position during click
5 rect highlight > correct target position during click with offset coords
6 rect highlight > highlights above z-index elements
commands/actions/click.cy.js Failed
1 mouse state > user experience > can render element highlight inside iframe
2 mouse state > user experience > can print table of keys on click
3 mouse state > user experience > can print table of keys on dblclick
4 mouse state > user experience > can print table of keys on rightclick
This comment includes only the first 10 test failures. See all 12 failures in the Cypress Dashboard.
Run group: 5x-driver-chrome:beta (Linux, Chrome beta )
commands/actions/type.cy.js Failed
1 src/cy/commands/actions/type - #type > user experience > can print table of keys on click
commands/actions/click.cy.js Failed
1 mouse state > user experience > can render element highlight inside iframe
2 mouse state > user experience > can print table of keys on click
3 mouse state > user experience > can print table of keys on dblclick
4 mouse state > user experience > can print table of keys on rightclick
e2e/dom_hitbox.cy.js Failed
1 rect highlight > highlight inline elements
2 rect highlight > highlight elements with css transform
3 rect highlight > highlight elements with css transform on parent
4 rect highlight > correct target position during click
5 rect highlight > correct target position during click with offset coords
This comment includes only the first 10 test failures. See all 12 failures in the Cypress Dashboard.
Run group: 5x-driver-chrome (Linux, Chrome )
commands/actions/type.cy.js Failed
1 src/cy/commands/actions/type - #type > user experience > can print table of keys on click
commands/actions/click.cy.js Failed
1 mouse state > user experience > can render element highlight inside iframe
2 mouse state > user experience > can print table of keys on click
3 mouse state > user experience > can print table of keys on dblclick
4 mouse state > user experience > can print table of keys on rightclick
e2e/dom_hitbox.cy.js Failed
1 rect highlight > highlight inline elements
2 rect highlight > highlight elements with css transform
3 rect highlight > highlight elements with css transform on parent
4 rect highlight > correct target position during click
5 rect highlight > correct target position during click with offset coords
This comment includes only the first 10 test failures. See all 12 failures in the Cypress Dashboard.
Run group: 5x-driver-firefox (Linux, Firefox )
commands/actions/type.cy.js Failed
1 src/cy/commands/actions/type - #type > user experience > can print table of keys on click
e2e/dom_hitbox.cy.js Failed
1 rect highlight > highlight inline elements
2 rect highlight > highlight elements with css transform
3 rect highlight > highlight elements with css transform on parent
4 rect highlight > correct target position during click
5 rect highlight > correct target position during click with offset coords
6 rect highlight > highlights above z-index elements
commands/actions/click.cy.js Failed
1 mouse state > user experience > can render element highlight inside iframe
2 mouse state > user experience > can print table of keys on click
3 mouse state > user experience > can print table of keys on dblclick
This comment includes only the first 10 test failures. See all 12 failures in the Cypress Dashboard.
Run group: reporter (Linux, Electron )
commands.cy.ts Failed
1 commands > command group > group is open by default when all nested command have passed

Flakiness

cypress/e2e/commands/xhr.cy.js Flakiness
1 ... > no status when request isnt forced 404

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard


const subject = userOptions.$el || null

const log = Cypress.log(options)
Copy link
Member Author

Choose a reason for hiding this comment

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

When Cypress.log has emitOnly: true it will not send emit the log to the runner/reporter and will not return a log instance. It will however, create the log attributes and store it in the LogManager and add the logs on the Command. This seems to work just fine, however,

  • Is there risk of data leaking when this test/command is sent to the dashbaord? I didn't find this attribute in the schema, but wanted to double check.
  • Is there risk of this behaving unexpectedly if the user were to pass { log: false } to the command consuming this?

For example:

cy.get('#form').within({ log: false}, () => {})

This example is likely less applicable to .within() and more applicable to up-coming consumption in .withToDomain().

Merge branch 'cmd-group-logic' of https://github.com/cypress-io/cypress into cmd-group-logic
@emilyrohrbough emilyrohrbough marked this pull request as ready for review March 4, 2022 22:14
@brian-mann
Copy link
Member

brian-mann commented Mar 4, 2022

I think it visually looks super odd for the darkest background color not to extend the full width of the row. It's currently "indenting" with the caret. Is this intentional?

Also appears that the command log numbers themselves are indenting as well.

@emilyrohrbough
Copy link
Member Author

@brian-mann That is the current designs of 10.0. The follow up PR to update the styles will remove this: #20465

@brian-mann
Copy link
Member

I see, and the styles are expected to merge first right?

@emilyrohrbough
Copy link
Member Author

emilyrohrbough commented Mar 4, 2022

It wouldn't really matter which order these went in first. I figured merging this first might be better so it can unblock multi-domain. 🤷🏻‍♀️ Would you prefer the other way around?

@@ -357,7 +357,7 @@ describe('commands', () => {
})
})

it('group is closed by default when all nested command have passed', () => {
it('group is open by default when all nested command have passed', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I love this change. No more command log peekaboo

Comment on lines 21 to 40
export interface LogConfig {
// defaults to command
instrument?: 'agent' | 'command' | 'route'
// name of the log
name?: string
// additional information to include in the log if not overridden
// the render props message
// defaults to command arguments for command instrument
message?: string
// the JQuery element for the command. This will highlight the command
// in the main window when debugging
$el?: JQuery
// whether or not to show the log in the Reporter UI or only
// store the log details on the command and log manager
emitOnly?: boolean
// whether or not to start a new log group
groupStart?: boolean
// timeout of the group command - defaults to defaultCommandTimeout
timeout?: number
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this should be combined somehow with the LogConfig defined in internal-types.d.ts:

interface LogConfig {
message: any[]
instrument?: 'route'
isStubbed?: boolean
alias?: string
aliasType?: 'route'
commandName?: string
type?: 'parent'
event?: boolean
method?: string
url?: string
status?: number
numResponses?: number
response?: string | object
renderProps?: () => {
indicator?: 'aborted' | 'pending' | 'successful' | 'bad'
message?: string
}
browserPreRequest?: any
}

import $errUtils from '../cypress/error_utils'
import type { LogConfig } from '../cypress/log'

export interface LogGroupConfig {
Copy link
Contributor

Choose a reason for hiding this comment

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

doesn't this extend LogConfig since we pass it to Cypress.log?

Copy link
Member Author

Choose a reason for hiding this comment

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

@flotwig I purposely limited these options to keep this API clean and minimal. As additional use-cases are determined, we can expand this API.

tbiethman
tbiethman previously approved these changes Mar 9, 2022
Copy link
Contributor

@tbiethman tbiethman left a comment

Choose a reason for hiding this comment

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

The API seems to work great; I wrote a few of my own tests featuring .within and they look how I'd expect at this stage.

@emilyrohrbough
Copy link
Member Author

Moving to draft. This will go in after the command styles are merged.

@emilyrohrbough emilyrohrbough marked this pull request as draft March 14, 2022 16:27
@emilyrohrbough
Copy link
Member Author

Closing this PR as this logic is going into develop first in #20857. I'll open a new PR for consuming in the within command once we've landed on the new styles #20465 .

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jun 1, 2022

Released in 10.0.0.

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

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jun 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants