feat: Add 'type' option to `.as` to store aliases by value #25251

BlueWinds · 2022-12-21T18:25:54Z

Closes Alias seems to not store it's value #25173

User facing changelog

.as() now accepts an options argument, allowing test writers to store an alias as a "query" or "static".

A "query" alias (the default) re-quries the application for the current state whenever retrieved - it's a 'live' value.
A "static" alias is stored once, when the alias is created - it's a static value, and will never update.

Don't store DOM references as 'value's.

Additional details

it('allows users to store a static value', () => {
  const obj = { foo: 'bar' }

  cy.wrap(obj).its('foo').as('value', { type: 'static' })
  cy.wrap(obj).its('foo').as('query', { type: 'query' })

  cy.then(() => {
    obj.foo = 'baz'
  })

  cy.get('@value').should('eq', 'bar')
  cy.get('@query').should('eq', 'baz')
})

Steps to test

How has the user experience changed?

Before:

After:

Aliases are query by default. If the user sets the type to static, then it is included in the command log.

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)
Has a PR for user-facing changes been opened in cypress-documentation? Add 'type' option for .as() command; Improve visibility of alias changes in 12.x cypress-documentation#4943
Have API changes been updated in the type definitions?

cypress-bot · 2022-12-21T18:25:56Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-12-21T19:00:43Z

Test summary

4361 • 0 • 880 • 0 • 7

Run details


Project	cypress
Status	Passed
Commit	`0bdb731`
Started	Jan 24, 2023 3:34 PM
Ended	Jan 24, 2023 3:50 PM
Duration	15:43 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	commands/net_stubbing.cy.ts	3
1	network stubbing > intercepting request > can delay and throttle a StaticResponse
2	... > with `times` > only uses each handler N times
3	... > stops waiting when an xhr request is canceled
	cypress/cypress.cy.js	2
1	... > correctly returns currentRetry
2	... > correctly returns currentRetry
This comment includes only the first 5 flaky tests. See all 7 flaky tests in the Cypress Dashboard.

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

…option

cli/types/cypress.d.ts

packages/driver/cypress/e2e/commands/window.cy.js

emilyrohrbough · 2023-01-17T15:32:36Z

packages/driver/src/cy/commands/aliasing.ts

