test(editor): Add canvas actions e2e tests (#4950)

*  Added some more workflow actions tests
*  Updating duplicate workflow tests
*  Fixed duplicate workflow tests
*  Added first batch of canvas tests
*  Added zoom and select tests
*  Added tests for adding and deleting nodes
*  Adding a wait before clicking connection action buttons
*  Adding tests for node actions
* 👌 Addressing review feedback
* 👌 Addressing PR feedback
This commit is contained in:
Milorad FIlipović 2022-12-20 10:33:20 +01:00 committed by GitHub
parent 343f53bf53
commit 96296e1724
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 360 additions and 16 deletions

View file

@ -7,3 +7,5 @@ export const MANUAL_TRIGGER_NODE_NAME = 'Manual Trigger';
export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger';
export const CODE_NODE_NAME = 'Code';
export const SET_NODE_NAME = 'Set';
export const META_KEY = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';

View file

@ -38,6 +38,7 @@ describe('Undo/Redo', () => {
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
cy.get('.connection-actions .add').invoke('show');
cy.get('.connection-actions .add').should('be.visible');
cy.get('.connection-actions .add').click();
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);

283
cypress/e2e/12-canvas.cy.ts Normal file
View file

@ -0,0 +1,283 @@
import { MANUAL_TRIGGER_NODE_NAME, CODE_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME, SET_NODE_NAME } from './../constants';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
const WorkflowPage = new WorkflowPageClass();
const DEFAULT_ZOOM_FACTOR = 1;
const ZOOM_IN_X1_FACTOR = 1.25; // Zoom in factor after one click
const ZOOM_IN_X2_FACTOR = 1.5625; // Zoom in factor after two clicks
const ZOOM_OUT_X1_FACTOR = 0.8;
const ZOOM_OUT_X2_FACTOR = 0.64;
const RENAME_NODE_NAME = 'Something else';
describe('Canvas Actions', () => {
beforeEach(() => {
cy.resetAll();
cy.skipSetup();
WorkflowPage.actions.visit();
cy.waitForLoad();
});
it('should render canvas', () => {
WorkflowPage.getters.nodeViewRoot().should('be.visible');
WorkflowPage.getters.canvasPlusButton().should('be.visible');
WorkflowPage.getters.zoomToFitButton().should('be.visible');
WorkflowPage.getters.zoomInButton().should('be.visible');
WorkflowPage.getters.zoomOutButton().should('be.visible');
WorkflowPage.getters.executeWorkflowButton().should('be.visible');
});
it('should add first step', () => {
WorkflowPage.getters.canvasPlusButton().should('be.visible');
WorkflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.getters.canvasNodes().should('have.length', 1);
});
it('should add a connected node using plus endpoint', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
cy.get('.plus-endpoint').should('be.visible').click();
WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
WorkflowPage.getters.nodeCreatorSearchBar().type('{enter}');
cy.get('body').type('{esc}');
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
});
it('should add disconnected node if nothing is selected', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
// Deselect nodes
WorkflowPage.getters.nodeViewBackground().click({ force: true });
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
});
it('should add note between two connected nodes', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
cy.get('.connection-actions .add').as('AddNodeConnectionButton')
cy.get('@AddNodeConnectionButton').invoke('show');
cy.get('@AddNodeConnectionButton').should('be.visible').click();
WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
WorkflowPage.getters.canvasNodes().should('have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2);
// And last node should be pushed to the right
WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 640px; top: 260px;');
});
it('should delete node using node action button', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters
.canvasNodeByName(CODE_NODE_NAME)
.find('[data-test-id=delete-node-button]')
.click({ force: true });
WorkflowPage.getters.canvasNodes().should('have.length', 1);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
});
it('should delete node using keyboard shortcut', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click();
cy.get('body').type('{backspace}');
WorkflowPage.getters.canvasNodes().should('have.length', 1);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
});
it('should delete node between two connected nodes', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
WorkflowPage.getters.canvasNodes().should('have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2);
WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click();
WorkflowPage.actions.zoomToFit();
cy.get('body').type('{backspace}');
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
});
it('should delete multiple nodes', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.wait(500);
WorkflowPage.actions.selectAll();
cy.get('body').type('{backspace}');
WorkflowPage.getters.canvasNodes().should('have.length', 0);
});
it('should move node', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.zoomToFit();
cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', 50, 150);
WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 740px; top: 360px;');
});
it('should zoom in', () => {
WorkflowPage.getters.zoomInButton().should('be.visible').click();
WorkflowPage.getters.nodeView().should(
'have.css',
'transform',
`matrix(${ ZOOM_IN_X1_FACTOR }, 0, 0, ${ ZOOM_IN_X1_FACTOR }, 0, 0)`
);
WorkflowPage.getters.zoomInButton().click();
WorkflowPage.getters.nodeView().should(
'have.css',
'transform',
`matrix(${ ZOOM_IN_X2_FACTOR }, 0, 0, ${ ZOOM_IN_X2_FACTOR }, 0, 0)`
);
});
it('should zoom out', () => {
WorkflowPage.getters.zoomOutButton().should('be.visible').click();
WorkflowPage.getters.nodeView().should(
'have.css',
'transform',
`matrix(${ ZOOM_OUT_X1_FACTOR }, 0, 0, ${ ZOOM_OUT_X1_FACTOR }, 0, 0)`
);
WorkflowPage.getters.zoomOutButton().click();
WorkflowPage.getters.nodeView().should(
'have.css',
'transform',
`matrix(${ ZOOM_OUT_X2_FACTOR }, 0, 0, ${ ZOOM_OUT_X2_FACTOR }, 0, 0)`
);
});
it('should reset zoom', () => {
// Reset zoom should not appear until zoom level changed
WorkflowPage.getters.resetZoomButton().should('not.exist');
WorkflowPage.getters.zoomInButton().click();
WorkflowPage.getters.resetZoomButton().should('be.visible').click();
WorkflowPage.getters.nodeView().should(
'have.css',
'transform',
`matrix(${ DEFAULT_ZOOM_FACTOR }, 0, 0, ${ DEFAULT_ZOOM_FACTOR }, 0, 0)`
);
});
it('should zoom to fit', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
// At this point last added node should be off-screen
WorkflowPage.getters.canvasNodes().last().should('not.be.visible');
WorkflowPage.getters.zoomToFitButton().click();
WorkflowPage.getters.canvasNodes().last().should('be.visible');
});
it('should select all nodes', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.selectAll();
WorkflowPage.getters.selectedNodes().should('have.length', 2);
});
it('should select nodes using arrow keys', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.wait(500);
cy.get('body').type('{leftArrow}');
WorkflowPage.getters.canvasNodes().first().should('have.class', 'jtk-drag-selected');
cy.get('body').type('{rightArrow}');
WorkflowPage.getters.canvasNodes().last().should('have.class', 'jtk-drag-selected');
});
it ('should select nodes using shift and arrow keys', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.wait(500);
cy.get('body').type('{shift}', { release: false }).type('{leftArrow}');
WorkflowPage.getters.selectedNodes().should('have.length', 2);
});
it('should delete connections by pressing the delete button', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
cy.get('.connection-actions .delete').click();
WorkflowPage.getters.nodeConnections().should('have.length', 0);
});
it('should delete a connection by moving it away from endpoint', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.drag('.rect-input-endpoint.jtk-endpoint-connected', 0, -100);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
});
it('should disable node by pressing the disable button', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters
.canvasNodes()
.last()
.find('[data-test-id="disable-node-button"]')
.click({ force: true });
WorkflowPage.getters.disabledNodes().should('have.length', 1);
});
it('should disable node using keyboard shortcut', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.canvasNodes().last().click();
WorkflowPage.actions.hitDisableNodeShortcut();
WorkflowPage.getters.disabledNodes().should('have.length', 1);
});
it('should disable multiple nodes', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.get('body').type('{esc}');
cy.get('body').type('{esc}');
WorkflowPage.actions.selectAll();
WorkflowPage.actions.hitDisableNodeShortcut();
WorkflowPage.getters.disabledNodes().should('have.length', 2);
});
it('should rename node using keyboard shortcut', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.canvasNodes().last().click();
cy.get('body').trigger('keydown', { key: 'F2' });
cy.get('.rename-prompt').should('be.visible');
cy.get('body').type(RENAME_NODE_NAME);
cy.get('body').type('{enter}');
WorkflowPage.getters.canvasNodeByName(RENAME_NODE_NAME).should('exist');
});
it('should duplicate node', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters
.canvasNodes()
.last()
.find('[data-test-id="duplicate-node-button"]')
.click({ force: true });
WorkflowPage.getters.canvasNodes().should('have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
})
it('should execute node', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters
.canvasNodes()
.last()
.find('[data-test-id="execute-node-button"]')
.click({ force: true });
WorkflowPage.getters.successToast().should('contain', 'Node executed successfully');
});
it('should copy selected nodes', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.selectAll();
WorkflowPage.actions.hitCopy();
WorkflowPage.getters.successToast().should('contain', 'Copied!');
});
});

