Skip to content

Commit 9ae911f

Browse files
Blue Femilyrohrboughflotwigchrisbreiding
authored
feat: Queries, Detached DOM, and Retry-Ability (#24628)
* feat: Commands.addSelector, and migrate .get() to be a selector * Fix for failed tests * Last test fix * More test fixes * Self review changes * Remove the concept of prevSubject from selectors entirely * Rename addSelector to addQuery * Quick fix for last commit * Fix TS * Fix merge from develop * Add types and other review updates * Increase timeout to try fixing flakiness * Rename addQuery to _addQuery * Fix typo in previous commit * Fix TS * Include AUT assertion in cy.get() * Fix for previous commit * Review feedback * Minor test improvement * Swifter failure on sizzle syntax error * Better solution for refetching current subject in verifyUpcomingAssertions * Command IDs now include their chainerId * Revert "chore: Revert "feat: _addQuery() (#23665)" (#24022)" This reverts commit f399994. * feat: move .contains() and .shadow() to be queries; remove cy.ng() (#23791) * First stab at removing old .get() implementation * Fix TS and a couple of tests * Fix tests and TS * Fix case-sensitivity for .contains() * Stop TS complaining * Rework cy-contains jquery expression * Add comments, make ts happy * Fix one test, review feedback * Review updates * Fix additional tests * Fix accidental deletion of vital code * One more try at getting logs right * Fix race condition in cross-origin .contains * Add commented out test to ensure .within() works properly with selectors * Fix for sessions + query subject chaining * Fix mixing .within() shadow DOM and .contains() in same chainer * One more attempt at .within + .contains * Fix rebase commits * feat: addQuery Remaining Queries (#24203) * First stab at removing old .get() implementation * Fix TS and a couple of tests * Fix tests and TS * Fix case-sensitivity for .contains() * Stop TS complaining * Rework cy-contains jquery expression * Add comments, make ts happy * Fix one test, review feedback * Review updates * Fix additional tests * Fix accidental deletion of vital code * One more try at getting logs right * Fix race condition in cross-origin .contains * Add commented out test to ensure .within() works properly with selectors * Fix for sessions + query subject chaining * Fix mixing .within() shadow DOM and .contains() in same chainer * One more attempt at .within + .contains * Fix rebase commits * Update many commands to be queries; improve log message around invalid subjects * Update connectors, location, focused and window commands to queries * Return noop to a command and not a query (to avoid implicit assertions) * More test fixes * Fix test failures * Fix for weird-ass frontend-component test * Error message improvements * Fix for broken system test * Update withinSubject to use subject chain * Test clarifications * Unbreak cypress-testing-library via withinState backwards compatibility * Typo in last commit * Improvement for assertion following failed traversal * feat: Fix detached DOM errors for all Cypress commands (#24417) * First stab at removing old .get() implementation * Fix TS and a couple of tests * Fix tests and TS * Fix case-sensitivity for .contains() * Stop TS complaining * Rework cy-contains jquery expression * Add comments, make ts happy * Fix one test, review feedback * Review updates * Fix additional tests * Fix accidental deletion of vital code * One more try at getting logs right * Fix race condition in cross-origin .contains * Add commented out test to ensure .within() works properly with selectors * Fix for sessions + query subject chaining * Fix mixing .within() shadow DOM and .contains() in same chainer * One more attempt at .within + .contains * Fix rebase commits * Update many commands to be queries; improve log message around invalid subjects * Update connectors, location, focused and window commands to queries * Return noop to a command and not a query (to avoid implicit assertions) * More test fixes * Fix test failures * Fix for weird-ass frontend-component test * Error message improvements * Fix for broken system test * Update withinSubject to use subject chain * Test clarifications * Unbreak cypress-testing-library via withinState backwards compatibility * Typo in last commit * Improvement for assertion following failed traversal * WIP adding query support to * More work on actionability + detached dom * Fix TS, rename _addQuery to addQuery * Another try to fix types * Fix lint * Fix for bad merge * Fixes for a couple more tests * Increase timeout 50ms -> 100ms on certain tests failing in CI * Switch to new branch of cypress-testing-library * Update lockfile * Fix yarn.lock with latest version of forked testing-library * More test fixes * Fix TS again * Increase test assertion timeout so it passes on slow browsers (webkit) * Apply suggestions from code review Co-authored-by: Emily Rohrbough <[email protected]> Co-authored-by: Zach Bloomquist <[email protected]> * More review changes * Fix selectFile tests based on updated error message * Improve types and type comments for Commands.add * Undo change to Commands.add types * Update yarn lockfiles again * Remove overwriteQuery from Cy12; .focused() now respects passed in timeout * Update cli/types/cypress.d.ts Co-authored-by: Chris Breiding <[email protected]> * Restore .uncheck() tests Co-authored-by: Emily Rohrbough <[email protected]> Co-authored-by: Zach Bloomquist <[email protected]> Co-authored-by: Chris Breiding <[email protected]> * Fix for hanging driver test after merge * Fix for app component test Co-authored-by: Emily Rohrbough <[email protected]> Co-authored-by: Zach Bloomquist <[email protected]> Co-authored-by: Chris Breiding <[email protected]>
1 parent 9e2ece1 commit 9ae911f

File tree

103 files changed

+2371
-3226
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+2371
-3226
lines changed

‎.circleci/config.yml

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ mainBuildFilters: &mainBuildFilters
2828
only:
2929
- develop
3030
- /^release\/\d+\.\d+\.\d+$/
31+
- issue-7306
3132

3233
# usually we don't build Mac app - it takes a long time
3334
# but sometimes we want to really confirm we are doing the right thing

‎cli/types/cypress.d.ts

+68-3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ declare namespace Cypress {
4949
interface CommandFnWithOriginalFnAndSubject<T extends keyof Chainable, S> {
5050
(this: Mocha.Context, originalFn: CommandOriginalFnWithSubject<T, S>, prevSubject: S, ...args: Parameters<ChainableMethods[T]>): ReturnType<ChainableMethods[T]> | void
5151
}
52+
interface QueryFn<T extends keyof ChainableMethods> {
53+
(...args: Parameters<ChainableMethods[T]>): (subject: any) => any
54+
}
5255
interface ObjectLike {
5356
[key: string]: any
5457
}
@@ -462,30 +465,92 @@ declare namespace Cypress {
462465
*/
463466
log(options: Partial<LogConfig>): Log
464467

465-
/**
466-
* @see https://on.cypress.io/api/commands
467-
*/
468468
Commands: {
469+
/**
470+
* Add a custom command
471+
* @see https://on.cypress.io/api/commands
472+
*/
469473
add<T extends keyof Chainable>(name: T, fn: CommandFn<T>): void
474+
475+
/**
476+
* Add a custom parent command
477+
* @see https://on.cypress.io/api/commands#Parent-Commands
478+
*/
470479
add<T extends keyof Chainable>(name: T, options: CommandOptions & {prevSubject: false}, fn: CommandFn<T>): void
480+
481+
/**
482+
* Add a custom child command
483+
* @see https://on.cypress.io/api/commands#Child-Commands
484+
*/
471485
add<T extends keyof Chainable, S = any>(name: T, options: CommandOptions & {prevSubject: true}, fn: CommandFnWithSubject<T, S>): void
486+
487+
/**
488+
* Add a custom child or dual command
489+
* @see https://on.cypress.io/api/commands#Validations
490+
*/
472491
add<T extends keyof Chainable, S extends PrevSubject>(
473492
name: T, options: CommandOptions & { prevSubject: S | ['optional'] }, fn: CommandFnWithSubject<T, PrevSubjectMap[S]>,
474493
): void
494+
495+
/**
496+
* Add a custom command that allows multiple types as the prevSubject
497+
* @see https://on.cypress.io/api/commands#Validations#Allow-Multiple-Types
498+
*/
475499
add<T extends keyof Chainable, S extends PrevSubject>(
476500
name: T, options: CommandOptions & { prevSubject: S[] }, fn: CommandFnWithSubject<T, PrevSubjectMap<void>[S]>,
477501
): void
502+
503+
/**
504+
* Add one or more custom commands
505+
* @see https://on.cypress.io/api/commands
506+
*/
478507
addAll<T extends keyof Chainable>(fns: CommandFns): void
508+
509+
/**
510+
* Add one or more custom parent commands
511+
* @see https://on.cypress.io/api/commands#Parent-Commands
512+
*/
479513
addAll<T extends keyof Chainable>(options: CommandOptions & {prevSubject: false}, fns: CommandFns): void
514+
515+
/**
516+
* Add one or more custom child commands
517+
* @see https://on.cypress.io/api/commands#Child-Commands
518+
*/
480519
addAll<T extends keyof Chainable, S = any>(options: CommandOptions & { prevSubject: true }, fns: CommandFnsWithSubject<S>): void
520+
521+
/**
522+
* Add one or more custom commands that validate their prevSubject
523+
* @see https://on.cypress.io/api/commands#Validations
524+
*/
481525
addAll<T extends keyof Chainable, S extends PrevSubject>(
482526
options: CommandOptions & { prevSubject: S | ['optional'] }, fns: CommandFnsWithSubject<PrevSubjectMap[S]>,
483527
): void
528+
529+
/**
530+
* Add one or more custom commands that allow multiple types as their prevSubject
531+
* @see https://on.cypress.io/api/commands#Allow-Multiple-Types
532+
*/
484533
addAll<T extends keyof Chainable, S extends PrevSubject>(
485534
options: CommandOptions & { prevSubject: S[] }, fns: CommandFnsWithSubject<PrevSubjectMap<void>[S]>,
486535
): void
536+
537+
/**
538+
* Overwrite an existing Cypress command with a new implementation
539+
* @see https://on.cypress.io/api/commands#Overwrite-Existing-Commands
540+
*/
487541
overwrite<T extends keyof Chainable>(name: T, fn: CommandFnWithOriginalFn<T>): void
542+
543+
/**
544+
* Overwrite an existing Cypress command with a new implementation
545+
* @see https://on.cypress.io/api/commands#Overwrite-Existing-Commands
546+
*/
488547
overwrite<T extends keyof Chainable, S extends PrevSubject>(name: T, fn: CommandFnWithOriginalFnAndSubject<T, PrevSubjectMap[S]>): void
548+
549+
/**
550+
* Add a custom query
551+
* @see https://on.cypress.io/api/commands#Queries
552+
*/
553+
addQuery<T extends keyof Chainable>(name: T, fn: QueryFn<T>): void
489554
}
490555

491556
/**

‎npm/cypress-schematic/src/e2e.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const cypressSchematicPackagePath = path.join(__dirname, '..')
2727
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-13', 'angular-14']
2828

2929
describe('ng add @cypress/schematic / only e2e', function () {
30-
this.timeout(1000 * 60 * 4)
30+
this.timeout(1000 * 60 * 5)
3131

3232
for (const project of ANGULAR_PROJECTS) {
3333
it('should install e2e files by default', async () => {

‎packages/app/cypress/e2e/reporter_header.cy.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ describe('Reporter Header', () => {
1616
cy.get('[data-selected-spec="false"]').should('have.length', '27')
1717
})
1818

19-
it('filters the list of specs when searching for specs', () => {
19+
// TODO: Reenable as part of https://github.com/cypress-io/cypress/issues/23902
20+
it.skip('filters the list of specs when searching for specs', () => {
2021
cy.get('body').type('f')
2122

2223
cy.findByTestId('specs-list-panel').within(() => {
@@ -28,7 +29,7 @@ describe('Reporter Header', () => {
2829

2930
cy.get('@searchInput').clear()
3031

31-
cy.get('[data-cy="spec-file-item"]').should('have.length', 3)
32+
cy.get('[data-cy="spec-file-item"]').should('have.length', 23)
3233

3334
cy.get('@searchInput').type('asdf', { force: true })
3435

‎packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ type ProjectDirs = typeof fixtureDirs
44

55
const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
66
{ projectName: 'angular-14', test: 'app.component' },
7-
{ projectName: 'vueclivue2-configured', test: 'HelloWorld.cy' },
8-
{ projectName: 'react-vite-ts-configured', test: 'App.cy' },
9-
{ projectName: 'react18', test: 'App.cy' },
10-
{ projectName: 'create-react-app-configured', test: 'App.cy' },
11-
{ projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
12-
{ projectName: 'nuxtjs-vue2-configured', test: 'Tutorial.cy' },
7+
// { projectName: 'vueclivue2-configured', test: 'HelloWorld.cy' },
8+
// { projectName: 'react-vite-ts-configured', test: 'App.cy' },
9+
// { projectName: 'react18', test: 'App.cy' },
10+
// { projectName: 'create-react-app-configured', test: 'App.cy' },
11+
// { projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
12+
// { projectName: 'nuxtjs-vue2-configured', test: 'Tutorial.cy' },
1313
]
1414

1515
// TODO: Add these tests to another cy-in-cy framework test to reduce CI cost as these scaffolding is expensive

‎packages/app/cypress/e2e/specs_list_e2e.cy.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -245,8 +245,7 @@ describe('App: Spec List (E2E)', () => {
245245
cy.findByText('No specs matched your search:').should('not.be.visible')
246246
})
247247

248-
// TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23305
249-
it.skip('saves the filter when navigating to a spec and back', function () {
248+
it('saves the filter when navigating to a spec and back', function () {
250249
const targetSpecFile = 'accounts_list.spec.js'
251250

252251
clearSearchAndType(targetSpecFile)

‎packages/app/cypress/e2e/top-nav.cy.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ describe('App Top Nav Workflows', () => {
195195
})
196196

197197
it('hides dropdown when version in header is clicked', () => {
198-
cy.findByTestId('cypress-update-popover').findByRole('button', { expanded: false }).as('topNavVersionButton').click()
198+
cy.findByTestId('cypress-update-popover').findAllByRole('button').first().as('topNavVersionButton').click()
199199

200200
cy.get('@topNavVersionButton').should('have.attr', 'aria-expanded', 'true')
201201

@@ -541,7 +541,7 @@ describe('App Top Nav Workflows', () => {
541541
cy.findByRole('button', { name: 'Log in' }).click()
542542
})
543543

544-
cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
544+
cy.findByRole('dialog').within(() => {
545545
cy.findByRole('button', { name: 'Log in' }).click()
546546

547547
cy.contains('http://127.0.0.1:0000/redirect-to-auth').should('be.visible')
@@ -573,7 +573,7 @@ describe('App Top Nav Workflows', () => {
573573
cy.findByRole('button', { name: 'Log in' }).click()
574574
})
575575

576-
cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
576+
cy.findByRole('dialog').within(() => {
577577
cy.findByRole('button', { name: 'Log in' }).click()
578578

579579
cy.contains(loginText.titleFailed).should('be.visible')
@@ -623,7 +623,7 @@ describe('App Top Nav Workflows', () => {
623623
cy.findByRole('button', { name: 'Log in' }).as('loginButton').click()
624624
})
625625

626-
cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
626+
cy.findByRole('dialog').within(() => {
627627
cy.findByRole('button', { name: 'Log in' }).click()
628628

629629
cy.contains(loginText.titleFailed).should('be.visible')
@@ -660,7 +660,7 @@ describe('App Top Nav Workflows', () => {
660660
cy.findByRole('button', { name: 'Log in' }).as('loginButton').click()
661661
})
662662

663-
cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
663+
cy.findByRole('dialog').within(() => {
664664
cy.findByRole('button', { name: 'Log in' }).click()
665665
cy.contains(loginText.titleFailed).should('be.visible')
666666
cy.contains(loginText.bodyError).should('be.visible')

‎packages/app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"@intlify/vite-plugin-vue-i18n": "2.4.0",
2929
"@packages/frontend-shared": "0.0.0-development",
3030
"@percy/cypress": "^3.1.0",
31-
"@testing-library/cypress": "8.0.0",
31+
"@testing-library/cypress": "BlueWinds/cypress-testing-library#119054b5963b0d2e064b13c5cc6fc9db32c8b7b5",
3232
"@types/faker": "5.5.8",
3333
"@urql/core": "2.4.4",
3434
"@urql/vue": "0.6.2",

‎packages/app/src/specs/SpecItem.cy.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('SpecItem', () => {
2222
const parentColor = getComputedStyle($el.parent()[0]).color
2323
const highlightedElementColor = getComputedStyle($el[0]).color
2424

25-
cy.wrap(highlightedElementColor).should('not.equal', parentColor)
25+
expect(highlightedElementColor).not.to.equal(parentColor)
2626
})
2727
})
2828

@@ -35,7 +35,7 @@ describe('SpecItem', () => {
3535
const parentColor = getComputedStyle($el.parent()[0]).color
3636
const highlightedElementColor = getComputedStyle($el[0]).color
3737

38-
cy.wrap(highlightedElementColor).should('equal', parentColor)
38+
expect(highlightedElementColor).to.equal(parentColor)
3939
})
4040
})
4141

‎packages/driver/cypress/e2e/commands/actions/check.cy.js

+23-2
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,27 @@ describe('src/cy/commands/actions/check', () => {
9898
cy.get(checkbox).check()
9999
})
100100

101+
it('requeries if the DOM rerenders during actionability', () => {
102+
cy.$$('[name=colors]').first().prop('disabled', true)
103+
104+
const listener = _.after(3, () => {
105+
cy.$$('[name=colors]').first().prop('disabled', false)
106+
107+
const parent = cy.$$('[name=colors]').parent()
108+
109+
parent.replaceWith(parent[0].outerHTML)
110+
cy.off('command:retry', listener)
111+
})
112+
113+
cy.on('command:retry', listener)
114+
115+
cy.get('[name=colors]').check().then(($inputs) => {
116+
$inputs.each((i, el) => {
117+
expect($(el)).to.be.checked
118+
})
119+
})
120+
})
121+
101122
// readonly should only be limited to inputs, not checkboxes
102123
it('can check readonly checkboxes', () => {
103124
cy.get('#readonly-checkbox').check().then(($checkbox) => {
@@ -437,7 +458,7 @@ describe('src/cy/commands/actions/check', () => {
437458

438459
cy.on('fail', (err) => {
439460
expect(checked).to.eq(1)
440-
expect(err.message).to.include('`cy.check()` failed because this element')
461+
expect(err.message).to.include('`cy.check()` failed because the page updated')
441462

442463
done()
443464
})
@@ -1079,7 +1100,7 @@ describe('src/cy/commands/actions/check', () => {
10791100

10801101
cy.on('fail', (err) => {
10811102
expect(unchecked).to.eq(1)
1082-
expect(err.message).to.include('`cy.uncheck()` failed because this element')
1103+
expect(err.message).to.include('`cy.uncheck()` failed because the page updated')
10831104

10841105
done()
10851106
})

‎packages/driver/cypress/e2e/commands/actions/clear.cy.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,26 @@ describe('src/cy/commands/actions/type - #clear', () => {
5252
})
5353
})
5454

55+
it('requeries if the DOM rerenders during actionability', () => {
56+
const clicked = cy.stub()
57+
const retried = cy.stub()
58+
59+
const textarea = cy.$$('#comments').val('foo bar').prop('disabled', true)
60+
61+
cy.on('command:retry', _.after(3, () => {
62+
if (!retried.callCount) {
63+
textarea.replaceWith(textarea[0].outerHTML)
64+
cy.$$('#comments').prop('disabled', false).on('click', clicked)
65+
retried()
66+
}
67+
}))
68+
69+
cy.get('#comments').clear().then(() => {
70+
expect(clicked).to.be.calledOnce
71+
expect(retried).to.be.called
72+
})
73+
})
74+
5575
it('can force clear even when being covered by another element', () => {
5676
const $input = $('<input />')
5777
.attr('id', 'input-covered-in-span')
@@ -275,7 +295,7 @@ describe('src/cy/commands/actions/type - #clear', () => {
275295

276296
cy.on('fail', (err) => {
277297
expect(cleared).to.be.calledOnce
278-
expect(err.message).to.include('`cy.clear()` failed because this element')
298+
expect(err.message).to.include('`cy.clear()` failed because the page updated')
279299

280300
done()
281301
})

0 commit comments

Comments
 (0)