@@ -42,7 +58,7 @@ export default function (Commands, Cypress, cy) {

      if (!alreadyAliasedLog && log) {
        log.set({
-          alias,
+          alias: `@${alias}${options.type ? ` (${ options.type })` : ''}`,


Suggested change

alias: `@${alias}${options.type ? ` (${ options.type })` : ''}`,

alias: `@${alias}${options.type ? ` (${ options.type })` : '(query)'}`,

the default is type query, so why not set this as the fallback?

Take a look at the "After" screenshot it the PR description, showing how it looks with (value) tagged onto the end - it's a bit visually busy, so I was trying to avoid it in the default case. If the user sets it explicitly - whether it be query or value - then it'll show up in the command log.

Can definitely make it always display if we like, just 'display less by default' was my intention here.

@BlueWinds Because these wouldn't align

.as('name') .as('name', { type: 'query' }

Could we only prepend when the non-default is used (i.e. only when type === value)?

It'd be helpful to also add this type to the dev tools log details when clicking a log that is referencing an alias to provide the in-depth context to how the alias value is resolved.

Changed it to be consistent, always displaying value and never displaying query; see updated screenshot in the PR description.

I'm going to push back against adding it to the console props for .get() when an alias is retrieved - the "type" of an alias is a property of how it's stored, not how it's retrieved, so we should display it where it's stored (which we do).

The documentation PR says the type impacts how the value is retrieved later in the test. 😅

packages/driver/src/cypress/error_messages.ts

emilyrohrbough · 2023-01-19T16:01:52Z

packages/driver/src/cy/commands/aliasing.ts


 export default function (Commands, Cypress, cy) {
-  Commands.addQuery('as', function asFn (alias) {
+  Commands.addQuery('as', function asFn (alias, options = {} as Partial<Cypress.AsOptions>) {


I'd expect to use Cypress.AsOptions directly . Should be able to if the keys are optional.

I opted here for consistency. Pre-existing commands all use Partial<> in this context, and do not have optional properties.

as(alias: string, options?: Partial<AsOptions>): Chainable<Subject> blur(options?: Partial<BlurOptions>): Chainable<Subject> check(options?: Partial<CheckOptions>): Chainable<Subject> ...snip... interface CheckOptions extends Loggable, Timeoutable, ActionableOptions { interval: number }

Removed the optional-ness of AsOptions.type it , since we have Partial<> everywhere AsOptions is used.

emilyrohrbough · 2023-01-19T16:13:27Z

cli/types/cypress.d.ts

     */
-    action: 'select' | 'drag-drop'
+    type?: 'query' | 'value'


Pulling comment forward from the docs - worth getting other opinions on I think.

These types seem very specific to element queries and context sharing. The query type seems like an odd name for aliasing requests or intercepts since they aren't query commands, but these types of aliases would likely need to default to query to work as expected.

Have we considered alternatives like dynamic and static or other names that can encompass/reflect non-query command aliases as well?

static does read nicer than value, switching over to that. Will update docs PR shortly. I do prefer query for the dynamic / default version though - "query" is a cypress concept we reference in the docs, and we should be consistent about its usage.

static as default please

Defaulting to static would be a breaking change for everyone aliasing DOM nodes, which is more common than aliasing static values. Reducing or eliminating detached DOM errors was the motivation for making this change to alias behavior in the first place.

Humm ok, got it. Thank you!

…option

packages/driver/src/cy/commands/aliasing.ts

Co-authored-by: Chris Breiding <[email protected]>

cli/types/cypress.d.ts

emilyrohrbough

It'd be nice if the types description matched the documentation content.

Co-authored-by: Emily Rohrbough <[email protected]>

cypress-bot · 2023-01-24T20:59:28Z

Released in 12.4.0.

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

feat: Add 'type' option to .as to store aliases by value

aa7f8f5

Fix types

4f4b0dc

BlueWinds mentioned this pull request Dec 21, 2022

Add 'type' option for .as() command; Improve visibility of alias changes in 12.x cypress-io/cypress-documentation#4943

Merged

BlueWinds marked this pull request as ready for review December 21, 2022 19:45

Update display of query/value aliases in reporter

3242b26

BlueWinds mentioned this pull request Dec 27, 2022

Chains of query commands do not retry anything before an assertion #25134

Open

emilyrohrbough mentioned this pull request Jan 6, 2023

Data from cy.invoke() stored in alias is removed on page navigation #25388

Closed

BlueWinds added 2 commits January 11, 2023 09:01

Merge remote-tracking branch 'origin/develop' into issue-25173-alias-…

d5286b0

…option

Fix failing tests

8e0038b

BlueWinds requested a review from emilyrohrbough January 11, 2023 17:16

emilyrohrbough reviewed Jan 17, 2023

View reviewed changes

cli/types/cypress.d.ts Outdated Show resolved Hide resolved

emilyrohrbough reviewed Jan 17, 2023

View reviewed changes

packages/driver/cypress/e2e/commands/window.cy.js Show resolved Hide resolved

emilyrohrbough reviewed Jan 17, 2023

View reviewed changes

packages/driver/src/cypress/error_messages.ts Outdated Show resolved Hide resolved

BlueWinds added 3 commits January 17, 2023 11:16

Merge branch 'develop' into issue-25173-alias-option

c01415f

Review feedback

73c975e

Silly assertion error

b782e6d

emilyrohrbough reviewed Jan 19, 2023

View reviewed changes

BlueWinds added 2 commits January 23, 2023 09:04

Merge remote-tracking branch 'origin/develop' into issue-25173-alias-…

9643f4c

…option

Review feedback

b95b08b

BlueWinds requested a review from chrisbreiding January 23, 2023 17:42

chrisbreiding requested changes Jan 23, 2023

View reviewed changes

packages/driver/src/cy/commands/aliasing.ts Outdated Show resolved Hide resolved

packages/driver/src/cy/commands/aliasing.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

0baf7b7

Co-authored-by: Chris Breiding <[email protected]>

BlueWinds requested review from chrisbreiding and emilyrohrbough January 23, 2023 21:33

chrisbreiding approved these changes Jan 23, 2023

View reviewed changes

emilyrohrbough reviewed Jan 23, 2023

View reviewed changes

cli/types/cypress.d.ts Outdated Show resolved Hide resolved

emilyrohrbough reviewed Jan 23, 2023

View reviewed changes

cli/types/cypress.d.ts Outdated Show resolved Hide resolved

emilyrohrbough approved these changes Jan 23, 2023

View reviewed changes

Blue F and others added 2 commits January 23, 2023 15:28

Apply suggestions from code review

fccaad2

Co-authored-by: Emily Rohrbough <[email protected]>

Fix type lint

0bdb731

BlueWinds merged commit 094e3d0 into develop Jan 24, 2023

BlueWinds deleted the issue-25173-alias-option branch January 24, 2023 16:02

cypress-bot bot locked as resolved and limited conversation to collaborators Jan 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add 'type' option to `.as` to store aliases by value #25251

feat: Add 'type' option to `.as` to store aliases by value #25251

BlueWinds commented Dec 21, 2022 •

edited

Loading

cypress-bot bot commented Dec 21, 2022

cypress bot commented Dec 21, 2022 •

edited

Loading

emilyrohrbough Jan 17, 2023

BlueWinds Jan 17, 2023

emilyrohrbough Jan 19, 2023

emilyrohrbough Jan 19, 2023

BlueWinds Jan 23, 2023

emilyrohrbough Jan 23, 2023

emilyrohrbough Jan 19, 2023

BlueWinds Jan 23, 2023

emilyrohrbough Jan 19, 2023

BlueWinds Jan 23, 2023

filipedanunes Jan 24, 2023

BlueWinds Jan 24, 2023

filipedanunes Jan 24, 2023

emilyrohrbough left a comment

cypress-bot bot commented Jan 24, 2023

	alias: `@${alias}${options.type ? ` (${ options.type })` : ''}`,
	alias: `@${alias}${options.type ? ` (${ options.type })` : '(query)'}`,

feat: Add 'type' option to .as to store aliases by value #25251

feat: Add 'type' option to .as to store aliases by value #25251

Conversation

BlueWinds commented Dec 21, 2022 • edited Loading

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Dec 21, 2022

cypress bot commented Dec 21, 2022 • edited Loading

Test summary

Run details

Flakiness

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emilyrohrbough left a comment

Choose a reason for hiding this comment

cypress-bot bot commented Jan 24, 2023

feat: Add 'type' option to `.as` to store aliases by value #25251

feat: Add 'type' option to `.as` to store aliases by value #25251

BlueWinds commented Dec 21, 2022 •

edited

Loading

cypress bot commented Dec 21, 2022 •

edited

Loading