test(editor): Fix flaky workflow tags e2e tests and store screenshots from CI runs (#4903)

* test(editor): Fix flaky add tags e2e specs, and upload cypress artifacts on failure

* Only run smoke test to debug the pipeline

* Add waitForLoad command and revert debugging changes

.github/workflows/e2e-tests.yml

@@ -63,6 +63,15 @@ jobs:
           pnpm cypress:install
           pnpm test:e2e:all
 
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: |
+            cypress/screenshots
+          retention-days: 1
+
       - name: Notify Slack on failure
         uses: act10ns/slack@v2.0.0
         if: failure()

cypress/e2e/4-node-creator.cy.ts

@@ -33,6 +33,7 @@ describe('Node Creator', () => {
 		}).as('nodesIntercept');
 
 		cy.visit(nodeCreatorFeature.url);
+		cy.waitForLoad();
 	});
 
 	it('should open node creator on trigger tab if no trigger is on canvas', () => {
@@ -94,7 +95,6 @@ describe('Node Creator', () => {
 	})
 
 	it('should add manual trigger node', () => {
-		cy.get('.el-loading-mask').should('not.exist');
 		nodeCreatorFeature.getters.canvasAddButton().click();
 		nodeCreatorFeature.getters.getCreatorItem('Manually').click();
 

cypress/e2e/7-workflow-actions.cy.ts

@@ -13,6 +13,7 @@ describe('Workflow Actions', () => {
 		cy.resetAll();
 		cy.skipSetup();
 		WorkflowPage.actions.visit();
+		cy.waitForLoad();
 	});
 
 	it('should be able to save on button click', () => {
@@ -66,6 +67,7 @@ describe('Workflow Actions', () => {
 	it('should add more tags', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
+		WorkflowPage.getters.isWorkflowSaved();
 		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.actions.addTags(['Another one']);
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length + 1);
@@ -84,7 +86,7 @@ describe('Workflow Actions', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
 		WorkflowPage.getters.firstWorkflowTagElement().click();
-		WorkflowPage.getters.workflowTagsDropdown().find('li').first().click();
+		WorkflowPage.getters.workflowTagsDropdown().find('li.selected').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);
 	});

cypress/pages/features/node-creator.ts

@@ -22,7 +22,7 @@ export class NodeCreator extends BasePage {
 	};
 	actions = {
 		openNodeCreator: () => {
-			cy.get('.el-loading-mask').should('not.exist');
+			cy.waitForLoad();
 			this.getters.plusButton().click();
 			this.getters.nodeCreator().should('be.visible')
 		},

cypress/pages/workflow.ts

@@ -38,8 +38,7 @@ export class WorkflowPage extends BasePage {
 	actions = {
 		visit: () => {
 			cy.visit(this.url);
-			cy.getByTestId('node-view-loader', { timeout: 5000 }).should('not.exist');
+			cy.waitForLoad();
-			cy.get('.el-loading-mask', { timeout: 5000 }).should('not.exist');
 		},
 		addInitialNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.canvasPlusButton().click();
@@ -98,6 +97,9 @@ export class WorkflowPage extends BasePage {
 				this.getters.workflowTagsInput().type('{enter}');
 			});
 			cy.get('body').type('{enter}');
+			// For a brief moment the Element UI tag component shows the tags as(+X) string
+			// so we need to wait for it to disappear
+			this.getters.workflowTagsContainer().should('not.contain', `+${tags.length}`);
 		},
 		zoomToFit: () => {
 			cy.getByTestId('zoom-to-fit').click();

cypress/support/commands.ts

@@ -50,6 +50,11 @@ Cypress.Commands.add('findChildByTestId', { prevSubject: true }, (subject: Cypre
 	return subject.find(`[data-test-id="${childTestId}"]`);
 })
 
+Cypress.Commands.add('waitForLoad', () => {
+	cy.getByTestId('node-view-loader').should('not.exist', { timeout: 10000 });
+	cy.get('.el-loading-mask').should('not.exist', { timeout: 10000 });
+})
+
 Cypress.Commands.add(
 	'signin',
 	({ email, password }) => {

cypress/support/index.ts

@@ -24,6 +24,7 @@ declare global {
 			setupOwner(payload: SetupPayload): void;
 			skipSetup(): void;
 			resetAll(): void;
+			waitForLoad(): void;
 			grantBrowserPermissions(...permissions: string[]): void;
 			readClipboard(): Chainable<string>;
 			paste(pastePayload: string): void,