View file

@ -1,9 +1,11 @@
import { CODE_NODE_NAME, MANUAL_TRIGGER_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
import { CODE_NODE_NAME, MANUAL_TRIGGER_NODE_NAME, META_KEY, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
const NEW_WORKFLOW_NAME = 'Something else';
const TEST_WF_TAGS = ['Tag 1', 'Tag 2', 'Tag 3'];
const IMPORT_WORKFLOW_URL = 'https://www.jsonkeeper.com/b/FNB0#.json';
const DUPLICATE_WORKFLOW_NAME = 'Duplicated workflow';
const DUPLICATE_WORKFLOW_TAG = 'Duplicate'
const WorkflowPage = new WorkflowPageClass();
@ -94,16 +96,14 @@ describe('Workflow Actions', () => {
});
it('should copy nodes', () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
cy.get('#node-creator').should('not.exist');
cy.get('body').type(metaKey, { delay: 500, release: false }).type('a');
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('a');
cy.get('.jtk-drag-selected').should('have.length', 2);
cy.get('body').type(metaKey, { delay: 500, release: false }).type('c');
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('c');
WorkflowPage.getters.successToast().should('exist');
});
@ -197,4 +197,46 @@ describe('Workflow Actions', () => {
WorkflowPage.getters.workflowSettingsModal().should('not.exist');
WorkflowPage.getters.successToast().should('exist');
});
it('should not be able to delete unsaved workflow', () => {
WorkflowPage.getters.workflowMenu().should('be.visible');
WorkflowPage.getters.workflowMenu().click();
WorkflowPage.getters.workflowMenuItemDelete().closest('li')
.should('have.class', 'is-disabled');
});
it('should delete workflow', () => {
WorkflowPage.actions.saveWorkflowOnButtonClick();
WorkflowPage.getters.workflowMenu().should('be.visible');
WorkflowPage.getters.workflowMenu().click();
WorkflowPage.getters.workflowMenuItemDelete().click();
cy.get('div[role=dialog][aria-modal=true]').should('be.visible');
cy.get('button.btn--confirm').should('be.visible').click();
WorkflowPage.getters.successToast().should('exist');
cy.url().should('include', '/workflow/new');
});
it('should duplicate workflow', () => {
// Stub window.open so new tab is not getting opened
cy.window().then(win => {
cy.stub(win, 'open').as('open')
})
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.saveWorkflowOnButtonClick();
WorkflowPage.getters.workflowMenu().should('be.visible');
WorkflowPage.getters.workflowMenu().click();
WorkflowPage.getters.workflowMenuItemDuplicate().click();
WorkflowPage.getters.duplicateWorkflowModal().should('be.visible');
WorkflowPage.getters.duplicateWorkflowModal().find('input').first().should('be.visible');
WorkflowPage.getters.duplicateWorkflowModal().find('input').first().type('{selectall}');
WorkflowPage.getters.duplicateWorkflowModal().find('input').first().type(DUPLICATE_WORKFLOW_NAME);
WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type(DUPLICATE_WORKFLOW_TAG);
WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type('{enter}');
WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type('{enter}');
WorkflowPage.getters.duplicateWorkflowModal().find('button').contains('Duplicate').should('be.visible');
WorkflowPage.getters.duplicateWorkflowModal().find('button').contains('Duplicate').click();
WorkflowPage.getters.errorToast().should('not.exist');
});
});

