Skip to content

Commit b5e2f7a

Browse files
estrada9166jennifer-shehane
estrada9166
and
jennifer-shehane
authored
chore: add ui states tests (#31768)
* chore: add ui states tests * refactor: enhance UI states tests with specific Percy snapshot names * refactor: streamline UI states tests by using aliases for elements and improving visibility checks * Trigger run * 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. * 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. * 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. * Remove outdated UI commands tests to streamline the test suite and improve maintainability. This cleanup focuses on consolidating test cases and enhancing overall structure. * 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. * Update with code review --------- Co-authored-by: Jennifer Shehane <[email protected]>
1 parent cf2525d commit b5e2f7a

File tree

11 files changed

+1666
-0
lines changed

11 files changed

+1666
-0
lines changed

‎packages/app/cypress/e2e/runner/ui-states.cy.ts

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import { loadSpec } from './support/spec-loader'
2+
3+
describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => {
4+
beforeEach(() => {
5+
cy.viewport(1000, 1500)
6+
})
7+
8+
it('hooks', () => {
9+
loadSpec({
10+
filePath: 'runner/ui-states/hooks.cy.js',
11+
passCount: 1,
12+
})
13+
14+
cy.contains('test hooks').should('be.visible')
15+
cy.percySnapshot()
16+
})
17+
18+
it('nested tests', () => {
19+
loadSpec({
20+
filePath: 'runner/ui-states/nested-tests.cy.js',
21+
passCount: 1,
22+
})
23+
24+
cy.contains('Nested Tests').should('be.visible')
25+
cy.percySnapshot()
26+
})
27+
28+
describe('commands', () => {
29+
it('part 1 - basic commands', () => {
30+
loadSpec({
31+
filePath: 'runner/ui-states/commandsToDisplay.cy.js',
32+
passCount: 1,
33+
})
34+
35+
cy.contains('part 1 - basic commands').should('be.visible').click()
36+
cy.percySnapshot()
37+
})
38+
39+
it('part 2 - traversal and navigation', () => {
40+
loadSpec({
41+
filePath: 'runner/ui-states/commandsToDisplay.cy.js',
42+
passCount: 2,
43+
})
44+
45+
cy.contains('part 2 - traversal and navigation').should('be.visible')
46+
.click()
47+
48+
cy.percySnapshot()
49+
})
50+
51+
it('part 3 - element manipulation', () => {
52+
loadSpec({
53+
filePath: 'runner/ui-states/commandsToDisplay.cy.js',
54+
passCount: 3,
55+
})
56+
57+
cy.contains('part 3 - element manipulation').should('be.visible')
58+
.click()
59+
60+
cy.percySnapshot()
61+
})
62+
63+
it('part 4 - advanced interactions', () => {
64+
loadSpec({
65+
filePath: 'runner/ui-states/commandsToDisplay.cy.js',
66+
passCount: 4,
67+
})
68+
69+
cy.contains('part 4 - advanced interactions').should('be.visible')
70+
.click()
71+
72+
cy.percySnapshot()
73+
})
74+
75+
it('commands that do not appear in command log', () => {
76+
loadSpec({
77+
filePath: 'runner/ui-states/commands.cy.js',
78+
passCount: 1,
79+
})
80+
81+
cy.contains('commands that do not appear in command log').should('be.visible').click()
82+
cy.percySnapshot()
83+
})
84+
85+
it('form interaction command options', () => {
86+
loadSpec({
87+
filePath: 'runner/ui-states/commands.cy.js',
88+
passCount: 2,
89+
})
90+
91+
cy.contains('form interaction command options').should('be.visible').click()
92+
cy.percySnapshot()
93+
})
94+
95+
it('DOM traversal command options', () => {
96+
loadSpec({
97+
filePath: 'runner/ui-states/commands.cy.js',
98+
passCount: 3,
99+
})
100+
101+
cy.contains('DOM traversal command options').should('be.visible').click()
102+
cy.percySnapshot()
103+
})
104+
105+
it('element state and navigation command options', () => {
106+
loadSpec({
107+
filePath: 'runner/ui-states/commands.cy.js',
108+
passCount: 4,
109+
})
110+
111+
cy.contains('element state and navigation command options').should('be.visible').click()
112+
cy.percySnapshot()
113+
})
114+
115+
it('element traversal and file operations command options', () => {
116+
loadSpec({
117+
filePath: 'runner/ui-states/commands.cy.js',
118+
passCount: 5,
119+
})
120+
121+
cy.contains('element traversal and file operations command options').should('be.visible').click()
122+
cy.percySnapshot()
123+
})
124+
125+
it('scrolling and form interaction command options', () => {
126+
loadSpec({
127+
filePath: 'runner/ui-states/commands.cy.js',
128+
passCount: 6,
129+
})
130+
131+
cy.contains('scrolling and form interaction command options').should('be.visible').click()
132+
cy.percySnapshot()
133+
})
134+
135+
it('user interaction and window command options', () => {
136+
loadSpec({
137+
filePath: 'runner/ui-states/commands.cy.js',
138+
passCount: 7,
139+
})
140+
141+
cy.contains('user interaction and window command options').should('be.visible').click()
142+
cy.percySnapshot()
143+
})
144+
145+
it('verify element visibility state', () => {
146+
loadSpec({
147+
filePath: 'runner/ui-states/commands.cy.js',
148+
passCount: 8,
149+
})
150+
151+
cy.contains('verify element visibility state').should('be.visible').click()
152+
cy.percySnapshot()
153+
})
154+
})
155+
156+
it('status codes', () => {
157+
loadSpec({
158+
filePath: 'runner/ui-states/status-codes.cy.js',
159+
failCount: 1,
160+
})
161+
162+
cy.contains('Request Statuses').should('be.visible')
163+
cy.percySnapshot()
164+
})
165+
166+
it('page events', () => {
167+
loadSpec({
168+
filePath: 'runner/ui-states/page-events.cy.js',
169+
failCount: 1,
170+
})
171+
172+
cy.contains('events - page events').should('be.visible')
173+
cy.percySnapshot()
174+
})
175+
176+
describe('errors', () => {
177+
it('simple error with docs link', () => {
178+
loadSpec({
179+
filePath: 'runner/ui-states/errors.cy.js',
180+
failCount: 1,
181+
})
182+
183+
cy.contains('simple error with docs link').should('be.visible')
184+
cy.percySnapshot()
185+
})
186+
187+
it('long error', () => {
188+
loadSpec({
189+
filePath: 'runner/ui-states/errors.cy.js',
190+
failCount: 2,
191+
})
192+
193+
cy.contains('simple error with docs link').click()
194+
cy.contains('long error').should('be.visible')
195+
cy.percySnapshot()
196+
})
197+
})
198+
})

