From 4ca420859957284d1dd97c8fb6c03ff5e8ea41f5 Mon Sep 17 00:00:00 2001 From: Christian Geyer <149682967+camelCaseChris@users.noreply.github.com> Date: Thu, 18 Jan 2024 12:11:33 +0100 Subject: [PATCH] Experiment: Reduce waits and avoidable API calls in Cypress (#3603) * Reduce waits and avoidable API calls * Remove redundant call to root path * Simplify access to shadow DOM * Clean up commented code --------- Co-authored-by: Ndricim --- .../cypress/e2e/support/commands.js | 8 +- ...luigi-client-link-manager-features-4.cy.js | 160 ++++-------------- .../luigi-client-link-manager-features.cy.js | 43 ++--- 3 files changed, 61 insertions(+), 150 deletions(-) diff --git a/test/e2e-test-application/cypress/e2e/support/commands.js b/test/e2e-test-application/cypress/e2e/support/commands.js index fcfe64d341..3383b6dec5 100644 --- a/test/e2e-test-application/cypress/e2e/support/commands.js +++ b/test/e2e-test-application/cypress/e2e/support/commands.js @@ -110,15 +110,11 @@ Cypress.Commands.add('goToLinkManagerMethods', iframe => { }); Cypress.Commands.add('goToOverviewPage', () => { - cy.get('[data-testid="overview_overview"]') - .should('exist') - .click(); + cy.get('[data-testid="overview_overview"]').click(); }); Cypress.Commands.add('goToProjectsPage', () => { - cy.get('[data-testid="projects_projects"]') - .should('exist') - .click(); + cy.get('[data-testid="projects_projects"]').click(); }); Cypress.Commands.add('selectContextSwitcherItem', (item, currentLabel) => { diff --git a/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js b/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js index d26902c454..47f4e3a5bb 100644 --- a/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js +++ b/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js @@ -1,16 +1,12 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { - beforeEach(() => { - cy.visitLoggedIn('/'); - }); - describe('Drawer', () => { let $iframeBody; + beforeEach(() => { cy.visitLoggedIn('/projects/pr2'); cy.getIframeBody().then(result => { $iframeBody = result; cy.goToLinkManagerMethods($iframeBody); - cy.expectPathToBe('/projects/pr2'); cy.get('.drawer').should('not.exist'); }); }); @@ -23,9 +19,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { cy.get('.drawer').should('exist'); cy.expectPathToBe('/projects/pr2'); - cy.get('.drawer-dialog button[aria-label="close"]') - .should('exist') - .click(); + cy.get('.drawer-dialog button[aria-label="close"]').click(); cy.get('.drawer-dialog button[aria-label="close"]').should('not.exist'); cy.get('.drawer').should('not.exist'); }); @@ -49,9 +43,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { cy.get('.drawer').should('exist'); cy.expectPathToBe('/projects/pr2'); - cy.get('.drawer-dialog button[aria-label="close"]') - .should('exist') - .click(); + cy.get('.drawer-dialog button[aria-label="close"]').click(); cy.get('.drawer').should('not.exist'); }); }); @@ -71,8 +63,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { .contains('Open drawer with no overlap') .click(); - cy.wait(500); - cy.get('.drawer-dialog') .invoke('width') .should('eq', pageWidth * 0.25); @@ -81,14 +71,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { .invoke('width') .should('eq', containerWidth - pageWidth * 0.25); cy.expectPathToBe('/projects/pr2'); - - // cy.get('.drawer-dialog button[aria-label="close"]') - // .should('exist') - // .click(); - - // cy.get('.iframeContainer iframe') - // .invoke('width') - // .should('eq', containerWidth); }); }); }); @@ -107,8 +89,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { win.Luigi.navigation().openAsDrawer('/projects/pr1/webcomponent', { overlap: false }); - cy.wait(300); - cy.get('.drawer-dialog') .invoke('width') .should('eq', pageWidth * 0.25); @@ -118,11 +98,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { .should('eq', containerWidth - pageWidth * 0.25); cy.expectPathToBe('/projects/pr2'); - cy.get('.drawer-dialog button[aria-label="close"]') - .should('exist') - .click(); - - cy.wait(300); + cy.get('.drawer-dialog button[aria-label="close"]').click(); cy.get('.iframeContainer iframe') .invoke('width') @@ -135,12 +111,12 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { describe('Split View', () => { let $iframeBody; + beforeEach(() => { cy.visitLoggedIn('/projects/pr2'); cy.getIframeBody().then(result => { $iframeBody = result; cy.goToLinkManagerMethods($iframeBody); - cy.expectPathToBe('/projects/pr2'); cy.get('.lui-split-view').should('not.exist'); }); }); @@ -167,8 +143,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { .contains('open view in split view with params') .click(); - cy.wait(500); - cy.get('.splitViewContainer').then($splitViewContainer => { const splitViewHeight = parseFloat(win.getComputedStyle($splitViewContainer[0]).height); @@ -200,22 +174,13 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { .contains('open view in split view with params') .click(); - cy.wait(500); - - cy.get('.splitViewContainer').then($splitViewContainer => { - cy.get('.lui-collapse-btn').click(); - - cy.wait(500); - + cy.get('.lui-collapse-btn').click(); + cy.get('.splitViewContainer').should($splitViewContainer => { const splitViewHeight = parseFloat(win.getComputedStyle($splitViewContainer[0]).height); - if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).marginBottom) { - cy.log('Positive'); - } else { - cy.error('Negative'); - } - cy.expectPathToBe('/projects/pr2'); + expect(`${splitViewHeight}px`).to.equal(win.getComputedStyle($iframe[0]).marginBottom); }); + cy.expectPathToBe('/projects/pr2'); }); }); }); @@ -227,110 +192,56 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { }); it('open webcomponent with visibleForFeatureToggles', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const root = container.children().prevObject[0].shadowRoot; - const wcContent = root.querySelector('p').innerText; - expect(wcContent).to.equal('Some input text !ft'); - }); - }); + cy.get('.wcContainer>div>div>[nodeid="input1"]') + .shadow() + .contains('p', 'Some input text !ft') + .should('exist'); }); }); describe('Webcomponent compound view test', () => { beforeEach(() => { cy.visitLoggedIn('/projects/pr1/wc_grid_compound'); + cy.get('.wcContainer>div>div>[nodeid="btn"]') + .shadow() + .find('button') + .as('btn'); + cy.get('.wcContainer>div>div>[nodeid="timer"]') + .shadow() + .find('p') + .as('timer'); }); it('open webcomponent btn', () => { - cy.window().then(win => { - cy.wait(700); - cy.get('.wcContainer>div>div>*').then(container => { - cy.wait(500); - const root = container.children().prevObject[0].shadowRoot; - const wcContent = root.querySelector('button').innerText; - - expect(wcContent).to.equal('Start'); - }); - }); + cy.get('@btn').should('have.text', 'Start'); }); it('open webcomponent timer', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const root = container.children().prevObject[1].shadowRoot; - const wcContent = root.querySelector('p').innerText; - - expect(wcContent).to.equal('0'); - }); - }); + cy.get('@timer').should('have.text', '0'); }); it('click on webcomponent btn', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const root = container.children().prevObject[0].shadowRoot; - root.querySelector('button').click(); - const wcContent = root.querySelector('button').innerText; - - expect(wcContent).to.equal('Stop'); - }); - }); + cy.get('@btn').click(); + cy.get('@btn').should('have.text', 'Stop'); }); it('listener on webcomponent timer', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const rootBtn = container.children().prevObject[0].shadowRoot; - rootBtn.querySelector('button').click(); - const root = container.children().prevObject[1].shadowRoot; - const wcContent = root.querySelector('p').innerText; - - expect(wcContent).to.equal('1'); - }); - }); + cy.get('@btn').click(); + cy.get('@timer').should('have.text', '1'); }); it('click start timer on webcomponent btn and reaction in webcomponent timer', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const rootBtn = container.children().prevObject[0].shadowRoot; - const wcContentStart = container.children().prevObject[1].shadowRoot.querySelector('p').innerText; - rootBtn.querySelector('button').click(); - const wcContent = rootBtn.querySelector('button').innerText; - expect(wcContent).to.equal('Stop'); - - cy.wait(500); - const wcContentStop = container.children().prevObject[1].shadowRoot.querySelector('p').innerText; - expect(wcContentStart).to.not.equal(wcContentStop); - }); - }); + cy.get('@timer').should('have.text', '0'); + cy.get('@btn').click(); + cy.get('@timer').should('have.text', '1'); }); it('click start and stop timer on webcomponent btn and reaction in webcomponent timer', () => { - cy.window().then(win => { - cy.wait(500); - cy.get('.wcContainer>div>div>*').then(container => { - const rootBtn = container.children().prevObject[0].shadowRoot; - rootBtn.querySelector('button').click(); - cy.wait(500); - - const wcContentStart = container.children().prevObject[1].shadowRoot.querySelector('p').innerText; - - rootBtn.querySelector('button').click(); - const wcContent = rootBtn.querySelector('button').innerText; - expect(wcContent).to.equal('Start'); - - cy.wait(500); - const wcContentStop = container.children().prevObject[1].shadowRoot.querySelector('p').innerText; - expect(wcContentStart).to.not.equal(wcContentStop); - }); - }); + cy.get('@btn').click(); + cy.get('@timer').should('have.text', '1'); + cy.get('@btn').click(); + cy.get('@btn').should('have.text', 'Start'); + cy.get('@timer').should('have.text', '2'); }); }); @@ -347,6 +258,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => { describe('getCurrentRoute', () => { let $iframeBody; + beforeEach(() => { // "clear" variables to make sure they are not reused and throw error in case something goes wrong $iframeBody = undefined; diff --git a/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features.cy.js b/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features.cy.js index e3e7c5a858..9590e5d6ba 100644 --- a/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features.cy.js +++ b/test/e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features.cy.js @@ -6,10 +6,6 @@ describe('Luigi client linkManager', () => { } }; - beforeEach(() => { - cy.visitLoggedIn('/'); - }); - describe('linkManager navigation calls', () => { let $iframeBody; beforeEach(() => { @@ -92,6 +88,7 @@ describe('Luigi client linkManager', () => { describe('linkManager - intent navigation', () => { let $iframeBody; + beforeEach(() => { // "clear" variables to make sure they are not reused and throw error in case something goes wrong $iframeBody = undefined; @@ -108,14 +105,17 @@ describe('Luigi client linkManager', () => { cy.wrap($iframeBody) .contains('Open webcomponent in splitView') .click(); - cy.get('.iframeSplitViewCnt>').then(container => { - const root = container.children().prevObject[0].shadowRoot; - const wcContent = root.querySelector('p').innerText; - expect(wcContent).to.equal('Hello WebComponent!'); - root.querySelector('button').click(); - cy.get('[data-testid=luigi-alert]').should('have.class', 'fd-message-strip--information'); - cy.get('[data-testid=luigi-alert]').should('contain', 'Hello from uxManager in Web Component, Language:en'); - }); + cy.get('.iframeSplitViewCnt>') + .shadow() + .as('shw') + .find('p') + .should('contain', 'Hello WebComponent!'); + cy.get('@shw') + .find('button') + .eq(0) + .click(); + cy.get('[data-testid=luigi-alert]').should('have.class', 'fd-message-strip--information'); + cy.get('[data-testid=luigi-alert]').should('contain', 'Hello from uxManager in Web Component, Language:en'); }); it('should be able to list active featureToggles from WC "API"', localRetries, () => { @@ -125,14 +125,17 @@ describe('Luigi client linkManager', () => { cy.wrap($iframeBody) .contains('Open webcomponent in splitView') .click(); - cy.get('.iframeSplitViewCnt>').then(container => { - const root = container.children().prevObject[0].shadowRoot; - const wcContent = root.querySelector('p').innerText; - expect(wcContent).to.equal('Hello WebComponent!'); - root.querySelector('button').click(); - cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles list: ft1'); - cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles: ft1'); - }); + cy.get('.iframeSplitViewCnt>') + .shadow() + .as('shw') + .find('p') + .should('contain', 'Hello WebComponent!'); + cy.get('@shw') + .find('button') + .eq(0) + .click(); + cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles list: ft1'); + cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles: ft1'); }); it('navigate with intent', localRetries, () => {