View file

@ -1,3 +1,4 @@
import { META_KEY } from '../constants';
import { BasePage } from './base';
export class WorkflowPage extends BasePage {
@ -27,7 +28,8 @@ export class WorkflowPage extends BasePage {
cy.getByTestId(`parameter-input-${parameterName}`),
ndvOutputPanel: () => cy.getByTestId('output-panel'),
ndvRunDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
successToast: () => cy.get('.el-notification__title'),
successToast: () => cy.get('.el-notification .el-icon-success').parent(),
errorToast: () => cy.get('.el-notification .el-icon-error'),
activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
workflowMenu: () => cy.getByTestId('workflow-menu'),
firstStepButton: () => cy.getByTestId('canvas-add-button'),
@ -42,6 +44,7 @@ export class WorkflowPage extends BasePage {
zoomToFitButton: () => cy.getByTestId('zoom-to-fit'),
nodeEndpoints: () => cy.get('.jtk-endpoint-connected'),
disabledNodes: () => cy.get('.node-box.disabled'),
selectedNodes: () => this.getters.canvasNodes().filter('.jtk-drag-selected'),
nodeNameContainerNDV: () => cy.getByTestId('node-title-container'),
nodeRenameInput: () => cy.getByTestId('node-rename-input'),
// Workflow menu items
@ -69,8 +72,15 @@ export class WorkflowPage extends BasePage {
workflowSettingsSaveButton: () =>
cy.getByTestId('workflow-settings-save-button').find('button'),
duplicateWorkflowModal: () => cy.getByTestId('duplicate-modal'),
nodeViewBackground: () => cy.getByTestId('node-view-background'),
nodeView: () => cy.getByTestId('node-view'),
inlineExpressionEditorInput: () => cy.getByTestId('inline-expression-editor-input'),
inlineExpressionEditorOutput: () => cy.getByTestId('inline-expression-editor-output'),
zoomInButton: () => cy.getByTestId('zoom-in-button'),
zoomOutButton: () => cy.getByTestId('zoom-out-button'),
resetZoomButton: () => cy.getByTestId('reset-zoom-button'),
executeWorkflowButton: () => cy.getByTestId('execute-workflow-button'),
};
actions = {
visit: () => {
@ -147,23 +157,25 @@ export class WorkflowPage extends BasePage {
cy.getByTestId('zoom-to-fit').click();
},
hitUndo: () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
cy.get('body').type(metaKey, { delay: 500, release: false }).type('z');
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('z');
},
hitRedo: () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
cy.get('body')
.type(metaKey, { delay: 500, release: false })
.type(META_KEY, { delay: 500, release: false })
.type('{shift}', { release: false })
.type('z');
},
selectAll: () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
cy.get('body').type(metaKey, { delay: 500, release: false }).type('a');
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('a');
},
hitDisableNodeShortcut: () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
cy.get('body').type(metaKey, { delay: 500, release: false }).type('d');
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('d');
},
hitCopy: () => {
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('c');
},
hitPaste: () => {
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('P');
},
};
}

