From d8096f0fd6de49c5ec9cf65d5ceabdd61016527e Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Wed, 21 May 2025 16:13:20 -0500 Subject: [PATCH 01/10] chore: add ui states tests --- .../app/cypress/e2e/runner/ui-states.cy.ts | 60 + .../cypress/e2e/runner/ui-states.runner.cy.js | 351 ++++++ .../cypress/fixtures/commandsActions.html | 1055 +++++++++++++++++ .../cypress/fixtures/uiStates.html | 35 + .../cypress/fixtures/uiStates.json | 3 + 5 files changed, 1504 insertions(+) create mode 100644 packages/app/cypress/e2e/runner/ui-states.cy.ts create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js create mode 100644 system-tests/project-fixtures/runner-specs/cypress/fixtures/commandsActions.html create mode 100644 system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.html create mode 100644 system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.json diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts new file mode 100644 index 000000000000..044491140dd8 --- /dev/null +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -0,0 +1,60 @@ +import { runSpec } from './support/spec-loader' + +describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000, viewportHeight: 2500, viewportWidth: 1000 }, () => { + it('common ui states', () => { + runSpec({ + fileName: 'ui-states.runner.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('test hooks').scrollIntoView().click() + cy.percySnapshot() + cy.contains('test hooks').click() + + cy.contains('commands that dont display in UI').scrollIntoView().click() + cy.percySnapshot() + cy.contains('commands that dont display in UI').click() + + cy.contains('commands that display in UI').scrollIntoView().click() + cy.percySnapshot() + cy.contains('commands that display in UI').click() + + cy.contains('command options').scrollIntoView().click() + cy.percySnapshot() + cy.contains('command options').click() + + cy.contains('Element Visibility').scrollIntoView().click() + cy.percySnapshot() + cy.contains('Element Visibility').click() + + cy.contains('Request Statuses').scrollIntoView().click() + cy.percySnapshot() + cy.contains('Request Statuses').click() + + cy.contains('page events').scrollIntoView().click() + cy.percySnapshot() + cy.contains('page events').click() + + cy.contains('events - page events').scrollIntoView().click() + cy.percySnapshot() + cy.contains('events - page events').click() + + cy.contains('simple error with docs link').scrollIntoView().click() + cy.percySnapshot() + cy.contains('simple error with docs link').click() + + cy.contains('long error').scrollIntoView().click() + cy.percySnapshot() + cy.contains('long error').click() + + cy.contains('Nested Tests').scrollIntoView().click() + cy.percySnapshot() + cy.contains('Nested Tests').click() + }) + }) + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js new file mode 100644 index 000000000000..9d0b86f0efbf --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js @@ -0,0 +1,351 @@ +describe('Hooks', () => { + before(() => { + cy.log('command in "before" hook') + }) + + beforeEach(() => { + cy.log('command in "beforeEach" hook') + }) + + it('test hooks', () => { + cy.log('command in "it" test') + }) + + afterEach(() => { + cy.log('command in "afterEach" hook') + }) + + after(() => { + cy.log('command in "after" hook') + }) +}) + +describe('Commands', () => { + it('commands that dont display in UI', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.wrap({ foo: { bar: 'baz' } }) + .then((obj) => obj) + .should('have.property', 'foo') + .and('have.property', 'bar') + + cy.wrap({ foo: { bar: 'baz' } }) + .as('myObject') + + cy.get('@myObject').then((obj) => { + cy.log(obj) + }) + + cy.get('div').each(($div) => { }).end() + + cy.fixture('uiStates') + + cy.intercept('GET', 'comments/*').as('getComment') + + cy.wrap(['foo', 'bar']).spread(() => {}) + + const obj = { + foo () { }, + bar () { }, + } + + cy.spy(obj, 'foo') + cy.stub(obj, 'bar') + }) + + it('commands that display in UI', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('.action-blur') + .type('foo') + .clear() + + cy.focused() + .blur() + + cy.get('.action-check [type="checkbox"]').first() + .check() + .uncheck() + + cy.get('div') + .children() + + cy.setCookie('fakeCookie', '123ABC') + cy.getCookie('fakeCookie') + cy.getCookies() + cy.clearCookie('fakeCookie') + cy.clearCookies() + + cy.clearLocalStorage() + + cy.get('.action-btn') + .click() + .dblclick() + .rightclick() + + const now = new Date(Date.UTC(2017, 2, 14)).getTime() + + cy.clock(now) + cy.tick(10000) + + cy.get('li').closest('.nav') + + cy.contains('Commands') + cy.get('li').contains('Commands') + + cy.document() + + cy.get('div').eq(0) + + cy.exec('echo Jane Lane') + + cy.get('div') + .filter('.container') + .find('#navbar') + .first() + + cy.go('forward') + + cy.hash() + + cy.get('div').invoke('text') + + cy.get('div').its('length') + + cy.get('div').last() + + cy.location() + + cy.log('message') + + cy.get('div') + .next() + .nextAll() + .not('.container') + .parent() + .parents() + .parentsUntil() + .prev() + .prevAll() + .prevUntil() + + cy.get('div').first() + .scrollIntoView() + .screenshot() + + cy.scrollTo('bottom') + + cy.get('.action-select') + .select('apples') + .siblings() + + cy.get('form').first() + + cy.title() + + cy.get('div').first().trigger('click') + + cy.url() + + cy.viewport('ipad-2') + + cy.wait(2) + + cy.window() + + cy.get('div').first().within(() => { + + }) + + cy.wrap({ foo: 'bar' }) + + cy.session('session', () => { + cy.visit('cypress/fixtures/uiStates.html') + }) + }) + + it('command options', () => { + cy.visit('cypress/fixtures/uiStates.html') + + cy.get('#a').focus().blur({ force: false }) + cy.get('#checkbox').check({ force: false }) + cy.get('form').children({ timeout: 2000 }) + cy.get('#a').clear({ force: false }) + cy.clearCookie('authId', { timeout: 2001 }) + cy.clearCookies({ timeout: 2002 }) + + cy.contains('button').click({ force: false }) + cy.contains('button').click(1, 2, { force: false }) + cy.contains('button').click('bottom', { force: false }) + + cy.get('#a').closest('form', { timeout: 2003 }) + cy.contains('.test', 'Hello', { timeout: 2004 }) + cy.get('button').dblclick({ force: false }) + + cy.document({ timeout: 2005 }) + + cy.get('input').eq(0, { timeout: 2006 }) + cy.exec('ls', { env: { 'a': true } }) + cy.get('input').filter('#a', { timeout: 2007 }) + cy.get('form').find('#a', { timeout: 2008 }) + cy.get('input').first({ timeout: 2009 }) + + cy.get('#a').focus({ timeout: 2010 }) + cy.get('#a').focus() + cy.focused({ timeout: 2011 }) + cy.get('#a', { withinSubject: document.forms[0] }) + cy.getCookie('auth_key', { timeout: 2012 }) + cy.getCookies({ timeout: 2013 }) + cy.go('forward', { timeout: 2014 }) + cy.hash({ timeout: 2015 }) + cy.get('input').last({ timeout: 2016 }) + cy.location('port', { timeout: 2017 }) + cy.get('#a').next('input', { timeout: 2018 }) + cy.get('#a').nextAll('input', { timeout: 2019 }) + cy.get('#a').nextUntil('#b', { timeout: 2020 }) + cy.get('input').not('#a', { timeout: 2021 }) + cy.get('#a').parent('form', { timeout: 2022 }) + cy.get('#a').parents('form', { timeout: 2023 }) + cy.get('#a').parentsUntil('body', { timeout: 2024 }) + + cy.get('#b').prev('input', { timeout: 2025 }) + cy.get('#b').prevAll('input', { timeout: 2026 }) + cy.get('#b').prevUntil('#a', { timeout: 2027 }) + cy.readFile('./cypress/fixtures/uiStates.json', { timeout: 2028 }) + cy.reload(true, { timeout: 2028 }) + + cy.get('button').rightclick({ timeout: 2028 }) + cy.root({ timeout: 2028 }) + + cy.screenshot({ capture: 'viewport' }) + cy.get('form').scrollIntoView({ + offset: { top: 20, left: 30, right: 20, bottom: 40 }, + log: true, + timeout: 3000, + duration: 0, + }) + + cy.scrollTo(0, 500, { duration: 100 }) + cy.get('#fruits').select('apples', { force: false }) + + cy.setCookie('auth_key', '123key', { httpOnly: true }) + + cy.get('#a').siblings('input', { timeout: 2029 }) + + cy.get('form').submit({ timeout: 2030 }) + + cy.title({ timeout: 2032 }) + cy.get('#a').trigger('mouseenter', 'top', { cancelable: true }) + cy.get('#a').type('hi?', { + delay: 10, + force: true, + }) + + cy.get('#checkbox').uncheck('good', { force: false }) + cy.url({ timeout: 2033 }) + cy.visit('cypress/fixtures/uiStates.html', { + timeout: 20000, + }) + + cy.wait(100, { requestTimeout: 2000 }) + cy.window({ timeout: 2034 }) + cy.wrap({ name: 'John Doe' }, { timeout: 2035 }) + cy.writeFile('./cypress/_test-output/test.txt', 'test', { timeout: 2036 }) + }) + + it('Element Visibility', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('#scroll-horizontal button') + .should('not.be.visible') + }) +}) + +describe('Status Codes', () => { + it('Request Statuses', () => { + cy.request('https://httpstat.us/200') + cy.request('https://httpstat.us/304') + + cy.request({ + url: 'https://httpstat.us/400', + failOnStatusCode: false, + }) + + cy.request({ + url: 'https://httpstat.us/502', + failOnStatusCode: false, + }) + + cy.request({ + url: 'https://httpstat.us/103', + timeout: 2000, + }) + }) +}) + +describe('Page Events', () => { + it('events - page events', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('form').first().submit() + + cy.visit('cypress/fixtures/aliasing.html') + cy.get('.network-btn').click() + }) +}) + +describe('Errors', () => { + it('simple error with docs link', () => { + cy.visit('cypress/fixtures/commandsActions.html') + cy.get('div') + .click() + }) + + it('long error', () => { + cy.request('http://httpstat.us/500') + }) +}) + +describe('Nested Tests', () => { + context('level 2', () => { + context('level 3', () => { + context('level 4', () => { + context('level 5', () => { + context('level 6', () => { + context('level 7', () => { + context('level 8', () => { + context('level 9', () => { + context('level 10', () => { + context('level 11', () => { + context('level 12', () => { + context('level 13', () => { + context('level 14', () => { + context('level 15', () => { + context('level 16', () => { + context('level 17', () => { + context('level 18', () => { + context('level 19', () => { + context('level 20', () => { + it('passing test', () => { + expect(true).to.be.true + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/fixtures/commandsActions.html b/system-tests/project-fixtures/runner-specs/cypress/fixtures/commandsActions.html new file mode 100644 index 000000000000..5b136399e4c8 --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/fixtures/commandsActions.html @@ -0,0 +1,1055 @@ + + + + + + + + + + Cypress.io: Kitchen Sink + + + + + + + +
+
+
+
+

.type()

+

+ To type into a DOM element, use the + .type() + command. +

+ 
cy.get('.action-email').type('fake@email.com')
+cy.get('.action-email').should('have.value', 'fake@email.com')
+
+// .type() with special character sequences
+cy.get('.action-email').type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+cy.get('.action-email').type('{del}{selectall}{backspace}')
+
+// .type() with key modifiers
+cy.get('.action-email').type('{alt}{option}') //these are equivalent
+cy.get('.action-email').type('{ctrl}{control}') //these are equivalent
+cy.get('.action-email').type('{meta}{command}{cmd}') //these are equivalent
+cy.get('.action-email').type('{shift}')
+
+// Delay each keypress by 0.1 sec
+cy.get('.action-email').type('slow.typing@email.com', { delay: 100 })
+cy.get('.action-email').should('have.value', 'slow.typing@email.com')
+
+cy.get('.action-disabled')
+  // Ignore error checking prior to type
+  // like whether the input is visible or disabled
+  .type('disabled error checking', { force: true })
+cy.get('.action-disabled').should('have.value', 'disabled error checking')
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+ +
+

+ .focus() +

+

+ To focus on a DOM element, use the + .focus() + command. +

+ 
cy.get('.action-focus').focus()
+cy.get('.action-focus').should('have.class', 'focus')
+  .prev().should('have.attr', 'style', 'color: orange;')
+
+
+
+
+
+ + +
+
+
+
+ +
+ +
+

.blur()

+

+ To blur on a DOM element, use the + .blur() + command. +

+ 
cy.get('.action-blur').type('About to blur')
+cy.get('.action-blur').blur()
+cy.get('.action-blur').should('have.class', 'error')
+  .prev().should('have.attr', 'style', 'color: red;')
+
+
+
+
+
+
+ + +
+
+
+
+ +
+ +
+

+ .clear() +

+

+ To clear on a DOM element, use the + .clear() + command. +

+ 
cy.get('.action-clear').type('Clear this text')
+cy.get('.action-clear').should('have.value', 'Clear this text')
+cy.get('.action-clear').clear()
+cy.get('.action-clear').should('have.value', '')
+
+
+
+
+
+ + +
+
+
+
+ +
+ +
+

+ .submit() +

+

+ To submit a form, use the + cy.submit() + command. +

+ 
cy.get('.action-form')
+  .find('[type="text"]').type('HALFOFF')
+      
+cy.get('.action-form').submit()
+cy.get('.action-form').next().should('contain', 'Your form has been submitted!')
+
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+

+ .click() +

+

+ To click a DOM element, use the + .click() + command. +

+ 
cy.get('.action-btn').click()
+
+// You can click on 9 specific positions of an element:
+//  -----------------------------------
+// | topLeft        top       topRight |
+// |                                   |
+// |                                   |
+// |                                   |
+// | left          center        right |
+// |                                   |
+// |                                   |
+// |                                   |
+// | bottomLeft   bottom   bottomRight |
+//  -----------------------------------
+
+// clicking in the center of the element is the default
+cy.get('#action-canvas').click()
+
+cy.get('#action-canvas').click('topLeft')
+cy.get('#action-canvas').click('top')
+cy.get('#action-canvas').click('topRight')
+cy.get('#action-canvas').click('left')
+cy.get('#action-canvas').click('right')
+cy.get('#action-canvas').click('bottomLeft')
+cy.get('#action-canvas').click('bottom')
+cy.get('#action-canvas').click('bottomRight')
+
+// .click() accepts an x and y coordinate
+// that controls where the click occurs :)
+
+cy.get('#action-canvas')
+cy.get('#action-canvas').click(80, 75) // click 80px on x coord and 75px on y coord
+cy.get('#action-canvas').click(170, 75)
+cy.get('#action-canvas').click(80, 165)
+cy.get('#action-canvas').click(100, 185)
+cy.get('#action-canvas').click(125, 190)
+cy.get('#action-canvas').click(150, 185)
+cy.get('#action-canvas').click(170, 165)
+
+// click multiple elements by passing multiple: true
+cy.get('.action-labels>.label').click({ multiple: true })
+
+// Ignore error checking prior to clicking
+cy.get('.action-opacity>.btn').click({ force: true })
+
+
+
+ + +
+ +
Canvas to Illustrate Click Positions
+ + +
+ +
+ click me + and me + and me + and me + and me + and me +
+ +
+ +
+ +
+
+
+
+
+ +
+

+ .dblclick() +

+

+ To double click a DOM element, use the + .dblclick() + command. +

+ 
// Our app has a listener on 'dblclick' event in our 'scripts.js'
+// that hides the div and shows an input on double click
+cy.get('.action-div').dblclick()
+cy.get('.action-div').should('not.be.visible')
+cy.get('.action-input-hidden').should('be.visible')
+
+
+
+
+
+
Double click to edit
+ +
+
+
+
+ +
+ +
+

+ .rightclick() +

+

+ To right click a DOM element, use the + .rightclick() + command. +

+ 
// Our app has a listener on 'contextmenu' event in our 'scripts.js'
+// that hides the div and shows an input on right click
+cy.get('.rightclick-action-div').rightclick()
+cy.get('.rightclick-action-div').should('not.be.visible')
+cy.get('.rightclick-action-input-hidden').should('be.visible')
+
+
+
+
+
+
Right click to edit
+ +
+
+
+
+ +
+
+
+ +
+

+ .check() +

+

+ To check a checkbox or radio, use the + .check() + command. +

+ 
// By default, .check() will check all
+// matching checkbox or radio elements in succession, one after another
+cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check()
+cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').should('be.checked')
+
+cy.get('.action-radios [type="radio"]').not('[disabled]').check()
+cy.get('.action-radios [type="radio"]').not('[disabled]').should('be.checked')
+
+// .check() accepts a value argument
+cy.get('.action-radios [type="radio"]').check('radio1')
+cy.get('.action-radios [type="radio"]').should('be.checked')
+
+// .check() accepts an array of values
+cy.get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2'])
+cy.get('.action-multiple-checkboxes [type="checkbox"]').should('be.checked')
+
+// Ignore error checking prior to checking
+cy.get('.action-checkboxes [disabled]').check({ force: true })
+cy.get('.action-checkboxes [disabled]').should('be.checked')
+
+cy.get('.action-radios [type="radio"]').check('radio3', { force: true })
+cy.get('.action-radios [type="radio"]').should('be.checked')
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+

+ .uncheck() +

+

+ To uncheck a checkbox or radio, use the + .uncheck() + command. +

+ 
// By default, .uncheck() will uncheck all matching
+// checkbox elements in succession, one after another
+cy.get('.action-check [type="checkbox"]')
+  .not('[disabled]')
+  .uncheck()
+cy.get('.action-check [type="checkbox"]')
+  .not('[disabled]')
+  .should('not.be.checked')
+
+// .uncheck() accepts a value argument
+cy.get('.action-check [type="checkbox"]')
+  .check('checkbox1')
+cy.get('.action-check [type="checkbox"]')
+  .uncheck('checkbox1')
+cy.get('.action-check [type="checkbox"][value="checkbox1"]')
+  .should('not.be.checked')
+
+// .uncheck() accepts an array of values
+cy.get('.action-check [type="checkbox"]')
+  .check(['checkbox1', 'checkbox3'])
+cy.get('.action-check [type="checkbox"]')
+  .uncheck(['checkbox1', 'checkbox3'])
+cy.get('.action-check [type="checkbox"][value="checkbox1"]')
+  .should('not.be.checked')
+cy.get('.action-check [type="checkbox"][value="checkbox3"]')
+  .should('not.be.checked')
+
+// Ignore error checking prior to unchecking
+cy.get('.action-check [disabled]').uncheck({ force: true })
+cy.get('.action-check [disabled]').should('not.be.checked')
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+

+ .select() +

+

+ To select an option in a select, use the + .select() + command. +

+ 
// at first, no option should be selected
+cy.get('.action-select')
+  .should('have.value', '--Select a fruit--')
+
+// Select option(s) with matching text content
+cy.get('.action-select').select('apples')
+// confirm the apples were selected
+// note that each value starts with "fr-" in our HTML
+cy.get('.action-select').should('have.value', 'fr-apples')
+
+cy.get('.action-select-multiple')
+  .select(['apples', 'oranges', 'bananas'])
+cy.get('.action-select-multiple')
+  // when getting multiple values, invoke "val" method first
+  .invoke('val')
+  .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+// Select option(s) with matching value
+cy.get('.action-select').select('fr-bananas')
+cy.get('.action-select')
+  // can attach an assertion right away to the element
+  .should('have.value', 'fr-bananas')
+
+cy.get('.action-select-multiple')
+  .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+cy.get('.action-select-multiple')
+  .invoke('val')
+  .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+// assert the selected values include oranges
+cy.get('.action-select-multiple')
+  .invoke('val').should('include', 'fr-oranges')
+
+
+
+
+ + + +
+
+
+ +
+ +
+

+ .scrollIntoView() +

+

+ To scroll an element into view, use the + .scrollintoview() + command. +

+ 
// normally all of these buttons are hidden,
+// because they're not within
+// the viewable area of their parent
+// (we need to scroll to see them)
+cy.get('#scroll-horizontal button')
+  .should('not.be.visible')
+
+// scroll the button into view, as if the user had scrolled
+cy.get('#scroll-horizontal button').scrollIntoView()
+cy.get('#scroll-horizontal button')
+  .should('be.visible')
+
+cy.get('#scroll-vertical button')
+  .should('not.be.visible')
+
+// Cypress handles the scroll direction needed
+cy.get('#scroll-vertical button').scrollIntoView()
+cy.get('#scroll-vertical button')
+  .should('be.visible')
+
+cy.get('#scroll-both button')
+  .should('not.be.visible')
+
+// Cypress knows to scroll to the right and down
+cy.get('#scroll-both button').scrollIntoView()
+cy.get('#scroll-both button')
+  .should('be.visible')
+
+
+
+
+
+ Horizontal Scroll + +
+
+ +
+
+ Vertical Scroll + +
+
+ +
+
+ Both Scroll + +
+
+
+
+ +
+ +
+

+ cy.scrollTo() +

+

+ To scroll the window or a scrollable element to a specific + position, use the + cy.scrollTo() + command. +

+ 
// You can scroll to 9 specific positions of an element:
+//  -----------------------------------
+// | topLeft        top       topRight |
+// |                                   |
+// |                                   |
+// |                                   |
+// | left          center        right |
+// |                                   |
+// |                                   |
+// |                                   |
+// | bottomLeft   bottom   bottomRight |
+//  -----------------------------------
+
+// if you chain .scrollTo() off of cy, we will
+// scroll the entire window
+cy.scrollTo('bottom')
+
+cy.get('#scrollable-horizontal').scrollTo('right')
+
+// or you can scroll to a specific coordinate:
+// (x axis, y axis) in pixels
+cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+// or you can scroll to a specific percentage
+// of the (width, height) of the element
+cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+// control the easing of the scroll (default is 'swing')
+cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+// control the duration of the scroll (in ms)
+cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+
+
+
+
+
+ Horizontal Scroll +
    +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
+
+
+ +
+
+ Vertical Scroll +
    +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
+
+
+ +
+
+ Both Scroll + +
+
+
+
+ +
+ +
+

+ .trigger() +

+

+ To trigger an event on a DOM element, use the + .trigger() + command. +

+ 
// To interact with a range input (slider)
+// we need to set its value & trigger the
+// event to signal it changed
+
+// Here, we invoke jQuery's val() method to set
+// the value and trigger the 'change' event
+cy.get('.trigger-input-range')
+  .invoke('val', 25)
+cy.get('.trigger-input-range')
+  .trigger('change')
+cy.get('.trigger-input-range')
+  .get('input[type=range]').siblings('p')
+  .should('have.text', '25')
+
+
+
+
+
+ + +

0

+
+
+
+
+ +
+
+
+
+ + diff --git a/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.html b/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.html new file mode 100644 index 000000000000..cd17a27e2405 --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.html @@ -0,0 +1,35 @@ + + + + + Command Log + + + + + +
Hello World
+
Don't do this
+
+ + + + + + +
+ + + \ No newline at end of file diff --git a/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.json b/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.json new file mode 100644 index 000000000000..b42f309e7ae5 --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/fixtures/uiStates.json @@ -0,0 +1,3 @@ +{ + "foo": "bar" +} \ No newline at end of file From 9d67afcea7fad672c98c32e44453ae89bfc3affb Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Wed, 21 May 2025 16:54:02 -0500 Subject: [PATCH 02/10] refactor: enhance UI states tests with specific Percy snapshot names --- .../app/cypress/e2e/runner/ui-states.cy.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index 044491140dd8..a3f6bd85e598 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -12,47 +12,47 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) }).then(() => { cy.contains('test hooks').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: test hooks') cy.contains('test hooks').click() cy.contains('commands that dont display in UI').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: commands that dont display in UI') cy.contains('commands that dont display in UI').click() cy.contains('commands that display in UI').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: commands that display in UI') cy.contains('commands that display in UI').click() cy.contains('command options').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: command options') cy.contains('command options').click() cy.contains('Element Visibility').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: Element Visibility') cy.contains('Element Visibility').click() cy.contains('Request Statuses').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: Request Statuses') cy.contains('Request Statuses').click() cy.contains('page events').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: page events') cy.contains('page events').click() cy.contains('events - page events').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: events - page events') cy.contains('events - page events').click() cy.contains('simple error with docs link').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: simple error with docs link') cy.contains('simple error with docs link').click() cy.contains('long error').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: long error') cy.contains('long error').click() cy.contains('Nested Tests').scrollIntoView().click() - cy.percySnapshot() + cy.percySnapshot('ui-states: Nested Tests') cy.contains('Nested Tests').click() }) }) From 395026f304d67c18c94bdf8d5cb23fae15e3a591 Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 11:35:22 -0500 Subject: [PATCH 03/10] refactor: streamline UI states tests by using aliases for elements and improving visibility checks --- .../app/cypress/e2e/runner/ui-states.cy.ts | 96 ++++++++++++------- 1 file changed, 63 insertions(+), 33 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index a3f6bd85e598..c99c9530191c 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -11,49 +11,79 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 resolve() }) }).then(() => { - cy.contains('test hooks').scrollIntoView().click() - cy.percySnapshot('ui-states: test hooks') - cy.contains('test hooks').click() + cy.get('[data-cy="reporter-panel"]').within(() => { + cy.contains('test hooks').as('testHooks') + cy.contains('commands that dont display in UI').as('commandsDontDisplayInUI') + cy.contains('commands that display in UI').as('commandsDisplayInUI') + cy.contains('command options').as('commandOptions') + cy.contains('Element Visibility').as('elementVisibility') + cy.contains('Request Statuses').as('requestStatuses') + cy.contains('page events').as('pageEvents') + cy.contains('events - page events').as('eventsPageEvents') + cy.contains('simple error with docs link').as('simpleErrorWithDocsLink') + cy.contains('long error').as('longError') + cy.contains('Nested Tests').as('nestedTests') - cy.contains('commands that dont display in UI').scrollIntoView().click() - cy.percySnapshot('ui-states: commands that dont display in UI') - cy.contains('commands that dont display in UI').click() + cy.get('.container').first().scrollTo('top') + cy.get('@testHooks').should('be.visible') + cy.get('@testHooks').click() + cy.percySnapshot('ui-states: test hooks') + cy.get('@testHooks').click() - cy.contains('commands that display in UI').scrollIntoView().click() - cy.percySnapshot('ui-states: commands that display in UI') - cy.contains('commands that display in UI').click() + cy.get('.container').first().scrollTo('top') + cy.get('@commandsDontDisplayInUI').should('be.visible') + cy.get('@commandsDontDisplayInUI').click() + cy.percySnapshot('ui-states: commands that dont display in UI') + cy.get('@commandsDontDisplayInUI').click() - cy.contains('command options').scrollIntoView().click() - cy.percySnapshot('ui-states: command options') - cy.contains('command options').click() + cy.get('.container').first().scrollTo('top') + cy.get('@commandsDisplayInUI').should('be.visible') + cy.get('@commandsDisplayInUI').click() + cy.percySnapshot('ui-states: commands that display in UI') + cy.get('@commandsDisplayInUI').click() - cy.contains('Element Visibility').scrollIntoView().click() - cy.percySnapshot('ui-states: Element Visibility') - cy.contains('Element Visibility').click() + cy.get('.container').first().scrollTo('top') + cy.get('@commandOptions').should('be.visible') + cy.get('@commandOptions').click() + cy.percySnapshot('ui-states: command options') + cy.get('@commandOptions').click() - cy.contains('Request Statuses').scrollIntoView().click() - cy.percySnapshot('ui-states: Request Statuses') - cy.contains('Request Statuses').click() + cy.get('.container').first().scrollTo('top') + cy.get('@elementVisibility').should('be.visible') + cy.get('@elementVisibility').click() + cy.percySnapshot('ui-states: Element Visibility') + cy.get('@elementVisibility').click() - cy.contains('page events').scrollIntoView().click() - cy.percySnapshot('ui-states: page events') - cy.contains('page events').click() + cy.get('.container').first().scrollTo('top') + cy.get('@requestStatuses').should('be.visible') + cy.percySnapshot('ui-states: Request Statuses') + cy.get('@requestStatuses').click() - cy.contains('events - page events').scrollIntoView().click() - cy.percySnapshot('ui-states: events - page events') - cy.contains('events - page events').click() + cy.get('.container').first().scrollTo('top') + cy.get('@pageEvents').should('be.visible') + cy.get('@pageEvents').click() + cy.percySnapshot('ui-states: page events') + cy.get('@pageEvents').click() - cy.contains('simple error with docs link').scrollIntoView().click() - cy.percySnapshot('ui-states: simple error with docs link') - cy.contains('simple error with docs link').click() + cy.get('.container').first().scrollTo('top') + cy.get('@eventsPageEvents').should('be.visible') + cy.percySnapshot('ui-states: events - page events') + cy.get('@eventsPageEvents').click() - cy.contains('long error').scrollIntoView().click() - cy.percySnapshot('ui-states: long error') - cy.contains('long error').click() + cy.get('.container').first().scrollTo('top') + cy.get('@simpleErrorWithDocsLink').should('be.visible') + cy.percySnapshot('ui-states: simple error with docs link') + cy.get('@simpleErrorWithDocsLink').click() - cy.contains('Nested Tests').scrollIntoView().click() - cy.percySnapshot('ui-states: Nested Tests') - cy.contains('Nested Tests').click() + cy.get('@longError').should('be.visible') + cy.percySnapshot('ui-states: long error') + cy.get('@longError').click() + + cy.get('@nestedTests').should('be.visible') + cy.get('@nestedTests').click() + cy.percySnapshot('ui-states: Nested Tests') + cy.get('@nestedTests').click() + }) }) }) }) From 945e2a9996db880d3cdb85ebe0ed32dc077d9a80 Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 14:36:39 -0500 Subject: [PATCH 04/10] Trigger run From 6847bf2c214f42b73e6d1093db282a11fbe3109e Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 16:02:06 -0500 Subject: [PATCH 05/10] Enhance UI states tests by adding new test files for commands, errors, hooks, nested tests, page events, and status codes. Update existing tests to improve structure and visibility checks. --- .../app/cypress/e2e/runner/ui-states.cy.ts | 219 +++++++++++++----- .../commands.cy.js} | 111 --------- .../cypress/e2e/runner/ui-states/errors.cy.js | 11 + .../cypress/e2e/runner/ui-states/hooks.cy.js | 21 ++ .../e2e/runner/ui-states/nested-tests.cy.js | 43 ++++ .../e2e/runner/ui-states/page-events.cy.js | 10 + .../e2e/runner/ui-states/status-codes.cy.js | 21 ++ 7 files changed, 261 insertions(+), 175 deletions(-) rename system-tests/project-fixtures/runner-specs/cypress/e2e/runner/{ui-states.runner.cy.js => ui-states/commands.cy.js} (66%) create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/errors.cy.js create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/hooks.cy.js create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/nested-tests.cy.js create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/page-events.cy.js create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/status-codes.cy.js diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index c99c9530191c..2f5d1f9cefc4 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -1,9 +1,13 @@ import { runSpec } from './support/spec-loader' -describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000, viewportHeight: 2500, viewportWidth: 1000 }, () => { - it('common ui states', () => { +describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => { + beforeEach(() => { + cy.viewport(1000, 1500) + }) + + it('hooks', () => { runSpec({ - fileName: 'ui-states.runner.cy.js', + fileName: 'ui-states/hooks.cy.js', }) .then((win) => { return new Promise((resolve) => { @@ -11,78 +15,165 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 resolve() }) }).then(() => { - cy.get('[data-cy="reporter-panel"]').within(() => { - cy.contains('test hooks').as('testHooks') - cy.contains('commands that dont display in UI').as('commandsDontDisplayInUI') - cy.contains('commands that display in UI').as('commandsDisplayInUI') - cy.contains('command options').as('commandOptions') - cy.contains('Element Visibility').as('elementVisibility') - cy.contains('Request Statuses').as('requestStatuses') - cy.contains('page events').as('pageEvents') - cy.contains('events - page events').as('eventsPageEvents') - cy.contains('simple error with docs link').as('simpleErrorWithDocsLink') - cy.contains('long error').as('longError') - cy.contains('Nested Tests').as('nestedTests') + cy.contains('test hooks').should('be.visible') + cy.percySnapshot() + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@testHooks').should('be.visible') - cy.get('@testHooks').click() - cy.percySnapshot('ui-states: test hooks') - cy.get('@testHooks').click() + it('nested tests', () => { + runSpec({ + fileName: 'ui-states/nested-tests.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('Nested Tests').should('be.visible') + cy.percySnapshot() + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@commandsDontDisplayInUI').should('be.visible') - cy.get('@commandsDontDisplayInUI').click() - cy.percySnapshot('ui-states: commands that dont display in UI') - cy.get('@commandsDontDisplayInUI').click() + describe('commands', () => { + it('commands that dont display in UI', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('commands that dont display in UI').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@commandsDisplayInUI').should('be.visible') - cy.get('@commandsDisplayInUI').click() - cy.percySnapshot('ui-states: commands that display in UI') - cy.get('@commandsDisplayInUI').click() + it('commands that display in UI', () => { + cy.viewport(1000, 2800) - cy.get('.container').first().scrollTo('top') - cy.get('@commandOptions').should('be.visible') - cy.get('@commandOptions').click() - cy.percySnapshot('ui-states: command options') - cy.get('@commandOptions').click() + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('commands that display in UI').should('be.visible') + .click() - cy.get('.container').first().scrollTo('top') - cy.get('@elementVisibility').should('be.visible') - cy.get('@elementVisibility').click() - cy.percySnapshot('ui-states: Element Visibility') - cy.get('@elementVisibility').click() + cy.percySnapshot() + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@requestStatuses').should('be.visible') - cy.percySnapshot('ui-states: Request Statuses') - cy.get('@requestStatuses').click() + it('command options', () => { + cy.viewport(1000, 3200) - cy.get('.container').first().scrollTo('top') - cy.get('@pageEvents').should('be.visible') - cy.get('@pageEvents').click() - cy.percySnapshot('ui-states: page events') - cy.get('@pageEvents').click() + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options').as('commandOptions').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@eventsPageEvents').should('be.visible') - cy.percySnapshot('ui-states: events - page events') - cy.get('@eventsPageEvents').click() + it('Element Visibility', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('Element Visibility').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + }) - cy.get('.container').first().scrollTo('top') - cy.get('@simpleErrorWithDocsLink').should('be.visible') - cy.percySnapshot('ui-states: simple error with docs link') - cy.get('@simpleErrorWithDocsLink').click() + it('status codes', () => { + runSpec({ + fileName: 'ui-states/status-codes.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('Request Statuses').should('be.visible') + cy.percySnapshot() + }) + }) + }) - cy.get('@longError').should('be.visible') - cy.percySnapshot('ui-states: long error') - cy.get('@longError').click() + it('page events', () => { + runSpec({ + fileName: 'ui-states/page-events.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('events - page events').should('be.visible') + cy.percySnapshot() + }) + }) + }) - cy.get('@nestedTests').should('be.visible') - cy.get('@nestedTests').click() - cy.percySnapshot('ui-states: Nested Tests') - cy.get('@nestedTests').click() + describe('errors', () => { + beforeEach(() => { + cy.viewport(1000, 3000) + }) + + it('simple error with docs link', () => { + runSpec({ + fileName: 'ui-states/errors.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('simple error with docs link').should('be.visible') + cy.percySnapshot() + }) + }) + }) + + it('long error', () => { + runSpec({ + fileName: 'ui-states/errors.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('long error').should('be.visible') + cy.percySnapshot() }) }) }) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js similarity index 66% rename from system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js rename to system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index 9d0b86f0efbf..ba0067970c36 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states.runner.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -1,25 +1,3 @@ -describe('Hooks', () => { - before(() => { - cy.log('command in "before" hook') - }) - - beforeEach(() => { - cy.log('command in "beforeEach" hook') - }) - - it('test hooks', () => { - cy.log('command in "it" test') - }) - - afterEach(() => { - cy.log('command in "afterEach" hook') - }) - - after(() => { - cy.log('command in "after" hook') - }) -}) - describe('Commands', () => { it('commands that dont display in UI', () => { cy.visit('cypress/fixtures/commandsActions.html') @@ -260,92 +238,3 @@ describe('Commands', () => { .should('not.be.visible') }) }) - -describe('Status Codes', () => { - it('Request Statuses', () => { - cy.request('https://httpstat.us/200') - cy.request('https://httpstat.us/304') - - cy.request({ - url: 'https://httpstat.us/400', - failOnStatusCode: false, - }) - - cy.request({ - url: 'https://httpstat.us/502', - failOnStatusCode: false, - }) - - cy.request({ - url: 'https://httpstat.us/103', - timeout: 2000, - }) - }) -}) - -describe('Page Events', () => { - it('events - page events', () => { - cy.visit('cypress/fixtures/commandsActions.html') - - cy.get('form').first().submit() - - cy.visit('cypress/fixtures/aliasing.html') - cy.get('.network-btn').click() - }) -}) - -describe('Errors', () => { - it('simple error with docs link', () => { - cy.visit('cypress/fixtures/commandsActions.html') - cy.get('div') - .click() - }) - - it('long error', () => { - cy.request('http://httpstat.us/500') - }) -}) - -describe('Nested Tests', () => { - context('level 2', () => { - context('level 3', () => { - context('level 4', () => { - context('level 5', () => { - context('level 6', () => { - context('level 7', () => { - context('level 8', () => { - context('level 9', () => { - context('level 10', () => { - context('level 11', () => { - context('level 12', () => { - context('level 13', () => { - context('level 14', () => { - context('level 15', () => { - context('level 16', () => { - context('level 17', () => { - context('level 18', () => { - context('level 19', () => { - context('level 20', () => { - it('passing test', () => { - expect(true).to.be.true - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) - }) -}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/errors.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/errors.cy.js new file mode 100644 index 000000000000..e0370f113b38 --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/errors.cy.js @@ -0,0 +1,11 @@ +describe('Errors', () => { + it('simple error with docs link', () => { + cy.visit('cypress/fixtures/commandsActions.html') + cy.get('div') + .click() + }) + + it('long error', () => { + cy.request('http://httpstat.us/500') + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/hooks.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/hooks.cy.js new file mode 100644 index 000000000000..221496e1519c --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/hooks.cy.js @@ -0,0 +1,21 @@ +describe('Hooks', () => { + before(() => { + cy.log('command in "before" hook') + }) + + beforeEach(() => { + cy.log('command in "beforeEach" hook') + }) + + it('test hooks', () => { + cy.log('command in "it" test') + }) + + afterEach(() => { + cy.log('command in "afterEach" hook') + }) + + after(() => { + cy.log('command in "after" hook') + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/nested-tests.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/nested-tests.cy.js new file mode 100644 index 000000000000..f833f661058f --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/nested-tests.cy.js @@ -0,0 +1,43 @@ +describe('Nested Tests', () => { + context('level 2', () => { + context('level 3', () => { + context('level 4', () => { + context('level 5', () => { + context('level 6', () => { + context('level 7', () => { + context('level 8', () => { + context('level 9', () => { + context('level 10', () => { + context('level 11', () => { + context('level 12', () => { + context('level 13', () => { + context('level 14', () => { + context('level 15', () => { + context('level 16', () => { + context('level 17', () => { + context('level 18', () => { + context('level 19', () => { + context('level 20', () => { + it('passing test', () => { + expect(true).to.be.true + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/page-events.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/page-events.cy.js new file mode 100644 index 000000000000..4b573d32e11b --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/page-events.cy.js @@ -0,0 +1,10 @@ +describe('Page Events', () => { + it('events - page events', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('form').first().submit() + + cy.visit('cypress/fixtures/aliasing.html') + cy.get('.network-btn').click() + }) +}) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/status-codes.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/status-codes.cy.js new file mode 100644 index 000000000000..6e7be797872e --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/status-codes.cy.js @@ -0,0 +1,21 @@ +describe('Status Codes', () => { + it('Request Statuses', () => { + cy.request('https://httpstat.us/200') + cy.request('https://httpstat.us/304') + + cy.request({ + url: 'https://httpstat.us/400', + failOnStatusCode: false, + }) + + cy.request({ + url: 'https://httpstat.us/502', + failOnStatusCode: false, + }) + + cy.request({ + url: 'https://httpstat.us/103', + timeout: 2000, + }) + }) +}) From a3c64195965a9aa77d59f2ec2fc02262ddc37bf6 Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 17:01:11 -0500 Subject: [PATCH 06/10] Refactor UI states tests to include multiple parts for commands and options, enhancing visibility checks and structure. Updated test descriptions for clarity and added new test cases for better coverage. --- .../app/cypress/e2e/runner/ui-states.cy.ts | 80 ++++++++++++++++--- .../e2e/runner/ui-states/commands.cy.js | 20 ++++- 2 files changed, 88 insertions(+), 12 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index 2f5d1f9cefc4..e20ecd23e97f 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -54,9 +54,43 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) }) - it('commands that display in UI', () => { - cy.viewport(1000, 2800) + it('commands that display in UI - part 1', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('commands that display in UI - part 1').should('be.visible') + .click() + + cy.percySnapshot() + }) + }) + }) + + it('commands that display in UI - part 2', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('commands that display in UI - part 2').should('be.visible') + .click() + + cy.percySnapshot() + }) + }) + }) + it('commands that display in UI - part 3', () => { runSpec({ fileName: 'ui-states/commands.cy.js', }) @@ -66,7 +100,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 resolve() }) }).then(() => { - cy.contains('commands that display in UI').should('be.visible') + cy.contains('commands that display in UI - part 3').should('be.visible') .click() cy.percySnapshot() @@ -74,9 +108,39 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) }) - it('command options', () => { - cy.viewport(1000, 3200) + it('command options - part 1', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options - part 1').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + + it('command options - part 2', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options - part 2').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + it('command options - part 3', () => { runSpec({ fileName: 'ui-states/commands.cy.js', }) @@ -86,7 +150,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 resolve() }) }).then(() => { - cy.contains('command options').as('commandOptions').should('be.visible').click() + cy.contains('command options - part 3').should('be.visible').click() cy.percySnapshot() }) }) @@ -142,10 +206,6 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) describe('errors', () => { - beforeEach(() => { - cy.viewport(1000, 3000) - }) - it('simple error with docs link', () => { runSpec({ fileName: 'ui-states/errors.cy.js', diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index ba0067970c36..58d21964c6d9 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -31,7 +31,7 @@ describe('Commands', () => { cy.stub(obj, 'bar') }) - it('commands that display in UI', () => { + it('commands that display in UI - part 1', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('.action-blur') @@ -65,6 +65,10 @@ describe('Commands', () => { cy.clock(now) cy.tick(10000) + }) + + it('commands that display in UI - part 2', () => { + cy.visit('cypress/fixtures/commandsActions.html') cy.get('li').closest('.nav') @@ -106,6 +110,10 @@ describe('Commands', () => { .prev() .prevAll() .prevUntil() + }) + + it('commands that display in UI - part 3', () => { + cy.visit('cypress/fixtures/commandsActions.html') cy.get('div').first() .scrollIntoView() @@ -142,7 +150,7 @@ describe('Commands', () => { }) }) - it('command options', () => { + it('command options - part 1', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').focus().blur({ force: false }) @@ -167,6 +175,10 @@ describe('Commands', () => { cy.get('input').filter('#a', { timeout: 2007 }) cy.get('form').find('#a', { timeout: 2008 }) cy.get('input').first({ timeout: 2009 }) + }) + + it('command options - part 2', () => { + cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').focus({ timeout: 2010 }) cy.get('#a').focus() @@ -194,6 +206,10 @@ describe('Commands', () => { cy.get('button').rightclick({ timeout: 2028 }) cy.root({ timeout: 2028 }) + }) + + it('command options - part 3', () => { + cy.visit('cypress/fixtures/uiStates.html') cy.screenshot({ capture: 'viewport' }) cy.get('form').scrollIntoView({ From de900670e620e5f2c001b9e42a65e57282a1dc0a Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 17:42:24 -0500 Subject: [PATCH 07/10] Refactor UI states tests by renaming command test files for clarity and adding new tests for enhanced coverage. Introduced a new file for commands to display in UI, and updated existing tests to improve structure and naming conventions. --- .../app/cypress/e2e/runner/ui-states.cy.ts | 25 +++- .../e2e/runner/ui-states/commands.cy.js | 6 +- .../runner/ui-states/commandsToDisplay.cy.js | 124 ++++++++++++++++++ 3 files changed, 151 insertions(+), 4 deletions(-) create mode 100644 system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index e20ecd23e97f..b05ab445474f 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -56,7 +56,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 it('commands that display in UI - part 1', () => { runSpec({ - fileName: 'ui-states/commands.cy.js', + fileName: 'ui-states/commandsToDisplay.cy.js', }) .then((win) => { return new Promise((resolve) => { @@ -74,7 +74,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 it('commands that display in UI - part 2', () => { runSpec({ - fileName: 'ui-states/commands.cy.js', + fileName: 'ui-states/commandsToDisplay.cy.js', }) .then((win) => { return new Promise((resolve) => { @@ -92,7 +92,25 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 it('commands that display in UI - part 3', () => { runSpec({ - fileName: 'ui-states/commands.cy.js', + fileName: 'ui-states/commandsToDisplay.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('commands that display in UI - part 3').should('be.visible') + .click() + + cy.percySnapshot() + }) + }) + }) + + it('commands that display in UI - part 4', () => { + runSpec({ + fileName: 'ui-states/commandsToDisplay.cy.js', }) .then((win) => { return new Promise((resolve) => { @@ -232,6 +250,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 resolve() }) }).then(() => { + cy.contains('simple error with docs link').click() cy.contains('long error').should('be.visible') cy.percySnapshot() }) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index 58d21964c6d9..9e34eadd4e0b 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -67,7 +67,7 @@ describe('Commands', () => { cy.tick(10000) }) - it('commands that display in UI - part 2', () => { + it('commands that display in UI - part 2a', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('li').closest('.nav') @@ -89,6 +89,10 @@ describe('Commands', () => { cy.go('forward') cy.hash() + }) + + it('commands that display in UI - part 2b', () => { + cy.visit('cypress/fixtures/commandsActions.html') cy.get('div').invoke('text') diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js new file mode 100644 index 000000000000..1d0ff6ba2505 --- /dev/null +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js @@ -0,0 +1,124 @@ +describe('Commands to display in UI', () => { + it('commands that display in UI - part 1', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('.action-blur') + .type('foo') + .clear() + + cy.focused() + .blur() + + cy.get('.action-check [type="checkbox"]').first() + .check() + .uncheck() + + cy.get('div') + .children() + + cy.setCookie('fakeCookie', '123ABC') + cy.getCookie('fakeCookie') + cy.getCookies() + cy.clearCookie('fakeCookie') + cy.clearCookies() + + cy.clearLocalStorage() + + cy.get('.action-btn') + .click() + .dblclick() + .rightclick() + + const now = new Date(Date.UTC(2017, 2, 14)).getTime() + + cy.clock(now) + cy.tick(10000) + }) + + it('commands that display in UI - part 2', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('li').closest('.nav') + + cy.contains('Commands') + cy.get('li').contains('Commands') + + cy.document() + + cy.get('div').eq(0) + + cy.exec('echo Jane Lane') + + cy.get('div') + .filter('.container') + .find('#navbar') + .first() + + cy.go('forward') + + cy.hash() + }) + + it('commands that display in UI - part 3', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('div').invoke('text') + + cy.get('div').its('length') + + cy.get('div').last() + + cy.location() + + cy.log('message') + + cy.get('div') + .next() + .nextAll() + .not('.container') + .parent() + .parents() + .parentsUntil() + .prev() + .prevAll() + .prevUntil() + }) + + it('commands that display in UI - part 4', () => { + cy.visit('cypress/fixtures/commandsActions.html') + + cy.get('div').first() + .scrollIntoView() + .screenshot() + + cy.scrollTo('bottom') + + cy.get('.action-select') + .select('apples') + .siblings() + + cy.get('form').first() + + cy.title() + + cy.get('div').first().trigger('click') + + cy.url() + + cy.viewport('ipad-2') + + cy.wait(2) + + cy.window() + + cy.get('div').first().within(() => { + + }) + + cy.wrap({ foo: 'bar' }) + + cy.session('session', () => { + cy.visit('cypress/fixtures/uiStates.html') + }) + }) +}) From e25a545b8ea87603c7f7db323929ba46dfb83895 Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Thu, 22 May 2025 18:06:26 -0500 Subject: [PATCH 08/10] Remove outdated UI commands tests to streamline the test suite and improve maintainability. This cleanup focuses on consolidating test cases and enhancing overall structure. --- .../e2e/runner/ui-states/commands.cy.js | 123 ------------------ 1 file changed, 123 deletions(-) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index 9e34eadd4e0b..6cf606ec4454 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -31,129 +31,6 @@ describe('Commands', () => { cy.stub(obj, 'bar') }) - it('commands that display in UI - part 1', () => { - cy.visit('cypress/fixtures/commandsActions.html') - - cy.get('.action-blur') - .type('foo') - .clear() - - cy.focused() - .blur() - - cy.get('.action-check [type="checkbox"]').first() - .check() - .uncheck() - - cy.get('div') - .children() - - cy.setCookie('fakeCookie', '123ABC') - cy.getCookie('fakeCookie') - cy.getCookies() - cy.clearCookie('fakeCookie') - cy.clearCookies() - - cy.clearLocalStorage() - - cy.get('.action-btn') - .click() - .dblclick() - .rightclick() - - const now = new Date(Date.UTC(2017, 2, 14)).getTime() - - cy.clock(now) - cy.tick(10000) - }) - - it('commands that display in UI - part 2a', () => { - cy.visit('cypress/fixtures/commandsActions.html') - - cy.get('li').closest('.nav') - - cy.contains('Commands') - cy.get('li').contains('Commands') - - cy.document() - - cy.get('div').eq(0) - - cy.exec('echo Jane Lane') - - cy.get('div') - .filter('.container') - .find('#navbar') - .first() - - cy.go('forward') - - cy.hash() - }) - - it('commands that display in UI - part 2b', () => { - cy.visit('cypress/fixtures/commandsActions.html') - - cy.get('div').invoke('text') - - cy.get('div').its('length') - - cy.get('div').last() - - cy.location() - - cy.log('message') - - cy.get('div') - .next() - .nextAll() - .not('.container') - .parent() - .parents() - .parentsUntil() - .prev() - .prevAll() - .prevUntil() - }) - - it('commands that display in UI - part 3', () => { - cy.visit('cypress/fixtures/commandsActions.html') - - cy.get('div').first() - .scrollIntoView() - .screenshot() - - cy.scrollTo('bottom') - - cy.get('.action-select') - .select('apples') - .siblings() - - cy.get('form').first() - - cy.title() - - cy.get('div').first().trigger('click') - - cy.url() - - cy.viewport('ipad-2') - - cy.wait(2) - - cy.window() - - cy.get('div').first().within(() => { - - }) - - cy.wrap({ foo: 'bar' }) - - cy.session('session', () => { - cy.visit('cypress/fixtures/uiStates.html') - }) - }) - it('command options - part 1', () => { cy.visit('cypress/fixtures/uiStates.html') From f0865e6db34e12f1e1dce2b5f4a5f65a38760a56 Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Fri, 23 May 2025 09:36:53 -0500 Subject: [PATCH 09/10] Add additional command options tests for UI states, enhancing coverage with parts 4, 5, and 6. Updated existing test descriptions for clarity and improved structure in the Cypress test suite. --- .../app/cypress/e2e/runner/ui-states.cy.ts | 48 +++++++++++++++++++ .../e2e/runner/ui-states/commands.cy.js | 24 ++++++---- 2 files changed, 64 insertions(+), 8 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index b05ab445474f..41aff7fe1b96 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -174,6 +174,54 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) }) + it('command options - part 4', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options - part 4').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + + it('command options - part 5', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options - part 5').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + + it('command options - part 6', () => { + runSpec({ + fileName: 'ui-states/commands.cy.js', + }) + .then((win) => { + return new Promise((resolve) => { + win.getEventManager().on('cypress:in:cypress:run:complete', () => { + resolve() + }) + }).then(() => { + cy.contains('command options - part 6').should('be.visible').click() + cy.percySnapshot() + }) + }) + }) + it('Element Visibility', () => { runSpec({ fileName: 'ui-states/commands.cy.js', diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index 6cf606ec4454..aff9a9493397 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -44,6 +44,10 @@ describe('Commands', () => { cy.contains('button').click({ force: false }) cy.contains('button').click(1, 2, { force: false }) cy.contains('button').click('bottom', { force: false }) + }) + + it('command options - part 2', () => { + cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').closest('form', { timeout: 2003 }) cy.contains('.test', 'Hello', { timeout: 2004 }) @@ -58,7 +62,7 @@ describe('Commands', () => { cy.get('input').first({ timeout: 2009 }) }) - it('command options - part 2', () => { + it('command options - part 3', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').focus({ timeout: 2010 }) @@ -73,23 +77,26 @@ describe('Commands', () => { cy.location('port', { timeout: 2017 }) cy.get('#a').next('input', { timeout: 2018 }) cy.get('#a').nextAll('input', { timeout: 2019 }) + }) + + it('command options - part 4', () => { + cy.visit('cypress/fixtures/uiStates.html') + cy.get('#a').nextUntil('#b', { timeout: 2020 }) cy.get('input').not('#a', { timeout: 2021 }) cy.get('#a').parent('form', { timeout: 2022 }) cy.get('#a').parents('form', { timeout: 2023 }) cy.get('#a').parentsUntil('body', { timeout: 2024 }) - cy.get('#b').prev('input', { timeout: 2025 }) cy.get('#b').prevAll('input', { timeout: 2026 }) cy.get('#b').prevUntil('#a', { timeout: 2027 }) cy.readFile('./cypress/fixtures/uiStates.json', { timeout: 2028 }) cy.reload(true, { timeout: 2028 }) - cy.get('button').rightclick({ timeout: 2028 }) cy.root({ timeout: 2028 }) }) - it('command options - part 3', () => { + it('command options - part 5', () => { cy.visit('cypress/fixtures/uiStates.html') cy.screenshot({ capture: 'viewport' }) @@ -102,14 +109,15 @@ describe('Commands', () => { cy.scrollTo(0, 500, { duration: 100 }) cy.get('#fruits').select('apples', { force: false }) - cy.setCookie('auth_key', '123key', { httpOnly: true }) - cy.get('#a').siblings('input', { timeout: 2029 }) - cy.get('form').submit({ timeout: 2030 }) - cy.title({ timeout: 2032 }) + }) + + it('command options - part 6', () => { + cy.visit('cypress/fixtures/uiStates.html') + cy.get('#a').trigger('mouseenter', 'top', { cancelable: true }) cy.get('#a').type('hi?', { delay: 10, From 6e876e854db89d0d980f4097d5b242dd408d4c3d Mon Sep 17 00:00:00 2001 From: estrada9166 Date: Fri, 23 May 2025 10:42:22 -0500 Subject: [PATCH 10/10] Update with code review --- .../app/cypress/e2e/runner/ui-states.cy.ts | 366 ++++++------------ .../e2e/runner/ui-states/commands.cy.js | 18 +- .../runner/ui-states/commandsToDisplay.cy.js | 8 +- 3 files changed, 141 insertions(+), 251 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts index 41aff7fe1b96..8429223b6024 100644 --- a/packages/app/cypress/e2e/runner/ui-states.cy.ts +++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts @@ -1,4 +1,4 @@ -import { runSpec } from './support/spec-loader' +import { loadSpec } from './support/spec-loader' describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => { beforeEach(() => { @@ -6,303 +6,193 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60 }) it('hooks', () => { - runSpec({ - fileName: 'ui-states/hooks.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('test hooks').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/hooks.cy.js', + passCount: 1, }) + + cy.contains('test hooks').should('be.visible') + cy.percySnapshot() }) it('nested tests', () => { - runSpec({ - fileName: 'ui-states/nested-tests.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('Nested Tests').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/nested-tests.cy.js', + passCount: 1, }) + + cy.contains('Nested Tests').should('be.visible') + cy.percySnapshot() }) describe('commands', () => { - it('commands that dont display in UI', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('commands that dont display in UI').should('be.visible').click() - cy.percySnapshot() - }) + it('part 1 - basic commands', () => { + loadSpec({ + filePath: 'runner/ui-states/commandsToDisplay.cy.js', + passCount: 1, }) + + cy.contains('part 1 - basic commands').should('be.visible').click() + cy.percySnapshot() }) - it('commands that display in UI - part 1', () => { - runSpec({ - fileName: 'ui-states/commandsToDisplay.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('commands that display in UI - part 1').should('be.visible') - .click() - - cy.percySnapshot() - }) + it('part 2 - traversal and navigation', () => { + loadSpec({ + filePath: 'runner/ui-states/commandsToDisplay.cy.js', + passCount: 2, }) + + cy.contains('part 2 - traversal and navigation').should('be.visible') + .click() + + cy.percySnapshot() }) - it('commands that display in UI - part 2', () => { - runSpec({ - fileName: 'ui-states/commandsToDisplay.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('commands that display in UI - part 2').should('be.visible') - .click() - - cy.percySnapshot() - }) + it('part 3 - element manipulation', () => { + loadSpec({ + filePath: 'runner/ui-states/commandsToDisplay.cy.js', + passCount: 3, }) + + cy.contains('part 3 - element manipulation').should('be.visible') + .click() + + cy.percySnapshot() }) - it('commands that display in UI - part 3', () => { - runSpec({ - fileName: 'ui-states/commandsToDisplay.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('commands that display in UI - part 3').should('be.visible') - .click() - - cy.percySnapshot() - }) + it('part 4 - advanced interactions', () => { + loadSpec({ + filePath: 'runner/ui-states/commandsToDisplay.cy.js', + passCount: 4, }) + + cy.contains('part 4 - advanced interactions').should('be.visible') + .click() + + cy.percySnapshot() }) - it('commands that display in UI - part 4', () => { - runSpec({ - fileName: 'ui-states/commandsToDisplay.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('commands that display in UI - part 3').should('be.visible') - .click() - - cy.percySnapshot() - }) + it('commands that do not appear in command log', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 1, }) + + cy.contains('commands that do not appear in command log').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 1', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 1').should('be.visible').click() - cy.percySnapshot() - }) + it('form interaction command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 2, }) + + cy.contains('form interaction command options').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 2', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 2').should('be.visible').click() - cy.percySnapshot() - }) + it('DOM traversal command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 3, }) + + cy.contains('DOM traversal command options').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 3', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 3').should('be.visible').click() - cy.percySnapshot() - }) + it('element state and navigation command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 4, }) + + cy.contains('element state and navigation command options').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 4', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 4').should('be.visible').click() - cy.percySnapshot() - }) + it('element traversal and file operations command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 5, }) + + cy.contains('element traversal and file operations command options').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 5', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 5').should('be.visible').click() - cy.percySnapshot() - }) + it('scrolling and form interaction command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 6, }) + + cy.contains('scrolling and form interaction command options').should('be.visible').click() + cy.percySnapshot() }) - it('command options - part 6', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('command options - part 6').should('be.visible').click() - cy.percySnapshot() - }) + it('user interaction and window command options', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 7, }) + + cy.contains('user interaction and window command options').should('be.visible').click() + cy.percySnapshot() }) - it('Element Visibility', () => { - runSpec({ - fileName: 'ui-states/commands.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('Element Visibility').should('be.visible').click() - cy.percySnapshot() - }) + it('verify element visibility state', () => { + loadSpec({ + filePath: 'runner/ui-states/commands.cy.js', + passCount: 8, }) + + cy.contains('verify element visibility state').should('be.visible').click() + cy.percySnapshot() }) }) it('status codes', () => { - runSpec({ - fileName: 'ui-states/status-codes.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('Request Statuses').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/status-codes.cy.js', + failCount: 1, }) + + cy.contains('Request Statuses').should('be.visible') + cy.percySnapshot() }) it('page events', () => { - runSpec({ - fileName: 'ui-states/page-events.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('events - page events').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/page-events.cy.js', + failCount: 1, }) + + cy.contains('events - page events').should('be.visible') + cy.percySnapshot() }) describe('errors', () => { it('simple error with docs link', () => { - runSpec({ - fileName: 'ui-states/errors.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('simple error with docs link').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/errors.cy.js', + failCount: 1, }) + + cy.contains('simple error with docs link').should('be.visible') + cy.percySnapshot() }) it('long error', () => { - runSpec({ - fileName: 'ui-states/errors.cy.js', - }) - .then((win) => { - return new Promise((resolve) => { - win.getEventManager().on('cypress:in:cypress:run:complete', () => { - resolve() - }) - }).then(() => { - cy.contains('simple error with docs link').click() - cy.contains('long error').should('be.visible') - cy.percySnapshot() - }) + loadSpec({ + filePath: 'runner/ui-states/errors.cy.js', + failCount: 2, }) + + cy.contains('simple error with docs link').click() + cy.contains('long error').should('be.visible') + cy.percySnapshot() }) }) }) diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js index aff9a9493397..c75f84c7d225 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js @@ -1,5 +1,5 @@ -describe('Commands', () => { - it('commands that dont display in UI', () => { +describe('Command Options and UI Display Tests', () => { + it('commands that do not appear in command log', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.wrap({ foo: { bar: 'baz' } }) @@ -31,7 +31,7 @@ describe('Commands', () => { cy.stub(obj, 'bar') }) - it('command options - part 1', () => { + it('form interaction command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').focus().blur({ force: false }) @@ -46,7 +46,7 @@ describe('Commands', () => { cy.contains('button').click('bottom', { force: false }) }) - it('command options - part 2', () => { + it('DOM traversal command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').closest('form', { timeout: 2003 }) @@ -62,7 +62,7 @@ describe('Commands', () => { cy.get('input').first({ timeout: 2009 }) }) - it('command options - part 3', () => { + it('element state and navigation command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').focus({ timeout: 2010 }) @@ -79,7 +79,7 @@ describe('Commands', () => { cy.get('#a').nextAll('input', { timeout: 2019 }) }) - it('command options - part 4', () => { + it('element traversal and file operations command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').nextUntil('#b', { timeout: 2020 }) @@ -96,7 +96,7 @@ describe('Commands', () => { cy.root({ timeout: 2028 }) }) - it('command options - part 5', () => { + it('scrolling and form interaction command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.screenshot({ capture: 'viewport' }) @@ -115,7 +115,7 @@ describe('Commands', () => { cy.title({ timeout: 2032 }) }) - it('command options - part 6', () => { + it('user interaction and window command options', () => { cy.visit('cypress/fixtures/uiStates.html') cy.get('#a').trigger('mouseenter', 'top', { cancelable: true }) @@ -136,7 +136,7 @@ describe('Commands', () => { cy.writeFile('./cypress/_test-output/test.txt', 'test', { timeout: 2036 }) }) - it('Element Visibility', () => { + it('verify element visibility state', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('#scroll-horizontal button') diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js index 1d0ff6ba2505..41a9df7c18b6 100644 --- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js +++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js @@ -1,5 +1,5 @@ describe('Commands to display in UI', () => { - it('commands that display in UI - part 1', () => { + it('part 1 - basic commands', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('.action-blur') @@ -35,7 +35,7 @@ describe('Commands to display in UI', () => { cy.tick(10000) }) - it('commands that display in UI - part 2', () => { + it('part 2 - traversal and navigation', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('li').closest('.nav') @@ -59,7 +59,7 @@ describe('Commands to display in UI', () => { cy.hash() }) - it('commands that display in UI - part 3', () => { + it('part 3 - element manipulation', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('div').invoke('text') @@ -84,7 +84,7 @@ describe('Commands to display in UI', () => { .prevUntil() }) - it('commands that display in UI - part 4', () => { + it('part 4 - advanced interactions', () => { cy.visit('cypress/fixtures/commandsActions.html') cy.get('div').first()