‎system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
describe('Command Options and UI Display Tests', () => {
2+
it('commands that do not appear in command log', () => {
3+
cy.visit('cypress/fixtures/commandsActions.html')
4+
5+
cy.wrap({ foo: { bar: 'baz' } })
6+
.then((obj) => obj)
7+
.should('have.property', 'foo')
8+
.and('have.property', 'bar')
9+
10+
cy.wrap({ foo: { bar: 'baz' } })
11+
.as('myObject')
12+
13+
cy.get('@myObject').then((obj) => {
14+
cy.log(obj)
15+
})
16+
17+
cy.get('div').each(($div) => { }).end()
18+
19+
cy.fixture('uiStates')
20+
21+
cy.intercept('GET', 'comments/*').as('getComment')
22+
23+
cy.wrap(['foo', 'bar']).spread(() => {})
24+
25+
const obj = {
26+
foo () { },
27+
bar () { },
28+
}
29+
30+
cy.spy(obj, 'foo')
31+
cy.stub(obj, 'bar')
32+
})
33+
34+
it('form interaction command options', () => {
35+
cy.visit('cypress/fixtures/uiStates.html')
36+
37+
cy.get('#a').focus().blur({ force: false })
38+
cy.get('#checkbox').check({ force: false })
39+
cy.get('form').children({ timeout: 2000 })
40+
cy.get('#a').clear({ force: false })
41+
cy.clearCookie('authId', { timeout: 2001 })
42+
cy.clearCookies({ timeout: 2002 })
43+
44+
cy.contains('button').click({ force: false })
45+
cy.contains('button').click(1, 2, { force: false })
46+
cy.contains('button').click('bottom', { force: false })
47+
})
48+
49+
it('DOM traversal command options', () => {
50+
cy.visit('cypress/fixtures/uiStates.html')
51+
52+
cy.get('#a').closest('form', { timeout: 2003 })
53+
cy.contains('.test', 'Hello', { timeout: 2004 })
54+
cy.get('button').dblclick({ force: false })
55+
56+
cy.document({ timeout: 2005 })
57+
58+
cy.get('input').eq(0, { timeout: 2006 })
59+
cy.exec('ls', { env: { 'a': true } })
60+
cy.get('input').filter('#a', { timeout: 2007 })
61+
cy.get('form').find('#a', { timeout: 2008 })
62+
cy.get('input').first({ timeout: 2009 })
63+
})
64+
65+
it('element state and navigation command options', () => {
66+
cy.visit('cypress/fixtures/uiStates.html')
67+
68+
cy.get('#a').focus({ timeout: 2010 })
69+
cy.get('#a').focus()
70+
cy.focused({ timeout: 2011 })
71+
cy.get('#a', { withinSubject: document.forms[0] })
72+
cy.getCookie('auth_key', { timeout: 2012 })
73+
cy.getCookies({ timeout: 2013 })
74+
cy.go('forward', { timeout: 2014 })
75+
cy.hash({ timeout: 2015 })
76+
cy.get('input').last({ timeout: 2016 })
77+
cy.location('port', { timeout: 2017 })
78+
cy.get('#a').next('input', { timeout: 2018 })
79+
cy.get('#a').nextAll('input', { timeout: 2019 })
80+
})
81+
82+
it('element traversal and file operations command options', () => {
83+
cy.visit('cypress/fixtures/uiStates.html')
84+
85+
cy.get('#a').nextUntil('#b', { timeout: 2020 })
86+
cy.get('input').not('#a', { timeout: 2021 })
87+
cy.get('#a').parent('form', { timeout: 2022 })
88+
cy.get('#a').parents('form', { timeout: 2023 })
89+
cy.get('#a').parentsUntil('body', { timeout: 2024 })
90+
cy.get('#b').prev('input', { timeout: 2025 })
91+
cy.get('#b').prevAll('input', { timeout: 2026 })
92+
cy.get('#b').prevUntil('#a', { timeout: 2027 })
93+
cy.readFile('./cypress/fixtures/uiStates.json', { timeout: 2028 })
94+
cy.reload(true, { timeout: 2028 })
95+
cy.get('button').rightclick({ timeout: 2028 })
96+
cy.root({ timeout: 2028 })
97+
})
98+
99+
it('scrolling and form interaction command options', () => {
100+
cy.visit('cypress/fixtures/uiStates.html')
101+
102+
cy.screenshot({ capture: 'viewport' })
103+
cy.get('form').scrollIntoView({
104+
offset: { top: 20, left: 30, right: 20, bottom: 40 },
105+
log: true,
106+
timeout: 3000,
107+
duration: 0,
108+
})
109+
110+
cy.scrollTo(0, 500, { duration: 100 })
111+
cy.get('#fruits').select('apples', { force: false })
112+
cy.setCookie('auth_key', '123key', { httpOnly: true })
113+
cy.get('#a').siblings('input', { timeout: 2029 })
114+
cy.get('form').submit({ timeout: 2030 })
115+
cy.title({ timeout: 2032 })
116+
})
117+
118+
it('user interaction and window command options', () => {
119+
cy.visit('cypress/fixtures/uiStates.html')
120+
121+
cy.get('#a').trigger('mouseenter', 'top', { cancelable: true })
122+
cy.get('#a').type('hi?', {
123+
delay: 10,
124+
force: true,
125+
})
126+
127+
cy.get('#checkbox').uncheck('good', { force: false })
128+
cy.url({ timeout: 2033 })
129+
cy.visit('cypress/fixtures/uiStates.html', {
130+
timeout: 20000,
131+
})
132+
133+
cy.wait(100, { requestTimeout: 2000 })
134+
cy.window({ timeout: 2034 })
135+
cy.wrap({ name: 'John Doe' }, { timeout: 2035 })
136+
cy.writeFile('./cypress/_test-output/test.txt', 'test', { timeout: 2036 })
137+
})
138+
139+
it('verify element visibility state', () => {
140+
cy.visit('cypress/fixtures/commandsActions.html')
141+
142+
cy.get('#scroll-horizontal button')
143+
.should('not.be.visible')
144+
})
145+
})

0 commit comments

Comments
 (0)