View file

@ -20,6 +20,7 @@
size="large"
:title="$locale.baseText('nodeView.zoomIn')"
icon="search-plus"
data-test-id="zoom-in-button"
/>
<n8n-icon-button
@click="zoomOut"
@ -27,6 +28,7 @@
size="large"
:title="$locale.baseText('nodeView.zoomOut')"
icon="search-minus"
data-test-id="zoom-out-button"
/>
<n8n-icon-button
v-if="nodeViewScale !== 1 && !isDemo"
@ -35,6 +37,7 @@
size="large"
:title="$locale.baseText('nodeView.resetZoom')"
icon="undo"
data-test-id="reset-zoom-button"
/>
</div>
</template>

View file

@ -18,8 +18,8 @@
@mouseup="mouseUp"
@wheel="canvasStore.wheelScroll"
>
<div id="node-view-background" class="node-view-background" :style="backgroundStyle" />
<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView">
<div id="node-view-background" class="node-view-background" :style="backgroundStyle" data-test-id="node-view-background" />
<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView" data-test-id="node-view">
<canvas-add-button
:style="canvasAddButtonStyle"
@click="showTriggerCreator('trigger_placeholder_button')"
@ -104,6 +104,7 @@
icon="play-circle"
type="primary"
:disabled="isExecutionDisabled"
data-test-id="execute-workflow-button"
/>
</span>